【转载】js 对表格进行各种操作(转)

来源：互联网发布：平板windows系统怎么样编辑：程序博客网时间：2024/04/30 01:01

一个对HTML表格进行动态增删改的例子.

<TABLE width="500" border="1" id="t" onKeyUp="sum(this)" onClick="setPos(this)">
<TR>
<TD><div contentEditable>项目\部门</div></TD>
<TD><div contentEditable>部门1</div></TD>
<TD><div contentEditable>部门2</div></TD>
<TD><div contentEditable>部门3</div></TD>
<TD><div contentEditable>统计</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物1</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物2</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物3</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物4</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>货物5</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div contentEditable>0</div></TD>
<TD><div>0</div></TD>
</TR>
<TR>
<TD><div contentEditable>总计</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
<TD><div>0</div></TD>
</TR>
</TABLE>
<input type="button" value="加一行" onClick="insertRow(document.all.t)">
<input type="button" value="加一列" onClick="insertCell(document.all.t)">
<input type="button" value="删除行" onClick="deleteRow(document.all.t)">
<input type="button" value="删除列" onClick="deleteCell(document.all.t)">
<input type="button" value="正序排列" onClick="ascRow(document.all.t)">
<input type="button" value="反序排列" onClick="descRow(document.all.t)">
<br>
<input type="button" value="横向正序排列" onClick="ascCell(document.all.t)">
<input type="button" value="横向反序排列" onClick="descCell(document.all.t)">
<input type="button" value="全部数据统计" onClick="getSum(document.all.t,'total')">
<input type="text" value="0" name="total" style="width:50">
<SCRIPT LANGUAGE="JavaScript">
<!--
var currRow="0";
var currCell="0";
function getSum(obj,objName){
var sum=0;
     for(var i=1;i<obj.rows.length-1;i++){
         for(var j=1;j<obj.rows[i].cells.length;j++){
            sum+=parseInt(obj.rows[i].cells[j].innerText);
   }
}
document.getElementsByName(objName)[0].value=sum;
}

//正序排列
function ascCell(obj){
if(currCell>=1&&currRow>=1){
   var len=obj.rows[0].cells.length;
   for(var j=0;j<len;j++){
    var order=0;
             for(var i=1;i<len-2;i++){
                  if(parseInt(obj.rows[currRow].cells[i].innerText)>parseInt(obj.rows[currRow].cells[i+1].innerText)){
                       for(var k=0;k<obj.rows.length;k++){
                            var tmp=obj.rows[k].cells[i].innerHTML;
          obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
                            obj.rows[k].cells[i+1].innerHTML=tmp;
        }
           order++;
         }
          }
    len--;
    if(order==0){
                break;
    }
   }
}
clear();
}

//反序排列
function descCell(obj){
if(currCell>=1&&currRow>=1){
   var len=obj.rows[0].cells.length;
   for(var j=0;j<len;j++){
    var order=0;
             for(var i=1;i<len-2;i++){
                  if(parseInt(obj.rows[currRow].cells[i].innerText)<parseInt(obj.rows[currRow].cells[i+1].innerText)){
                       for(var k=0;k<obj.rows.length;k++){
                            var tmp=obj.rows[k].cells[i].innerHTML;
          obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
                            obj.rows[k].cells[i+1].innerHTML=tmp;
        }
           order++;
         }
          }
    len--;
    if(order==0){
                break;
    }
   }
}
clear();
}

//正序排行
function ascRow(obj){
if(currCell>=1){
   var rows=obj.rows;
   var len=rows.length-2;
   for(var j=0;j<=rows.length-2;j++){
    var order=0;
             for(var i=1;i<len;i++){
                  if(parseInt(rows[i].cells[currCell].innerText)>parseInt(rows[i+1].cells[currCell].innerText)){
                       obj.moveRow(i,i+1);
           order++;
         }
          }
    len--;
    if(order==0){
                break;
    }
   }
}
clear();
}

//反序排行
function descRow(obj){
if(currCell>=1){
   var rows=obj.rows;
   var len=rows.length-2;
   for(var j=0;j<rows.length-2;j++){
    var order=0;
             for(var i=1;i<len;i++){
                  if(parseInt(rows[i].cells[currCell].innerText)<parseInt(rows[i+1].cells[currCell].innerText)){
                       obj.moveRow(i,i+1);
           order++;
         }
          }
    len--;
    if(order==0){
                break;
    }
   }
}
clear();
}

//删除行
function deleteRow(obj){
var rows=obj.rows.length;
if(currRow>=1&&currRow<rows-1){
obj.deleteRow(currRow);
}
clear();
averCol(obj);
}

//删除列
function deleteCell(obj){
    if(currCell>=1&&currCell<obj.rows[0].cells.length-1){
        for(var i=0;i<obj.rows.length;i++){
            obj.rows[i].deleteCell(currCell);
     }
    }
    clear();
    averCol(obj);
}

0 0