javascript - jquery动态添加/行到表中

Question

我正在使用以下 JSfiddle 来工作，它运行良好。唯一担心的是，我无法使字段名称动态化

有人可以指导我在这里做错了什么

http://jsfiddle.net/k166m6m6/913/

代码:

<div>
      <input type="button" value="Add" class="plusbtn" />
      <input type="button" value="Remove" class="minusbtn" />
</div>

<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test">
  <tr>
    <td>Name</td>
    <td>Emp no.</td>
    <td>Company</td>
    <td>Mobile no.</td>
  </tr>
  <tr>
    <td><input type="text" class="txtbox" value="" /></td>
    <td><input type="text" class="txtbox" value="" /></td>
    <td><input type="text" class="txtbox" value="" /></td>
    <td><input type="text" class="txtbox" value="" /></td>
  </tr>
</table>

jquery代码

$('.plusbtn').click(function() {
        var cnt = 1;
      $(".test").append('<tr><td><input type="text" class="txtbox" name="txtnamed'+cnt+'" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
      cnt++;
    });
    $('.minusbtn').click(function() {
        if($(".test tr").length != 2)
            {
                $(".test tr:last-child").remove();
            }
       else
            {
                alert("You cannot delete first row");
            }
    });

Answer 1

每次单击时都需要重新声明 cnt，因为它位于 click 函数内。这意味着它在函数范围内，并且每次单击时都会重置为 1。将其移到外部，这样它就不会在单击时重置，因为它不会被重新声明:

var cnt = 1;

$('.plusbtn').click(function() {
  $(".test").append('<tr><td><input type="text" class="txtbox" name="txtnamed' + cnt + '" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td><td><input type="text" class="txtbox" value="" /></td></tr>');
  cnt++;
});
$('.minusbtn').click(function() {
  if ($(".test tr").length != 2) {
    $(".test tr:last-child").remove();
  } else {
    alert("You cannot delete first row");
  }
});

.txtbox {
  border: none;
  width: 100%;
}
input {
  font-size: 17px;
  height: 30px;
}
table {
  background: none repeat scroll 0 0 #abcdef;
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="button" value="Add" class="plusbtn" />
  <input type="button" value="Remove" class="minusbtn" />
</div>

<table width="50%" border="1" cellpadding="1" cellspacing="1" class="test">
  <tr>
    <td>Name</td>
    <td>Emp no.</td>
    <td>Company</td>
    <td>Mobile no.</td>
  </tr>
  <tr>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
    <td>
      <input type="text" class="txtbox" value="" />
    </td>
  </tr>
</table>