1

我有一个table. 里面有一个single row for form input elements。我已经把一个命名button为. 当一个用户它会。但是在这里我需要当用户单击按钮添加行时它会。假设现在我有. 当用户单击时，它将显示另一行，但. 这是我已经完成的代码add linebelow that tableclicks on the button add lineadd another row in that tableadd another row with increment idrow_1 id is visibleadd line buttonnewly 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>
4

2 回答 2

0

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();
    });
});
于 2012-09-27T08:39:23.470 回答
0

如果您想在jsfiddle中添加行的 id 表示示例，您可以尝试这样

  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，则意味着您必须创建一个新元素，不要使用克隆

于 2012-09-27T08:20:07.597 回答