Question

我有table。在里面有一个single row for form input elements。我已将button命名为add line below that table。用户clicks on the button add line将add another row in that table。但是在这里我需要当用户点击按钮添加行时它将add another row with increment id。假设我现在有row_1 id is visible。当用户点击add line button时，它会显示另一行，但newly added row's id will be row_2。这是我已经完成的代码

<!DOCTYPE HTML>
<html lang="en-IN">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<script type="text/javascript" src="jquery1.7.2.js"></script>
<body>
  <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery("#add-line").click(function() {
        var row = jQuery('.prototype tr').clone(true);
        row.find("input:text").val("");
        row.appendTo('.form-fields table');
        return false;
    });
});
</script>
  <div id="form">
  <table id="form-headings">
    <tr>
      <td width="15%">Id</td>
      <td width="16%">Name</td>
      <td width="13%">Col3</td>
      <td width="14%">Col4</td>
      <td width="12%">Col5</td>
    </tr>
  </table><!--table#form-headings-->
  <div id="row_1">
  <div class="form-fields">
    <table>
      <tr>
        <td><input type="text" id="form_id" size="5px"/></td>
        <td><input type="text" id="form_name" size="5px"/></td>
        <td><input type="text" id="form_col3" size="5px"/></td>
        <td><input type="text" id="form_col4" size="5px"/></td>
        <td><input type="text" id="form_col5" size="5px"/></td>
      </tr>
    </table>
  </div><!--.form-fields-->
  </div><!--#row_01-->
  <input type="button" id="add-line" value="Add Line" />
  </div><!--#form-->
  <table class="prototype" style="display:none">
    <tr>
      <td><input type="text" id="form_id" size="5px"/></td>
      <td><input type="text" id="form_name" size="5px"/></td>
      <td><input type="text" id="form_col3" size="5px"/></td>
      <td><input type="text" id="form_col4" size="5px"/></td>
      <td><input type="text" id="form_col5" size="5px"/></td>
    </tr>
  </table><!--table.prototype-->
</body>
</html>

Answer 1

如果您想在jsfiddle

中添加行代码示例，可以尝试这样做

  jQuery(document).ready(function() {
        var id = 0;
      jQuery("#add-line").click(function() {
        id++;           
        var row = jQuery('.prototype tr').clone(true);
        row.find("input:text").val("");
        row.attr('id',id); 
        row.appendTo('.form-fields table');        
        return false;
    });

    jQuery('.form-fields .remove').live('click', function() {
         jQuery(this).parents("tr").remove();              
    });    
});

如果你想为表单元素设置不同的id意味着你必须创建一个新的元素不要使用clone

Answer 2

id必须是唯一的，我认为您的示例可能更短，如下所示：http://jsfiddle.net/DKWnE/1/

$(document).ready(function() {
    var template = $('#template'),
        id = 0;

    $("#add-line").click(function() {
        var row = template.clone();
        template.find("input:text").val("");
        row.attr('id', 'row_' + (++id));
        row.find('.remove').show();
        template.before(row);
    });

    $('.form-fields').on('click', '.remove', function(){
        $(this).closest('tr').remove();
    });
});

jQuery在增量顺序的表中添加一行

2 个答案: