现在的位置: 首页 > 综合 > 正文

用JAVASCRIPT实现表格行自动增加,同时自动向上移动有数据的行,无数据的行向下移动

2018年02月02日 ⁄ 综合 ⁄ 共 4650字 ⁄ 字号 评论关闭

//記入行数の選択
function doSelectKey(){
//alert("key>>>"+event.keyCode);
 if(event.keyCode != 9){
  event.returnValue=false;
 }
}

//記入行マウスのスクロール
function doSelectRoll(){
 event.returnValue=false;
}

 

//システム日付の取得
function getNowDate(){
 var date = new Date();
 var strYear = "" + date.getFullYear();
 var strMonth = "" + (1 + date.getMonth());
 if(strMonth.length == 1){
  strMonth = "0" + strMonth;
 }
 var strDay = "" + date.getDate();
 if(strDay.length == 1){
  strDay = "0" + strDay;
 }
//alert("year>>"+strYear);
//alert("month>>"+strMonth);
//alert("day>>"+strDay);
 
 return strYear + strMonth + strDay;
}

//空ろ行にデータ行を移動する。
function doChange(){
 var iRowIndex = event.srcElement.parentElement.parentElement.rowIndex;
//alert("active row>>"+iRowIndex); 
 var content = document.all.arrContent;
 var contype = document.all.arrConType;
 if(content[iRowIndex - 1].value == "" && contype[iRowIndex - 1].value == ""){
//alert("change empty"); 
  for(var i=iRowIndex - 1; i<content.length; i++){
   if(i == content.length - 1){
    content[i].value = "";
    contype[i].value = "";   
   }else{
    content[i].value = content[i + 1].value;
    contype[i].value = contype[i + 1].value;
   }
  }
 }  
}

//データ行の移動チェック
function doMoveCheck(){
 var obj = document.all.activeRow;
//alert("before row>>"+obj.value);
 var intRowIndex = event.srcElement.parentElement.parentElement.rowIndex;
//alert("active row>>"+intRowIndex);
 if(obj.value == "0"){
  obj.value = intRowIndex;
 }else{
  if(obj.value != intRowIndex){
   doRowMove(obj.value - 1);
   obj.value = intRowIndex;
  }
 }
}

//データ行を移動する
function doRowMove(iRow){
 var content = document.all.arrContent;
 var contype = document.all.arrConType;
//alert("content.length>>"+content.length);
//alert("contype.length>>"+contype.length);
 for(var i=0; i<content.length; i++){
//alert("content["+i+"]>>'"+content[i].value+"'[]contype["+i+"]>>'"+contype[i].value+"'"); 
  if(content[i].value == "" && contype[i].value == "" && i < iRow){
//alert("content["+iRow+"]>>'"+content[iRow].value+"'[]contype["+iRow+"]>>'"+contype[iRow].value+"'");   
   content[i].value = content[iRow].value;
   contype[i].value = contype[iRow].value; 
   content[iRow].value = "";
   contype[iRow].value = "";  
   return;
  }
 }
}

//存在データを取得する
function getArr(arrobj){
//alert("arrobj.length>>"+arrobj.length); 
 var arrRtn = new Array();
 if((arrobj.length==null)){
  arrRtn[0]=arrobj.value;
 }else{
  for(var i=0; i<arrobj.length; i++){
   arrRtn[i]=arrobj[i].value;
  }
 }
//alert("arr.length>>"+arrRtn.length); 
//alert("arr.value>>"+arrRtn.toString());
 return arrRtn;
}

//再質問内容テーブルの行を追加する。
function doRows(){
 var content = document.all.arrContent;
 var contype = document.all.arrConType;
//alert("not exist>>"+(content==null));
 var contentOld = new Array();
//alert("contentOld.length1>>"+contentOld.length); 
 var contypeOld = new Array();
 var rowCnt = document.all.selRowCnt.value;
//alert("select num>>"+rowCnt); 
 var rows = 0;
 if(content==null){
  rows = rowCnt;
 }else{
//alert("content.length>>"+content.length);
  contentOld = getArr(content);
//alert("contentOld.length2>>"+contentOld.length);  
  contypeOld = getArr(contype);
  if((content.length==null)){
   rows = parseInt(rowCnt) + 1;
  }else{
   rows = parseInt(rowCnt) + parseInt(content.length);  
  }
 } 
 
//alert("element>>"+document.getElementById("hidSel").outerHTML);
 var strTbl = "";
//alert("rows>>"+rows); 
 if(rows > 15){
  rows = 15;
 }
 if(rows != 0){
  strTbl += "<table cellspacing='0' cellpadding='0' border='1' width='440' name='tblSub'>";
  strTbl += "<tr height='20'>";
  strTbl += "<td class='tdTblHead' width='50' align='center' bgcolor='#993366'>番号</td>";
  strTbl += "<td class='tdTblHead' width='260' align='center' bgcolor='#993366'>質問内容</td>";
  strTbl += "<td class='tdTblHead' width='120' align='center' bgcolor='#993366'>内容区分</td>";
  strTbl += "</tr>";
  for(var i=0; i<rows; i++){
   strTbl += "<tr height='20'>";
   strTbl += "<td class='tdTblRowCenter' width='50' align='center' bgcolor='#ffffff'>"+(i+1)+"</td>";
   strTbl += "<td style='border:1px solid #000000;background-color: #ffffff;' width='260'><input type='text' name='arrContent' class='tdText' style='width:260;' onfocus='doMoveCheck()' onchange='doChange()' onblur='doChange()' maxlength='200'></td>";
   strTbl += "<td class='tdTblRowLeft' width='130'>"
   strTbl += document.getElementById("hidSel").outerHTML;
   strTbl += "</td>";
   strTbl += "</tr>";
  }
  strTbl += "</table>";
  
//alert("++++++");
  document.all.divSub.innerHTML = strTbl;

  if(content != null){
   var contentNew = document.all.arrContent;
   var contypeNew = document.all.arrConType;
   for(var n=0; n<contypeNew.length; n++){
    contypeNew[n].value = "";
   }
//alert("contentOld.length3>>"+contentOld.length);   
   for(var m=0; m<contentOld.length; m++){
//alert("contentOld["+m+"]>>"+contentOld[m]);    
//alert("contypeOld["+m+"]>>"+contypeOld[m]);    
    contentNew[m].value = contentOld[m];
    contypeNew[m].value = contypeOld[m];
   }
  }

  document.all.selRowCnt.value="0";
  document.all.arrContent[0].focus();
 }
}

 

抱歉!评论已关闭.