[英]Merge table cells with specific class using jQuery
我正在尝试合并具有相同类的表格单元格。
$(function () { $('table tbody tr').each(function () { var colspan = $(this).find('td.row').length if (colspan > 1) { $(this).find('td.row:first').attr('colspan', colspan) $(this).find('td.row:not(:first)').remove() } }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tbody> <tr> <td>text</td> <td class="row">text</td> <td class="row">text</td> <td>text</td> <td>text</td> <td class="row">text</td> <td class="row">text</td> <td class="row">text</td> </tr> <tr> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td class="row">text</td> <td class="row">text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> </tbody> </table>
上面代码的结果如下。
未合并的结果:
预期结果:
我怎样才能做到这一点?
尝试这个:
$(function () { $('table tr').each(function () { let $firstRow ,colspan = 0 $(this).find('td').each(function() { if ($(this).hasClass('row')) { // Save the first cell with class in $firstRow, remove the rest colspan === 0 ? $firstRow = $(this) : $(this).remove() // Count the number of cells colspan++ } else if (colspan > 0) { // Assign the colspan and reset the counter $firstRow.attr('colspan', colspan) colspan = 0 } }) if (colspan > 0) { $firstRow.attr('colspan', colspan) colspan = 0 } }) })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tbody> <tr> <td>text</td> <td class="row">text</td> <td class="row">text</td> <td>text</td> <td>text</td> <td class="row">text</td> <td class="row">text</td> <td class="row">text</td> </tr> <tr> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> <tr> <td class="row">text</td> <td class="row">text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> <td>text</td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.