1

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

虽然我已经提供了下面的代码，如果你仍然想在 jsfiddle 上看到代码，请查看这个链接：demo

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

HTML

 <h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
  <table class="dynatable">
        <thead>
            <tr>
                <th>Type</th>
                <th>Account Name</th>
                <th>Debit</th>
                <th>Credit</th>

            </tr>
        </thead>

     <tbody id="p_scents">

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

      </tr>
    </tbody>
  </table>

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

4 回答 4

4

这是一个工作示例，包括删除行功能：DEMO。

这是生成的 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 有几个语法问题（在小提琴中解决了）。你在哪里使用.append()，函数错误，并且你最后一个函数中的选择器 ('$(this).parents('').remove();') 需要只是 'tr'。

没什么：P

于 2012-07-13T08:39:05.533 回答
3

Hiya工作演示 :) http://jsfiddle.net/9S2Sc/ 完整工作版 http://jsfiddle.net/UBxTf/

有很多事情需要注意：也请使用最新版本的 Jquery 已弃用的.on事件，.live

请参阅下面的其余代码。

希望这有助于事业

代码

$(function() {

    var scntDiv = $('#p_scents');

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

    $('#addScnt').on('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 ').on('click ', function() { 
                if( i > 2 ) {
                        $(this).parents(' < tr > ').remove();
                        i--;
                }
                return false;
              });
         ​
于 2012-07-13T08:20:35.983 回答
0

jQuery.append()函数应该像这样使用：

$('#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;
     });
于 2012-07-13T08:22:19.063 回答
0

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

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

没有<和>

提示：浏览器 Firefox、Chrom 和 Safari 为 Javascript 提供了错误控制台。所以你可以看到错误信息。

于 2012-07-13T08:30:34.803 回答