Question

我正在使用以下JSfiddle来处理它并且运行良好。唯一关心的是，我无法使字段名称动态

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

代码：

<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，因为它在点击功能中。这意味着它在函数范围内，并且每次单击都会重置为1。将其移到外面以便在点击时不会重置，因为它不会被重新声明：

＆＃13;

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");
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

因为＆＃39; cnt＆＃39;在您的点击功能var cnt = 1;内声明，每次点击都会重置。只需将其移出您的功能。

以下是一个例子：http://jsfiddle.net/k166m6m6/917/

jquery动态地向表添加/行

2 个答案: