thead tr tdの属性をtbody trにコピーします。

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

あなたはjQueryのeach()機能arraywithそれを使用して設定し、その後、アレイのヘッダtd値を設定することができます。以下の更新スニペット..

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の両方を取得して1つを繰り返し、そのインデックスを使用してtbodytdsにdata-dateをコピーします。

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