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> 

请注意，我不能manully把属性堂妹这是从一个插件来

Answer 1

可以设置标头td值在阵列然后将其设置使用arraywith的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>

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')): 
});