如何使用jQuery拆分表行(在TD之间插入TR) [英] How to split a table row with jQuery (insert TR between TD's)
本文介绍了如何使用jQuery拆分表行(在TD之间插入TR)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在用jQuery拆分表时遇到一些问题.
I have some problem splitting a table with jQuery.
这是表格:
<table width="100%" id="submenu">
<tr>
<td class="submenu">A</td>
<td class="submenu">B</td>
<td class="submenu">C</td>
<td class="submenu">D</td>
<td class="submenu">E</td>
<td class="submenu">F</td>
<td class="submenu">G</td>
<td class="submenu">H</td>
</tr>
</table>
我想在调用函数后使它看起来像这样:
I want to make it look like this after I call a function:
<table width="100%" id="submenu">
<tr>
<td class="submenu">A</td>
<td class="submenu">B</td>
<td class="submenu">C</td>
<td class="submenu">D</td>
</tr>
<tr>
<td class="submenu">E</td>
<td class="submenu">F</td>
<td class="submenu">G</td>
<td class="submenu">H</td>
</tr>
</table>
我尝试过:
$(function(){
$('.submenu td:eq(3)').after('</tr><tr>');
});
推荐答案
请尝试以下代码段:
$(function(){
// # Add a new row after the first one in the table
$('table#submenu tr:first').after('<tr></tr>');
// # Move the four last TDs to this new row
$('table#submenu tr:first td.submenu:gt(3)') // Select the four last TDs
.detach() // Detach them from their current row
.appendTo('table#submenu tr:nth-child(2)'); // Add them at the end of the new row
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="100%" id="submenu" border="1">
<tr>
<td class="submenu">A</td>
<td class="submenu">B</td>
<td class="submenu">C</td>
<td class="submenu">D</td>
<td class="submenu">E</td>
<td class="submenu">F</td>
<td class="submenu">G</td>
<td class="submenu">H</td>
</tr>
</table>
这篇关于如何使用jQuery拆分表行(在TD之间插入TR)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文