[英]Jquery function will only work once, but I need to use it multiple times
[英]Jquery clone only repeating once. Need to repeat multiple times
我正在處理 html 表中的一些現有代碼。 我需要從第 header 行復制文本,並將它們復制到每個后續行的相應 td 單元格中。 我設法復制了 header 行,但它只會在第一行重復。 我怎樣才能讓它在接下來的每一行上重復? 謝謝!
$(document).ready(function() { $('.head').each(function(i) { var $content = $('.new').eq(i); $(this).clone().prependTo($content); }); });
table, tbody, tr, th, td { border: 1px solid #000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table id="table-container"> <tbody> <tr class="header"> <th class="head">Header 1</th> <th class="head">Header 2</th> <th class="head">Header 3</th> <th class="head">Header 4</th> </tr> <tr class="row>"> <td class="new">Row 1</td> <td class="new">Row 2</td> <td class="new">Row 3</td> <td class="new">Row 4</td> </tr > <tr class="alt>"> <td class="new">Row 1</td> <td class="new">Row 2</td> <td class="new">Row 3</td> <td class="new">Row 4</td> </tr> </tbody> </table> </div>
遍歷除.header
之外的表格行,然后在當前行的單元格中循環,並在前面加上相應的.head
單元格的克隆。
$(document).ready(function() { $('tr:not(.header)').each(function() { $(this).find('.new').each(function(i) { $(this).prepend($('.head').eq(i).clone()); }); }); });
table, tbody, tr, th, td { border: 1px solid #000; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <table id="table-container"> <tbody> <tr class="header"> <th class="head">Header 1</th> <th class="head">Header 2</th> <th class="head">Header 3</th> <th class="head">Header 4</th> </tr> <tr class="row>"> <td class="new">Row 1</td> <td class="new">Row 2</td> <td class="new">Row 3</td> <td class="new">Row 4</td> </tr > <tr class="alt>"> <td class="new">Row 1</td> <td class="new">Row 2</td> <td class="new">Row 3</td> <td class="new">Row 4</td> </tr> </tbody> </table> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.