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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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> 展开
希望大大帮助解决这个问题。
<!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">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<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个回答
展开全部
不用写太复杂；删除简单事例省去给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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
删除按钮方法，传递tr的id "<button onclick='delRow(\""+addRow.id+"\")'>删除</button>"
删除方法如下
function delRow(rowId) {
newRow = document.getElementById(rowId);
newRow .parentNode.removeChild(newRow);
}
删除方法如下
function delRow(rowId) {
newRow = document.getElementById(rowId);
newRow .parentNode.removeChild(newRow);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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);
}
+ "<button onclick='confirmBooking(\"" + addRow.id + "\")'>确定</button>";
下面调用的函数改为：
function confirmBooking(id) {
alert(id);
}
function delRow(id) {
alert("需要删除行的id:"+id);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
appendChild(object)
添加子节点
添加子节点
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
