Question

这是我的第一张表的代码：

<table class="table table-condensed table-striped table-hover" id="schedules">
    <thead>
        <th>Schedule Code</th>
        <th>Subject Description</th>
        <th>Room</th>
        <th>Day</th>
        <th>Time</th>
    </thead>
    <tbody>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
       <tr>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <td>*content here*</td>
          <button> Copy </button>
       </tr>
    </tbody>
</table>

第二张表：

<table class="table table-condensed table-striped table-hover" id="my_schedules">
    <thead>
        <th>Schedule Code</th>
        <th>Subject Description</th>
        <th>Room</th>
        <th>Day</th>
        <th>Time</th>
    </thead>

</table>

我的jQuery代码：

<script type="text/javascript">

$(document).ready(function(){


    var rows = $("#schedules"),
        copyTable = $('#my_schedules');

    rows.click(function(){
            var row = $(this),
                cloneRow = row.clone();
            copyTable.append(cloneRow);
            row.prevAll().hide();
    });
}); 


</script>

它将第一个表的全部内容复制到第二个表。我想要的是，如果我点击了复制按钮，则只将特定行复制到第二个表。

Answer 1

这是你想要的，我为你创建了一个fiddle。

我改变了一些，你的按钮似乎没有浮动，所以我把它添加到td。还在按钮上添加了class以便于选择。

$(document).ready(function() {
  $(".use-button").click(function() {
    var html = $(this).closest("tr")
              .clone().find('td:last')
              .remove().end().prop('outerHTML');

    var $schedules = $("#my_schedules")
    $schedules.append(html);
  });
});

<强> 修改如果主表是动态加载的，并且您需要单击该按钮，则必须使用delegated创建“on()”绑定。

 $('.use-button').on('click', function() {
    var html = $(this).closest("tr")
               .clone().find('td:last')
               .remove().end().prop('outerHTML');
    $("#my_schedules").append(html);
 });

Answer 2

这将解决您的问题。将特定的rowclick行复制到第二个表。

$(document).ready(function () {
        var rows = $("#schedules tr:not(:first)"),
            copyTable = $('#my_schedules');

        rows.click(function () {
            var row = $(this),
            cloneRow = row.clone();
            copyTable.append(cloneRow);
            row.hide();
        });
    });

Answer 3

我已对上述某些结构进行了更改。

$(document).ready(function(){
 var rows = $("#schedules"),
 copyTable = $('#my_schedules');
 /*
    rows.click(function(){
        var row = $(this),
        cloneRow = row.clone();
        copyTable.append(cloneRow);
        row.prevAll().hide();
    });  
 */
 $('button').click(function(){
     var buttonClass = $(this).attr("class");
     var row = $("#"+buttonClass).clone();
     $('#my_schedules').children('tbody').append(row);
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed table-striped table-hover" id="schedules">
  <thead>
    <th>Schedule Code</th>
    <th>Subject Description</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody>
    <tr id="1">
      <td>*1*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="1"> Copy </button>
    </tr>
    <tr id="2">
      <td>*2*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="2"> Copy </button>
    </tr>
    <tr id="3">
      <td>*3*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="3"> Copy </button>
    </tr>
    <tr id="4">
      <td>*4*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <td>*content here*</td>
      <button class="4"> Copy </button>
    </tr>
  </tbody>
</table>

<table class="table table-condensed table-striped table-hover" id="my_schedules">
  <thead>
    <th>Schedule Code</th>
    <th>Subject Description</th>
    <th>Room</th>
    <th>Day</th>
    <th>Time</th>
  </thead>
  <tbody>
  </tbody>
</table>

我希望它能解决你的问题。

Answer 4

试试这个：

    $('#my_schedules').append(cloneRow);

如何使用jquery

4 个答案: