1

私は持ってい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>
4

2 に答える 2

0

行の id を追加したい場合は、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を持たせたい場合は、新しい要素を作成する必要があることを意味しますクローンを使用しないでください

于 2012-09-27T08:20:07.597 に答える