Question

我有一个脚本，可以在按钮点击上创建一个新行。现在我将如何向每行添加删除，以便在我单击时删除该行。我的脚本如下：

<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>

Answer 1

首先创建一个函数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>

如果有任何问题，请告诉我快乐的编码：）

Answer 2

如果每行都有一个按钮（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>

Answer 3

为了我自己的理智，我将忽略你可以做的所有改进代码的事情，并以类似的方式回答问题：

你应该能够用这个

替换你的部分

<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(&#39;row" + i + "&#39;)'>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中删除动态创建的行

3 个答案: