?

就一個簡單的Table，開始我們的鉆研

?

<table?id="DetailInfo">
????????<tbody>
????????????<tr>
??????????????? <th style="width: 30px;">
??????????????????? <input id="chbAll" type="checkbox" οnclick="fnSelectAll(this);" /></th>
????????????????<th>
????????????????????標題1</th>
????????????????<th>
????????????????????標題2</th>
????????????????<th>
????????????????????標題3</th>
????????????????<th>
????????????????????標題4</th>
????????????????<th>
????????????????????標題5</th>
????????????</tr>
????????</tbody>
????????<tfoot>
????????????<tr>
????????????????<th ?style="width: 30px;">
????????????????????合計:</th>
??????????????? <th>
????????????????????&nbsp;</th>
????????????????<th>
????????????????????&nbsp;</th>
????????????????<th>
????????????????????&nbsp;</th>
????????????????<th>
????????????????????&nbsp;</th>
????????????????<th>
????????????????????&nbsp;</th>
????????????</tr>
????????</tfoot>
</table>

?

?
首先聲明一個數(shù)組參數(shù)，用來保存Table值
var globalArrays=new Array();?? // var globalArrays=[];
添加一行]]

?

function?AddRow()
{
????????var?newItem;//保存table值，便于后臺操作

????????var?table=document.getElementById("DetailInfo");
????????var?oBody=table.tBodies[0];
????????var?rowIndex=oBody.rows.length;
????????
????????oBody.insertRow(rowIndex);
????????//checkBox
????????oBody.rows[rowIndex].insertCell(0);
????????oBody.rows[rowIndex].cells[0].appendChild(document.createElement("<input?id=\"chbChild\"?value=\""+rowIndex+"\"??type=\"checkbox\"?/>"));
????????//oBody.rows[rowIndex].cells[0].className?=?"tableNext";

????????//標題1
????????oBody.rows[rowIndex].insertCell(1);
????????oBody.rows[rowIndex].cells[1].appendChild(document.createTextNode("1"));
????????oBody.rows[rowIndex].cells[1].noWrap=true;
????????newItem="1";
????????//標題2
????????oBody.rows[rowIndex].insertCell(2);
????????oBody.rows[rowIndex].cells[2].appendChild(document.createTextNode("2"));
????????oBody.rows[rowIndex].cells[2].noWrap=true;
????????newItem=newItem?+?","?+"2";
????????//標題3
????????oBody.rows[rowIndex].insertCell(3);
????????oBody.rows[rowIndex].cells[3].appendChild(document.createTextNode("3"));
????????oBody.rows[rowIndex].cells[3].noWrap=true;
????????newItem=newItem?+?","?+"3";???
????????//標題4
????????oBody.rows[rowIndex].insertCell(4);
????????oBody.rows[rowIndex].cells[4].appendChild(document.createTextNode("4"));
????????oBody.rows[rowIndex].cells[4].noWrap=true;??
????????newItem=newItem?+?","?+"4";
????????//標題5
????????oBody.rows[rowIndex].insertCell(5);
????????oBody.rows[rowIndex].cells[5].appendChild(document.createTextNode("5"));
????????oBody.rows[rowIndex].cells[5].noWrap=true;???
????????newItem=newItem?+?","?+"5";

????????globalArrays.push(newItem);
}

刪除]]

?????function?GetCheckboxs()
????{
????????var?table=document.getElementById("DetailInfo");
????????var?oBody=table.tBodies[0];
????????var?rows=oBody.rows;
????????var?arrays=new?Array();
????????
????????for(var?i=1;i<rows.length;i++)
????????{
????????????if(rows[i].cells[0].childNodes[0].checked)
????????????{
????????????????arrays.push(i);
????????????}
????????}??
????????
????????DeleteRow(arrays);
????????DeleteData(arrays);
????}
????function?DeleteRow(arrays)
????{
????????var?table=document.getElementById("DetailInfo");
????????var?oBody=table.tBodies[0];
????????arrays.reverse();
????????for(var?i=0;i<arrays.length;i++)
????????{
????????????oBody.deleteRow(arrays[i]);
????????}
????}
????function?DeleteData(arrays)
????{
????????//arrays.reverse();
????????for(var?i=0;i<arrays.length;i++)
????????{
????????????globalArrays.splice(arrays[i]-1,1);
????????}
????}

全選（Checkbox）

?//選擇全部
function?fnSelectAll(oEven)
{
????var?chbChilds=document.getElementsByTagName("input");
????for?(var?i=0;i<chbChilds.length;i++)
????{
????????if?(chbChilds[i].type=="checkbox"?&&?chbChilds[i].id=="chbChild")
????????{
????????????if(oEven.checked==true)
????????????{
????????????????chbChilds[i].checked=true;
????????????}
????????????else
????????????{
????????????????chbChilds[i].checked=false;????
????????????}????????????????
????????}
????}
}

好，進行到這里，下一步通常就該是保存操作了吧。因此是時候將globalArrays保存的值提交到一個隱藏著的服務器控件上了。

?????function?fnChange()
?????{
????????var?hf=document.getElementById("hf");
????????hf.innerText=globalArrays.join('_');????
?????}

?

?

?

下面介紹操作合計行

?

<script?type="text/javascript">
????///?js.獲取并記算出合計
????///?
????function?GetInAll()
????{
????????var?table=document.getElementById("DetailInfo");
????????var?oBody=table.tBodies[0];
????????var?oFoot=table.tFoot;
????????
????????var?rows=oBody.rows;
????????var?iamoney=0;
????????for(var?i=1;i<rows.length;i++)
????????{
????????????if(rows[i].cells[5].innerText.length==0)
????????????{
????????????????continue;
????????????}
????????????else
????????????{
????????????????iamoney?=parseFloat(iamoney)+parseFloat(rows[i].cells[5].innerText);
????????????}
????????}
????????oFoot.rows[0].cells[5].innerText=iamoney;
????}
</script>

轉自:http://www.cnblogs.com/xvqm00/archive/2009/03/10/1407729.html

轉載于:https://www.cnblogs.com/sunjinpeng/archive/2012/03/19/Javascritp-Table-Js.html

總結

以上是生活随笔為你收集整理的JavaScript操作Table的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。