JS 操作 Table

 

这里例子是使用 JavaScript 来操作 table ，操作有：正序排列、反序排列、正序排行、反序排行、删除行、删除列、插入

 

行等等一系列的操作。

 

 <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); } function averCol(obj){ var wh=obj.width; var cells=obj.rows[0].cells; for(var i=0;i<cells.length;i++){ cells[i].width=Math.ceil(wh/cells.length); } } function insertRow(obj){ if(currRow>=0&&currRow<obj.rows.length-1){ var maxCell=obj.rows[0].cells.length; obj.insertRow(currRow+1); for(var i=0;i<maxCell;i++){ obj.rows[currRow+1].insertCell(i); obj.rows[currRow+1].cells[i].innerHTML="<div contentEditable>0</div>"; } clear(); averCol(obj); chnBgcolor(obj,currRow,"ffffff"); } } function insertCell(obj){ if(currCell&&currCell!=obj.rows[0].cells.length-1){ for(var i=0;i<obj.rows.length;i++){ obj.rows[i].insertCell(currCell+1); obj.rows[i].cells[currCell+1].innerHTML="<div contentEditable>0</div>"; } clear(); averCol(obj); chnBgcolor(obj,currRow,"ffffff"); } } function check(obj){ var k=parseInt(obj.innerText); if(isNaN(k)){ obj.childNodes[0].innerText=0; return 0; } else{ obj.childNodes[0].innerText=k; return k; } } function sum(obj){ var o=event.srcElement; var total=0; var tindex=obj.rows.length-1; if(o.parentElement.tagName=="TD"&&o.parentElement.cellIndex>=1&&o.parentElement.parentElement.rowIndex>=1){ var index=o.parentElement.cellIndex; var pindex=o.parentElement.parentElement.rowIndex; for(var i=1;i<tindex;i++){ var num=check(obj.rows[i].cells[index]); total=parseInt(total)+num; } var total1=0; for(i=1;i<obj.rows[pindex].cells.length-1;i++){ total1+=check(obj.rows[pindex].cells[i]); } obj.rows[pindex].cells(obj.rows[pindex].cells.length-1).innerText=total1; obj.rows[tindex].cells[index].innerText=total; obj.rows[tindex].cells(obj.rows[0].cells.length-1).innerText=addAll(obj); } setPos(obj); } function chnBgcolor(obj,index,color){ for(var i=0;i<obj.rows.length;i++){ if(i==index){ obj.rows[i].bgColor=color; } else{ obj.rows[i].bgColor="ffffff"; } } } function setPos(obj){ var o=event.srcElement; if(o.tagName=="DIV"){ currRow=o.parentElement.parentElement.rowIndex; currCell=o.parentElement.cellIndex; chnBgcolor(obj,currRow,"dedede"); } else if(o.tagName=="TD"){ currRow=o.parentElement.rowIndex; currCell=o.cellIndex; } else{ currRow=obj.rows.length-1; currCeil=obj.rows[0].cells.length-1; } } function clear(){ currRow=0; currCell=0; } function addAll(obj){ var total=0; for(var i=1;i<obj.rows[0].cells.length-1;i++){ total+=parseInt(obj.rows[obj.rows.length-1].cells[i].innerText); } return total; } //--> </SCRIPT>