就一个简单的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>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
<th>
</th>
</tr>
</tfoot>
</table>
首先声明一个数组参数,用来保存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保存的值提交到一个隐藏着的服务器控件上了。
{
var hf = document.getElementById( " hf " );
hf.innerText = globalArrays.join( ' _ ' );
}
下面介绍操作合计行
/// 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 >