Jquery将thead tr td的属性复制到tbody tr td

Question

我们可以将数据从ad复制到tbody吗？我只想得到的数据日期

<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

我可以复制thead tr td的属性吗？到tbody tr td？因此它也将成为

<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</tbody>

注意，我不能手动放置属性，因为这是来自一个插件

Answer 1

您可以在数组中设置头td值，然后使用jQueryeach()函数使用该数组进行设置。检查下面更新的代码段。。

var xyz = [];
$('table thead td').each(function(){
xyz.push($(this).data('date'));
})
$('table tbody td').each(function(i,el){
$(this).data('date', xyz[i]).html(xyz[i]);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' celpadding="2">
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Answer 2

试试这个解决方案。获取两个tds并迭代一个，使用该索引并将data-date复制到tbodytds中。

const theadTds = $('thead tr td');
const tbodyTds = $('tbody tr td');
theadTds.each((index, td) => { 
const tbodyTd = tbodyTds.eq(index); // Get current tbody td
tbodyTd.data('date', $(td).data('date')); // Set the `data-date` to the `thead td` `data-date`
console.log(tbodyTd.data('date'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

Answer 3

不需要任何临时变量等。只需对列进行迭代，即可完成正文中的所有行，如果您只想要第一行，也可以这样做。

$('thead').find('tr').find('td').each(function(index){ 
$('tbody').find('tr').find('td').eq(index).data('date',$(this).data('date')):
});

仅正文中的第一行

$('thead').find('tr').find('td').each(function(index){ 
$('tbody').find('tr').eq(0).find('td').eq(index).data('date',$(this).data('date')):
});

如果更清楚的话，可替换语法

$('thead').find('tr').find('td').each(function(index,element){ 
$('tbody').find('tr').eq(0).find('td').eq(index).data('date',$(element).data('date')):
});