87,992
社区成员
发帖
与我相关
我的任务
分享表格中动态添加行中，如何实现删除当前行？
<script type="text/javascript">
function addRow() { //添加行
var root = document.getElementById("tbody")
var allRows = root.getElementsByTagName('tr');
var allCells = allRows[0].getElementsByTagName('td');
var newRow = root.insertRow();
var newCell0 = newRow.insertCell();
var newCell1 = newRow.insertCell();
newCell0.innerHTML = allCells[0].innerHTML;
newCell1.innerHTML = allCells[1].innerHTML;
}
function removeRow(r) { //删除行（这个删除的是第一个。如何改成删除当前选中的行）
var root = r.parentNode;
root.deleteRow();
}
</script>
<table id="testTable" cellpadding="0" cellspacing="0" class="t1" width="100%" >
<tr>
<td></td>
<td><img id="Addrow" src="../image/new.gif" alt="新增" onclick="addRow()" /> </td>
</tr>
<tbody id="tbody" >
<tr >
<td align="right"><div style=" text-align:right">卡 号：</div></td>
<td >
<asp:TextBox ID="txtInCardNo" runat="server" MaxLength="19"></asp:TextBox> <img src="../image/010.gif" alt="删除" onclick="removeRow(this.parentNode.parentNode)"/>
</td>
</tr>
</tbody>
</table>
...全文
请发表友善的回复…
发表回复
licip 2012-08-04
- 打赏
- 举报
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
<!--
function delTr(obj){
obj.parentNode.parentNode.deleteRow(obj.rowIndex);
}
//-->
</script>
</head>
<body>
<table border="1">
<tr onclick="delTr(this)">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onclick="delTr(this)">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onclick="delTr(this)">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onclick="delTr(this)">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
<!--
function delTr(obj){
obj.parentNode.parentNode.deleteRow(obj.rowIndex);
}
//-->
</script>
</head>
<body>
<table border="1">
<tr onclick="delTr(this)">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr onclick="delTr(this)">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr onclick="delTr(this)">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr onclick="delTr(this)">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</body>
</html>
應燁軍 2012-08-04
- 打赏
- 举报
不介意使用jQuery吧
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery/jquery-1.7b2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".AddRow").click(function () {
var template = $("#Template");
$("#testTable tbody").append(template.clone(true).removeAttr("id").show(500));
});
$(".DeleteRow").click(function () {
$(this).parents("table tr").remove();
});
});
</script>
</head>
<body>
<table id="testTable" cellpadding="0" cellspacing="0" class="t1" width="100%">
<tr>
<td>
</td>
<td>
<img src="../image/new.gif" alt="新增" class="AddRow" />
</td>
</tr>
<!--模板行-->
<tr id="Template" style="display: none">
<td align="right">
<div style="text-align: right">
卡 号：</div>
</td>
<td>
<input type="text" name="name" value="" />
<img src="../image/010.gif" alt="删除" class="DeleteRow" />
</td>
</tr>
</table>
</body>
</html>
vue2 - 实现elementUI表格组件table动态添加或删除行功能，表格列表动态新增/插入/删除表格行，可编辑单元格/点击修改表格内数据并更新数据列表（支持接口懒加载、表格分页、复杂嵌套表格）
