Question

我像这样在jQuery中克隆。当我通过克隆添加新行时，我想得到特定的id，我可以通过它获得该行的特定id

$("input.tr_clone_add").live('click', function() {
    var $tr = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $clone.find('input[type=checkbox]').attr('checked', false);
    $tr.after($clone);
});

克隆的HTML

<table id="table-data" width="100%">
    <tr class="tr_clone">
        <td>
            <select name="group_id[][]" multiple>
                <!--<option>Select User</option>-->
                <?php
                    $selectGroup = "SELECT  group_id, group_name FROM `group`";
                     $res = mysql_query($selectGroup);
                     while($row = mysql_fetch_array($res))
                     {
                         if ($row['group_id']==$fetch['group_id'])
                         {
                             echo '<option value="'.$row['group_id'].'">'.$row['group_name'].'</option>';
                         }
                         else
                         {
                             echo '<option value="'.$row['group_id'].'">'.$row['group_name'].'</option>';
                         }
                     }
                ?>
            </select>
        </td>
        <td>
            <textarea name="address[]" rows="3" cols="35"  placeholder="Enter Address"></textarea>
        </td>
        <td>
            <input type="button" name="add" value="Add" class="tr_clone_add">
        </td>
    </tr>
</table>

Answer 1

我认为这是使用模板的好地方。有许多JavaScript模板引擎，但你可以根据需要做一个更简单的版本。在你的情况下，你可以做这样的事情：

<table id="table-data" width="100%"></table>

<script type="text/x-template" id="foo">
   <tr class="tr_clone">
      <td>
         <select name="group_id[][]" multiple>
            <option>Select User</option>
            <!-- options populated from PHP code -->
            <option value="1">One</option>
            <option value="2">Two</option>
         </select>
      </td>
      <td>
         <textarea name="address[]" rows="3" cols="35"  placeholder="Enter Address"></textarea>
      </td>
      <td>
         <input type="button" name="add" value="Add" class="tr_clone_add">
      </td>
   </tr>
</script>

和JavaScript（假设加载了jQuery）

$(function(){
  var tableData = $('#table-data'),
    templateHTML = $('#foo').html();

  function addNewRow() {
    var id = 'clone_' + tableData.find('tr').length;
    var $clone = $(templateHTML);
    $clone.attr('id', id);
    $clone.find('textarea').val('This is id: ' + id);
    tableData.append($clone);
  }

  // add binding
  $(document).on('click', 'input.tr_clone_add', addNewRow);

  // add 1st row
  addNewRow();
});

以下是https://jsfiddle.net/jc6Lybah/1/

的小提琴

如何在jquery

1 个答案: