javascript - 如何在使用 javascript/jquery 单击 "delete icon"时删除表中的行？

标签 javascript jquery html 

	$(document).on("click", ".deleteIcon", function () {

		indexDelAgent = parseInt($(this).attr("alt").replace("Delete", ""));
		console.log("after deletion");
		console.log(indexDelAgent);

		document.getElementById("tempTable").deleteRow(indexDelAgent);

	});
<!DOCTYPE html>
<html>
   <head>
      <!-- Latest compiled and minified CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <!-- jQuery library -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Popper JS -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <!-- Latest compiled JavaScript -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      <title></title>
   </head>
   <body>
     <table class="table table-bordered" id="tempTable">
   <thead>
      <tr>
         <th>A</th>
         <th>B</th>
         <th>C</th>
         <th>D</th>
         <th>E</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>
            <select>
               <option value="1">QQ</option>
               <option value="2">Apple</option>
               <option value="3">Orange</option>
               <option value="4">Mango </option>
            </select>
         </td>
         <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
         <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
         <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
         <td><i value="Delete" type="button" alt="Delete4"  class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
         <td>
            <select>
               <option value="1">QQ</option>
               <option value="2">Apple</option>
               <option value="3">Orange</option>
               <option value="4">Mango </option>
            </select>
         </td>
         <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
         <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
         <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
         <td><i value="Delete" type="button" alt="Delete5"  class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
         <td>
            <select>
               <option value="1">QQ</option>
               <option value="2">Apple</option>
               <option value="3">Orange</option>
               <option value="4">Mango </option>
            </select>
         </td>
         <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
         <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
         <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
         <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
   </tbody>
</table>
   </body>
   
</html>

我的表是动态的，因为它有添加新行的按钮，点击“添加新”按钮后索引增加了 0、1、2、3、4。(我没有在这里显示那个按钮，我在这里只显示了 3 行，表的索引从 4 开始。当我单击该行的删除图标时，我需要删除整行。我尝试通过 document.getElementById("tempTable").deleteRow(indexDelAgent); ，但它不起作用。我不希望我的表数据被推送到任何数组中。我只需要在单击删除图标时删除整行。

最佳答案

在您当前的代码中，alt 值以 Delete4 开头，但在索引 4 处没有行，因此它不会像您预期的那样工作.

要在您当前的场景中工作，您需要在剩余的行中获取一个索引。您可以简单地使用 index() 获取删除按钮中的索引。方法，但您必须添加 1(以跳过标题)，因为标题内没有删除按钮。

$(document).on("click", ".deleteIcon", function() {

  var indexDelAgent = $(this).index('.deleteIcon') + 1;
  console.log("after deletion");
  console.log(indexDelAgent);

  document.getElementById("tempTable").deleteRow(indexDelAgent);

});
<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
        <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
        <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
        <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

更新: 或者更好的方法是在所有 tr 中获取父级 tr 的索引。

$(document).on("click", ".deleteIcon", function() {

  var indexDelAgent = $(this).closest('tr').index('#tempTable tr');
  console.log("after deletion");
  console.log(indexDelAgent);

  document.getElementById("tempTable").deleteRow(indexDelAgent);

});
<!DOCTYPE html>
<html>

<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- Popper JS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <title></title>
</head>

<body>
  <table class="table table-bordered" id="tempTable">
    <thead>
      <tr>
        <th>A</th>
        <th>B</th>
        <th>C</th>
        <th>D</th>
        <th>E</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason4" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount4" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty4" required=""></td>
        <td><i value="Delete" type="button" alt="Delete4" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason5" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount5" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty5" required=""></td>
        <td><i value="Delete" type="button" alt="Delete5" class="deleteIcon fa fa-trash"></i></td>
      </tr>
      <tr>
        <td>
          <select>
            <option value="1">QQ</option>
            <option value="2">Apple</option>
            <option value="3">Orange</option>
            <option value="4">Mango </option>
          </select>
        </td>
        <td><input style="width:130px;" type="text" name="assessReason" autocomplete="off" id="assessReason6" required=""></td>
        <td><input type="number" name="assessAmount" autocomplete="off" class="amount" id="assessAmount6" required=""></td>
        <td><input type="number" name="assessPenalty" autocomplete="off" class="penalty" id="assessPenalty6" required=""></td>
        <td><i value="Delete" type="button" alt="Delete6" class="deleteIcon fa fa-trash"></i></td>
      </tr>
    </tbody>
  </table>
</body>

</html>

关于javascript - 如何在使用 javascript/jquery 单击 "delete icon"时删除表中的行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55135190/

上一篇：javascript - 选择某个单选按钮时需要在表单上进行某些输入

下一篇：javascript - 如何使用 JavaScript 存储网页/网页数据？

相关文章：

javascript - 如何使用查询在单击时替换 div 中的元素？

html - 修改后的输入元素不会居中

javascript - 显示和隐藏 div : SVG Into a html with several layers

javascript - 使用 jQuery 将无序列表所选项目传递到 ASP.NET Web 窗体

javascript - 如何使用 html css 和 javascript 在图标和文本的两侧添加线条？

javascript - jQuery 倒数计时器未显示在浏览器中

javascript - 为 3 <img> 的水平行创建透明覆盖

javascript - PHP-jQuery - 如何使用月份名称填充下拉列表并将值设置为月份编号

javascript - jquery 阻止重定向直到动画之后

javascript - 在js中捕获自定义异常

©2024 IT工具网  联系我们