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