javascript table 添加行和和删除行问题

以下代码可以通过增加订单按钮生成行，但是无法给新生成的行的id赋值，导致无法用删除按钮定位id来删除该行。希望大大帮助解决这个问题。<!DOCTYPEHTMLPUBLIC... 以下代码可以通过增加订单按钮生成行，但是无法给新生成的行的id赋值，导致无法用删除按钮定位id来删除该行。
希望大大帮助解决这个问题。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>网上订单.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">


<style type="text/css">
#div1 {
margin: 0 auto;
}

.title {
text-align: center;
font-weight: bold;
background-color: #cccccc;
}

td {
text-align: center;
border: 1px solid black;
}
</style>
<script type="text/javascript">
var row_index;
var newRow;
var uRow;
var addRow;
function addBooking() {

newRow = document.getElementById("myTable");
row_index = parseInt(newRow.rows.length - 1);
addRow = newRow.insertRow(row_index);
addRow.id = "tri"+row_index;
var col1 = addRow.insertCell(0);
col1.innerHTML = "<input type='text' size='20' name='row_index'/>";
var col2 = addRow.insertCell(1);
col2.innerHTML = "<input type='text' size='3' />";
var col3 = addRow.insertCell(2);
col3.innerHTML = "<input type='text' size='5' value='¥ '/>";
var col4 = addRow.insertCell(3);
col4.innerHTML = "<button onclick='delRow()'>删除</button>" + " "
+ "<button onclick='confirmBooking()'>确定</button>";

}
function confirmBooking() {
alert(document.getElementById("myTable").rowIndex);
}
function delRow() {

}
</script>

</head>

<body>
<div id="div1">
<table width="100%" cellspacing="0" id="myTable">
<tr class="title">
<td>
商品名称
</td>
<td>
数量
</td>
<td>
单价
</td>
<td>
操作
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<input name="b3" type="button" value="增加订单" onclick="addBooking()" />
</td>
</tr>
</table>

</div>
</body>
</html> 展开

 我来答

4个回答

#热议# 不吃早饭真的会得胆结石吗？

woshixindong
2012-03-22 · TA获得超过432个赞

知道小有建树答主

回答量：268

采纳率：100%

帮助的人：308万

我也去答题访问个人页

关注

展开全部

不用写太复杂；删除简单事例省去给TR定义ID
<table border="0" cellspacing="0" cellpadding="0">
<tr><td>1</td><td><a href="#" onClick="delRow(this);return false">删除</a></td></tr>
<tr> <td>2</td><td><input type="button" onClick="delRow(this)" value="删除" /></td></tr>
<tr><td>3</td><td><a href="#" onClick="delRow(this);return false">删除</a></td></tr>
<tr><td>4</td><td><input type="button" onClick="delRow(this)" value="删除" /></td></tr>
</table>
<script type="text/javascript">
function delRow(t){
while(t.tagName!="TR")t=t.parentNode;
t.parentNode.removeChild(t)
}
</script>

已赞过 已踩过<

评论收起

mjfttt
2012-03-23 · TA获得超过169个赞

知道小有建树答主

回答量：102

采纳率：0%

帮助的人：72.3万

我也去答题访问个人页

关注

展开全部

删除按钮方法，传递tr的id "<button onclick='delRow(\""+addRow.id+"\")'>删除</button>"

删除方法如下
function delRow(rowId) {
newRow = document.getElementById(rowId);
newRow .parentNode.removeChild(newRow);
}

已赞过 已踩过<

评论收起

tz6060996
2012-03-22 · TA获得超过2282个赞

知道大有可为答主

回答量：1171

采纳率：100%

帮助的人：1622万

我也去答题访问个人页

关注

展开全部

col4.innerHTML = "<button onclick='delRow(\""+addRow.id+"\")'>删除</button>" + " "
+ "<button onclick='confirmBooking(\"" + addRow.id + "\")'>确定</button>";

下面调用的函数改为：
function confirmBooking(id) {
alert(id);
}
function delRow(id) {
alert("需要删除行的id:"+id);

}

已赞过 已踩过<

评论收起

skyfukk
2012-03-22 · TA获得超过1187个赞

知道小有建树答主

回答量：966

采纳率：100%

帮助的人：633万

我也去答题访问个人页

关注

展开全部

appendChild(object) 
添加子节点

本回答被提问者采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

javascript table 添加行和和删除行问题

为你推荐：