[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="btnShowCheckboxID" onclick="ShowCheckboxID();" value="Show Checkbox ID" />
<input type="button" id="btnShowTRID" onclick="ShowTRID();" value="Show TR ID" />
<hr size="1" />
<input type="text" id="txt1" value="She,sells,seashells,by,the,seashore" size="50" style="cursor:pointer" />
<input type="button" id="btnSplit" onclick="SplitStr();" value="split string" />
</body>
</html>
==============================
刪除表格行：
<script>function deleteRow (tableID, rowIndex) {
var table =document.all[tableID].deleteRow(rowIndex);
}
</script>
<table id=mxh border=1>
<tr><td>第1行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">刪除本行</td></tr>
<tr><td>第2行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">刪除本行</td></tr>
<tr><td>第3行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">刪除本行</td></tr>
<tr><td>第4行</td><td onclick="deleteRow('mxh',this.parentElement.rowIndex)">刪除本行</td></tr>
</table>
本Blog純屬個人學習、工作需要，記錄相關資料。請不要發表任何有人身攻擊的言論，謝謝！ www.zhipsoft.cn
posted on 2008-07-30 08:53
ZhipSoft 閱讀(8268)
評論(3) 編輯 收藏 所屬分類:
JavaScript