表的第一个td的jQuery Clone / Copy Style属性到另一个表的第一个td

Question

我有2张桌子，即 table-1 和 table-2 ......

<td> 的第一个 table-1 具有动态设置的样式属性。

如何克隆/复制 table-1 的第一个td中的所有样式属性并应用于第一个td的 table-2 ？

Online Demo

请参阅以下屏幕截图以获取解释......

HTML

<h2>Table - 1</h2>
<table class="table table-bordered" id="table-1">
  <tr>
    <td style="background:#ccc;font-weight:bold;text-align:center;color:red;">T1 - R1 - Column 01</td>
    <td>T1 - R1 - Column 02</td>
    <td>T1 - R1 - Column 03</td>
    <td>T1 - R1 - Column 04</td>
  </tr>
</table>

<h2>Table - 2</h2>
<table class="table table-bordered" id="table-2">
  <tr>
    <td>T2 - R1 - Column 01</td>
    <td>T2 - R1 - Column 02</td>
    <td>T2 - R1 - Column 03</td>
    <td>T2 - R1 - Column 04</td>
  </tr>
</table>

的jQuery

var x = $('#table-1 tr td:first').clone().attr('style', '');
$('#table-2 tr td:first').attr('style', x)

Answer 1

<强>问题：

您将克隆元素的所有样式设置为''。这意味着删除了所有样式。另外，要使样式成为元素，您必须使用.attr('attributeName')。

var x = $('#table-1 tr td:first').clone().attr('style');
$('#table-2 tr td:first').attr('style', x);

Codepen

Answer 2

就像这个CodePen

一样

<强> JS：

var x = $('#table-1 tr td:first').clone().attr('style');
$('#table-2 tr td:first').attr('style', x)

.attr('foo')将获取 foo属性的值，而.attr('foo', 'bar');将设置值{{1} }到属性bar

Answer 3

$(document).on('change keyup', '.price', function() {

  var total = 0;
  $("#total_a option:selected ,#total_b option:selected , input:checked").each(function() {
    total += parseFloat($(this).attr("data-price"));
  });

  $('.total').html('$ ' + (total).toFixed(2));

});

以上将采用$('#table-2 tr:first td:first').attr('style', $('#table-1 tr:first td:first').attr('style')) 第一行中第一个单元格的style属性，并将其应用于#table-1第一行中的第一个单元格