使用jquery向表中添加新行无效

我正在尝试使用jquery添加/删除包含一些表单元素的新表行。我曾尝试使用一些教程开发jquery代码，但我的代码不起作用。我无法添加或删除任何行

虽然我已经提供了下面的代码，但如果您仍然想在JSFIDLE上看到代码，请检查此链接：

你能告诉我哪里做错了吗？ 谢谢:

HTML

Jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js">
</script>
<script>
  $(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents tr').size() + 1;

    $('#addScnt').live('click', function() {
        ('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>').appendTo(scntDiv);

            i++;
            return false;
     });

      //Remove button
         $('#remScnt').live('click', function() { 
            if( i > 2 ) {
                    $(this).parents('<tr>').remove();
                    i--;
            }
            return false;
          });
       });
   </script>​​

Hiya工作演示：完整工作版本

有很多事情需要注意：也请使用.on事件，因为最新版本的Jquery不推荐使用.live

请参阅下面的其余代码

希望这对事业有所帮助

代码

该函数应按如下方式使用：

$('#addScnt').live('click', function() {
scntDiv.append('<tr>
           <td> <select name="type" id="type">
               <option value="Debit">Debit</option>
              <option value="Credit">Credit</option>
             </select> </td>

         <td> <select name="accounts" id="accounts">
              <option value="">SELECT</option>
              <option value="One">One</option>
              <option value="Two">Two</option>
             </select>  </td>

        <td><input type="text" name="debit_amount" id="debit_amount"/></td>
        <td><input type="text" name="credit_amount" id="credit_amount"/></td>
   <td><a href="#" id="remScnt">Remove</a></td></tr>');

            i++;
            return false;
     });

---

删除行的函数中存在另一个错误。一定是

$(this).parents(' tr ').remove();

没有

---

提示：浏览器Firefox、Chrom和Safari为Javascript提供了一个错误控制台。因此，您可以看到错误消息。

下面是一个工作示例，包括删除行功能：

这就是结果JS：

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});​

首先，您的HTML在小提琴中解决了几个语法问题。您在上一个函数“$this.parents.remove；”中使用了、函数错误和选择器需要的只是“tr”

---

没什么：顺便说一下，我发现了你的另一个错误。您添加了具有相同名称和id的表单字段。一般规则是id必须为！在页面中保持唯一性。如果你只在该属性上添加了一个计数器，你就可以避免它。不确定你为什么会被标记下来，也许标记这个问题的人可以解释为什么或者删除标记。-1：删除功能不起作用+1以反映您的更新。@black\u belt确定您在这里完成了完整的工作版本：很高兴我可以help@Monkieboy请看这里：lol告诉我man-1不是建设性的：我应该使用.live event还是.on？据Tats_innit所说，最新版本的Jquery@black_belt哎呀，是我的错，你肯定应该用。我更新了答案：D@black_belt，我很抱歉，但我不明白您所说的“for add but”。：/you想要我添加什么？对不起，输入错误。。我想说的是，请在$'addScnt'.live'click'，函数{中将.live event替换为上面代码中的.on。谢谢，我刚刚在上次调用xD中替换了它。谢谢你指出这一点，很抱歉我没有意识到：P

$(this).parents(' tr ').remove();

var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click', '#remScnt', function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});​