javascript - jquery将thead tr td的属性复制到tbody tr td

Question

我们可以将数据从 thead 复制到 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

您可以在数组中设置 header td 值，然后使用该数组和 jQuery each() 函数设置它。检查下面更新的代码段..

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>