Как создать клон tr и вставить данные в новую строку, используя javascript или jquery?

0
<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. Любая помощь будет оценена по достоинству.

Теги:

2 ответа

0
Лучший ответ

Что-то вроде того:

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/ также вы должны удалить идентификаторы, потому что идентификатор должен быть уникальным.

  • 0
    Как я могу вставить данные вместо Test1 и $ 10,00, используя ваш код У меня есть эти данные в hiddenfilds
0
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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню