我有一个脚本，可以在单击按钮时创建一个新行。现在我将如何向每一行添加删除，以便当我单击时，它会删除该行。我的脚本如下:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('button').click(function() {
$(this).parents('tr').remove();
});
</script>
<script type="text/javascript">
function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><button>Delete</button></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='40%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
div.appendChild(temp );
}
</script>
</head>
<body>
<form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECT">
<div id="div_quotes">
<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
<tr bgcolor='#E6E6FA'>
<td width='6%'></td>
<td width='6%'>Slno</td>
<td width='39%'>Item Name</td>
<td width='6%'>Qty</td>
<td width='9%'>Units</td></tr>
</table>
</div>
<br />
<input type="button" value="Click to add More Items" onClick="addTextArea();">
<input type="submit" name="submitted" value="Submit">
</form>
</body>
</html>
最佳答案
首先创建一个函数rowDelete(link)
function rowDelete(link) {
var row = link.parentNode.parentNode;
var table = row.parentNode;
table.removeChild(row);}
并在生成删除时调用此函数 <a>标签
<a href='#' onclick='rowDelete(this); return false;'>Del</a>
这里是你的完整代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript">
function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onclick='rowDelete(this); return false;'>Del</a></td><td width='5%'><input type='text' name='slno[]' size='2' /></td><td width='35%'><input type='text' name='item_name[]' size='42' /></td><td width='6%'><input type='text' name='qty[]' size='2' /></td><td width='9%'><input type='text' name='item_units[]' size='5' /></td></tr></table>";
div.appendChild(temp );
}
function rowDelete(link) {
var row = link.parentNode.parentNode;
var table = row.parentNode;
table.removeChild(row);
}
</script>
</head>
<body>
<form method="post" action="ajax.php?tender_id=1&supplier_name=KR ELECTRONICS INC">
<div id="div_quotes">
<table width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'>
<tr bgcolor='#E6E6FA'>
<td width='5%'></td>
<td width='6%'>Slno</td>
<td width='39%'>Item Name</td>
<td width='6%'>Qty</td>
<td width='9%'>Units</td></tr>
</table>
</div>
<br />
<input type="button" value="Click to add More Items" onClick="addTextArea();">
<input type="submit" name="submitted" value="Submit">
</form>
</body>
</html>
如果有任何问题请告诉我 快乐编码:)
关于javascript - 删除 JavaScript 中动态创建的行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33513557/