javascript - 如何使用 javascript 或 jquery 创建 tr 的克隆并在新行中插入数据？

Question

<tr id="rptShippinRates_ctl01_A" class="row">
  <td>
    <div>
      <input type="hidden" id="hdnSupplierShippingID" value="28">
    </div>
    <div class="gvColSet tLightBlack gvColAlignLeft" style="font-size: 12px;" title="Test1">Test1</div>
  </td>
  <td>
    <div class="gvColSet tLightBlack gvColAlignLeft" style="font-size: 12px;" title="$ 10.00">$ 10.00</div>
  </td>
  <td>
    <span id="SpnDeleteShipping" class="DelRow" title="Delete shipping rate" style="float: Left;margin-left: 8px;"></span>
  </td>
</tr>

我想使用 JavaScript 或 jQuery 克隆它。任何帮助，将不胜感激。

Answer 1

var $tr = $('tr.row'); // fidn the row you want to work with

$tr // grab the row
  .clone() // clone it
  .prop('id','...') // change its id
  .find('td:eq(0)') // find the first <td>
    .find('input') // find hidden input
      .val('...') // change its value
    .end()
    .find('.gvColSet') // find the nested gvColSet
      .text('...') // change its text
      .prop('title','...') // and change its title
    .end()
  .end()
  .find('td:eq(1)') // find second <td>
    .find('.gvColSet') // find the nested gvColSet
      .text('...') // change its text
      .prop('title','...') // and its title
    .end()
  .end()
  .appendTo($tr.closest('table')); // append it to the same table

Answer 2

像这样的东西：

HTML：

<table>
<tr id="rptShippinRates_ctl01_A" class="row">
<td>
       <div>
        <input type="hidden" id="hdnSupplierShippingID" value="28">
       </div>
       <div class="gvColSet tLightBlack gvColAlignLeft" style="font-size: 12px;" title="Test1">Test1</div>
  </td>
<td>
     <div class="gvColSet tLightBlack gvColAlignLeft" style="font-size: 12px;" title="$ 10.00">$ 10.00
     </div>
     </td>
<td>
   <span id="SpnDeleteShipping" class="DelRow" title="Delete shipping rate" style="float: Left;margin-left: 8px;"></span>
   </td>
    </tr>
    </table>

JS：

$('tr').clone().appendTo('table');

JSfiddle： http: //jsfiddle.net/P8Tkf/ 你也必须删除 id，因为 id 必须是唯一的。