[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>
分享到:
相关推荐
js动态添加 删除行
js动态添加行和删除行
纯js实现动态为table添加删除行。实用的代码
动态添加/删除表格行并实现前后台的互动,用最基础的c#和js知识实现,可以作为新手参考。
用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:
通过js来控制动态加一行或删除一行,非常适合table中td一行的添加和删除。
通过JS 动态的添加删除行。 通过JS 动态的添加删除指定行。 通过JS 对齐剩下元素的下标
JS动态添加、删除Table行排序(删除整行、删除整列)JS动态添加、删除Table行排序(删除整行、删除整列)
js 操作表格动态添加和删除行
jquery表格动态添加删除行代码是一款基于jquery实现的表格里面点击按钮后可进行自动添加删除行功能代码。
JS动态添加删除HTML元素(实例)兼容性比较不错的js代码示例
利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。
js table添加、删除行。点“添加”按钮可以添加一行,每行后面都有一个删除按钮,可以删除所在行。
NULL 博文链接:https://long316.iteye.com/blog/1393886
NULL 博文链接:https://1148130696.iteye.com/blog/1726191
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
本效果带tab切换效果。...js实现自动添加删除一行。添加删除时序号自动改变。每一行后面有添加一行按钮,点击时自动在点击行的下面添加一行。新添加行有文本框,文本框输入值失去焦点后自动变为输入的值。
用js实现对table添加行、删除行、复制行的操作。
使用js添加删除表单中的行,动态的添加,适合各种应用系统的前台页面