js 操作表格大全

一：表格  

<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">

二：js代码

<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>