Question

我有一个表，可以选择添加一个新行，其中包含来自用户的数据并单击删除按钮（当然，它会删除特定行）。看来有点工作，但是我有一个问题，就是第二次单击后按钮可以工作。

我的函数i中有一个计数器Add()，该计数器对+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>

Answer 1

问题是因为您的第一次单击将添加事件处理程序，然后单击第二次将执行事件处理程序。在随后的点击中添加越来越多的事件处理程序也会带来不良后果。

要解决此问题并改善逻辑，请使用委托的事件处理程序。这样，您可以遍历DOM以使用var b = "44" //this is a string if ( isNaN(b) ) { alert("b is not a number"); // does not give me the alert } //But if you put an else statement to this else { alert("b is a number"); //alerts as b is a number when it's a string }找到相关的tr。这又意味着您可以删除所有递增的closest()属性的丑陋。

这里还有两点需要注意。首先，当您使用模板文字时，您在连接值时会漏掉它们的要点。请使用id语法来注入值。您还两次声明了${}变量；删除一个。

话虽如此，请尝试以下操作：

$("#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%;
}

具有删除行选项的动态表

1 个答案: