JS动态增添删除行
日期：2014-05-16 浏览次数：20354 次
[JS]动态添加删除ROW
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>增加Table行</title>
</head>
<script>
var count=3;
function CheckAll(sender)
{
?var _array = document.getElementsByTagName("input");
?for (var i=0;i<_array.length;i++)
?{
? var e = _array[i];
? if (e.type == "checkbox")
? {
??? if(e.id != "chkAll")
??? {
??? e.checked = sender.checked;
??? }
? }
?}
}
function AddRow(obj)
{
?count++;
?
?//添加一行
?var newTr = testTbl.insertRow();
?newTr.setAttribute("id","tr" + count.toString());
?//添加两列
?var newTd0 = newTr.insertCell();
?var newTd1 = newTr.insertCell();
?//设置列内容和属性
?
?newTd0.innerHTML = '<input type=checkbox id="box'+ count.toString() +'">';
?newTd1.innerText= '第'+ count.toString() +'行';
}
function DelRow()
{
?var tb = document.getElementById("testTbl");
?if(tb.hasChildNodes)
?{
? var lastchild = tb.childNodes[0].childNodes[tb.childNodes[0].childNodes.length-1];
? if(lastchild)
? {
?? if(confirm("确认删除" + lastchild.childNodes[1].childNodes[0].nodeValue + "?"))
?? {
??? var removednode = lastchild.parentNode.removeChild(lastchild);
??? //alert(removednode.childNodes[1].childNodes[0].nodeValue);
??? return true;
?? }
?? else
?? {
??? return false;
?? }
? }
?}
}
function ShowCheckboxID()
{
?var message = "";
?
?var _array = document.getElementsByTagName("input");
?for (var i=0;i<_array.length;i++)
?{
? var e = _array[i];
? if (e.type == "checkbox")
? {
?? //alert(e.id);
?? message += e.id + ",";
? }
?}
?
?if(message.length > 0)
?{
? message = message.substr(0,message.length-1);
?}
?alert(message);
}
function ShowTRID()
{
?var tb = document.getElementById("testTbl");
?if(tb.hasChildNodes)
?{
? var message = "";
? var array_tr = tb.childNodes[0].childNodes;
? for(var i=0;i< array_tr.length;i++)
? {
?? if(i==0)
?? {
??? message += array_tr[i].id;
?? }
?? else
?? {
??? message += ","+array_tr[i].id;
?? }
?? //alert(array_tr[i].id);
? }
?
? alert(message);
?}
}
function SplitStr()
{
?var str = document.getElementById("txt1").value;
?
?var _array = str.split(",");
?
?var result = "";
?for(var i=0;i<_array.length;i++)
?{
? result += _array[i] +"\r\n";
?}
?
?if(result.length > 0)
?{
? result = result.substr(0,result.length-2);
?}
?alert(result);
}
</script>
<body>
<table id="testTbl" style="border: solid 1px #D2D2D2">
<tr id="tr0">
<td><input type=checkbox id="chkAll" onclick="CheckAll(this);"></td>
<td>全选</td>
</tr>
<tr id="tr1">
<td ><input type=checkbox id="box1"></td>
<td>第1行</td>
</tr>
<tr id="tr2">
<td ><input type=checkbox id="box2"></td>
<td>第2行</td>
</tr>
<tr id="tr3">
<td ><input type=checkbox id="box3"></td>
<td>第3行</td>
</tr>
</table>
<br />
<input type="button" id="btnAdd" onclick="AddRow();" value="Add Row" />
<input type="button" id="btnDel" onclick="DelRow();" value="Del Row" />
<input type="button" id="btnShowCheck
