在javascript中刪除動態創建的行
[英]delete dynamically created rows in javascript
問題描述
我有一個腳本，可在單擊按鈕時創建新行。 現在，我將如何向每行添加刪除，以便在單擊時刪除行。 我的腳本如下：
<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>
3 個解決方案
解決方案1
2 已采納 2015-11-04 05:07:51
首先創建一個函數rowDelete(link)
function rowDelete(link) {
var row = link.parentNode.parentNode;
var table = row.parentNode;
table.removeChild(row);}
並在generate delete <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>
讓我知道是否有任何問題快樂編碼:)
解決方案2
0 2015-11-04 04:59:26
如果每行（在td ）都有一個按鈕，則可以查找並刪除其祖父母（ tr ）：
$('button').click(function() { $(this).parents('tr').remove(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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> <td width='9%'></td> </tr> <tr> <td width='5%'></td> <td width='6%'>xyz</td> <td width='39%'>xyz</td> <td width='6%'>xyz</td> <td width='9%'>xyz</td> <td width='9%'> <button>Delete</button> </td> </tr> <tr> <td width='5%'></td> <td width='6%'>123</td> <td width='39%'>123</td> <td width='6%'>123</td> <td width='9%'>123</td> <td width='9%'> <button>Delete</button> </td> </tr> <tr> <td width='5%'></td> <td width='6%'>abc</td> <td width='39%'>abc</td> <td width='6%'>abc</td> <td width='9%'>abc</td> <td width='9%'> <button>Delete</button> </td> </tr> </table>
解決方案3
0 2015-11-04 05:22:23
為了我自己的理智，我將忽略為改進代碼而可以做的所有事情，僅以類似的方式回答問題：
您應該能夠用此替換您的部分
<script type="text/javascript">
var i = 1;
function addTextArea(){
var div = document.getElementById('div_quotes');
var temp = document.createElement('div');
temp.innerHTML ="<table id='row" + i + "' width='600' border='1' style='border-collapse: collapse' cellpadding='3' cellspacing='3'><tr><td width='5%'><a href='#' onClick='removeRow('row" + i + "')'>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 );
i++;
}
function removeRow(rowId)
{
var rowToRemove = document.getElementById(rowId);
//Might want to do some error checking
rowToRemove.parentNode.removeChild(rowToRemove);
}
</script>
如何使用Javascript DOM刪除動態創建的html行中的特定行？
[英]How to delete a particular row in a dynamically created html rows using Javascript DOM?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.