javascript - 带有删除行选项的动态表

我有一个表，其中有一个选项可以添加一个包含来自用户的数据的新行和删除按钮(当然，它会删除特定的行)。这似乎有点工作，但我有一个问题，即第二次单击后按钮可以工作。

我的函数 Add() 中有一个计数器 i，它计算行数 +1(这是将第一列中的 ID 添加到下一个添加的行) .删除一行时，我需要在每个更高的行中更改 i (i--)。在那之后，当我添加一个新行时，它的 ID 是错误的(它应该是前一个的 +1，但它是相同的)。

另请注意，当我从控制台调用我的 Delete() 函数时，它工作正常。

$("#add_btn").click(function(){Add();});
var D;
var A;
var B;
var B;
var i=1;
function Add()
{
    D=$("#dropdown").val();
    A=$("#A").val();
    B=$("#B").val();
    C=$("#C").val();
      $("#myTable2").append(`
                    <tr id="row`+i+`">
                      <td class="clm1" id="id`+i+`">`+i+`.</td>
                      <td class="clm2">`+D+`</td>
                      <td class="clm3">`+A+`</td>
                      <td class="clm4">`+B+`</td>
                      <td class="clm5">`+B+`</td>
                      <td class="clm6" id="btn`+i+`"><input type="button" class="delete" id='delete`+i+`' value="x"></td>
                    </tr>`);  
        $("#delete"+i).click(function() {Delete(i);});
        n=i;
        i++;    

  }
function Delete(id)
{
    var j;
    i--;
    $("#row"+id+"").remove();
    for(j=id; j<n; j++)
   {
       a=Number(j)+1;
       $("#id"+a).html(j+".");
       $("#id"+a).prop("id", "id"+j);
       $("#btn"+a).html(`<input type="button" class="delete" id='delete`+j+`' value="x">`);
       $("#delete"+a).click(function(){Delete(j);});
       $("#btn"+a).prop("id", "btn"+j);
       $("#row"+a).prop("id", "row"+j);
   }
   
}

#container
{
    background-color: lightsteelblue;
    height:300px;
    width:600px;
    margin-left: auto;
    margin-right: auto;
    font-size:9px;
}
.tableContainer{
    height:auto;
    width:416px;
    border: solid black 1px;
    
   
}
#myTablecontainer
{
    width:100%;
    background-color: navy;
    border: solid lightgray 1px;
    border-bottom: none;
    border-top: none;
}
#myTable
{
   
    width:400px;
    height:auto;
    max-height: 150px;
    
    border-collapse: collapse;
    
    background-color: navy;
}
#myTable tr
{
   width:100%;
}
.MyTableHeadings
{
    
    font-weight: bold;
    text-align: center;
    background-color: navy;
    color:white;
    
    border-left: solid red 1px;
    padding-left: 5px;
    padding-right: 5px;
    
}
#myTable tr .clm1
{
   border-left: none;
}

.scrollContent
{
    height:auto;
    max-height: 300px;
    width:416px;
    overflow-y:auto;
    background-color: navy;
}
#myTable2
{
   
    width:400px;
    height:auto;
    max-height: 150px;
    border: solid lightgray 1px;
    border-collapse: collapse;
    
    
}
#myTable2 tr{
    width:100%;
}
#myTable2 tr:nth-child(even)
{
    background-color: lightgray;
}
#myTable2 tr:nth-child(odd) 
{
    background-color: lightslategrey;
}

#myTable2 td
{
    text-align: center;
     
     padding-left: 5px;
    padding-right: 5px;
}
.clm1{
    width:10%;
}
.clm2
{
    width: 25%;
}
.clm3
{
    width: 15%;
}
.clm4
{
    width:20%;
}

.clm5
{
    width:20%;
}
#myTable2 tr .clm6
{
    text-align: left;
    width: 10%;
}

<body>
        <div id="container">
            <fieldset>
                <legend>Dane</legend>
                   Dropdown
                    <select 
                    name="drp"
                    id="dropdown"
                    style="width:90px;"
                    >
                        <option value="0"></option>
                        <option value="1">1 </option>
                        <option value="2">2</option>
                     </select>
                    <br>
                A
                <input type="text" id="A">
                <br>
                B
                <input type="text" id="B">
                <br>
                C
                <input type="text" id="C">
                <input type="button" value='Add' id='add_btn'/>
            </fieldset>
            
                
                
                <div id="tableContainer" class="tableContainer">
                    <div id="myTablecontainer">
                        <table id="myTable" >
                                <tr>
                                  <th class='MyTableHeadings clm1'> ID</th>
                                  <th class='MyTableHeadings clm2'>H1</th>
                                  <th class='MyTableHeadings clm3'> H2</th>
                                  <th class='MyTableHeadings clm4'>H3</th>
                                  <th class='MyTableHeadings clm5'>H4</th>
                                  <th class='MyTableHeadings clm6'>Delete</th>
                                </tr>
                        </table>
                    </div>
                    <div class="scrollContent">
                        <table id="myTable2">
                        </table>
                    </div>
                </div>
        </div>
        
    </body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

最佳答案

问题是因为您的第一次点击添加了事件处理程序，第二次点击事件处理程序执行。这也会产生不必要的副作用，即在后续点击时添加越来越多的事件处理程序。

要解决问题并改进逻辑，请使用委托(delegate)事件处理程序。这样您就可以遍历 DOM 以使用 closest() 找到相关的 tr。这反过来意味着您可以删除所有增量 id 属性的丑陋之处。

这里还有一些其他的事情需要注意。首先，当您使用模板文字时，您在连接值时错过了它们的要点。请改用 ${} 语法来注入(inject)值。您还两次声明了 B 变量；删除一个。

说了这么多，试试这个:

$("#add_btn").click(Add);
$('#myTable2').on('click', '.delete', function() {
  $(this).closest('tr').remove();
});

var D, A, B, i = 1;

function Add() {
  D = $("#dropdown").val();
  A = $("#A").val();
  B = $("#B").val();
  C = $("#C").val();
  $("#myTable2").append(`
    <tr>
      <td class="clm1">${i}.</td>
      <td class="clm2">${D}</td>
      <td class="clm3">${A}</td>
      <td class="clm4">${B}</td>
      <td class="clm5">${B}</td>
      <td class="clm6"><input type="button" class="delete" value="x"></td>
    </tr>`);
  i++;
}

#container {
  background-color: lightsteelblue;
  height: 300px;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 9px;
}

.tableContainer {
  height: auto;
  width: 416px;
  border: solid black 1px;
}

#myTablecontainer {
  width: 100%;
  background-color: navy;
  border: solid lightgray 1px;
  border-bottom: none;
  border-top: none;
}

#myTable {
  width: 400px;
  height: auto;
  max-height: 150px;
  border-collapse: collapse;
  background-color: navy;
}

#myTable tr {
  width: 100%;
}

.MyTableHeadings {
  font-weight: bold;
  text-align: center;
  background-color: navy;
  color: white;
  border-left: solid red 1px;
  padding-left: 5px;
  padding-right: 5px;
}

#myTable tr .clm1 {
  border-left: none;
}

.scrollContent {
  height: auto;
  max-height: 300px;
  width: 416px;
  overflow-y: auto;
  background-color: navy;
}

#myTable2 {
  width: 400px;
  height: auto;
  max-height: 150px;
  border: solid lightgray 1px;
  border-collapse: collapse;
}

#myTable2 tr {
  width: 100%;
}

#myTable2 tr:nth-child(even) {
  background-color: lightgray;
}

#myTable2 tr:nth-child(odd) {
  background-color: lightslategrey;
}

#myTable2 td {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.clm1 {
  width: 10%;
}

.clm2 {
  width: 25%;
}

.clm3 {
  width: 15%;
}

.clm4 {
  width: 20%;
}

.clm5 {
  width: 20%;
}

#myTable2 tr .clm6 {
  text-align: left;
  width: 10%;
}

<div id="container">
  <fieldset>
    <legend>Dane</legend>
    Dropdown
    <select name="drp" id="dropdown" style="width:90px;">
      <option value="0"></option>
      <option value="1">1 </option>
      <option value="2">2</option>
    </select><br> 
    A <input type="text" id="A"><br> 
    B <input type="text" id="B"><br> 
    C <input type="text" id="C">
    <input type="button" value='Add' id='add_btn' />
  </fieldset>
  <div id="tableContainer" class="tableContainer">
    <div id="myTablecontainer">
      <table id="myTable">
        <tr>
          <th class="MyTableHeadings clm1">ID</th>
          <th class="MyTableHeadings clm2">H1</th>
          <th class="MyTableHeadings clm3">H2</th>
          <th class="MyTableHeadings clm4">H3</th>
          <th class="MyTableHeadings clm5">H4</th>
          <th class="MyTableHeadings clm6">Delete</th>
        </tr>
      </table>
    </div>
    <div class="scrollContent">
      <table id="myTable2"></table>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

关于javascript - 带有删除行选项的动态表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54325803/

javascript - 带有删除行选项的动态表

上一篇：javascript - 等值线图上的 D3js HTML 工具提示

下一篇：javascript - WPAPI : Parent Page not shown in WP UI for API created pages