我需要对表进行移动查看和操作。我的桌面表格如下:
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<td><strong>Third</strong></td>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
对于移动设备,我需要将第一个列复制到所有其他列。表格应如下所示:
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="row"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="row"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<th scope="row"><strong>First</strong></th>
<td><strong>Third</strong></td>
<th scope="row"><strong>First</strong></th>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
</tr>
</tbody>
</table>
我找到了一些 Jquery,但是这段代码只在末尾附加了第一列:
$('#addcolumn').click(function() {
$('table tr').each(function() {
$(this).append($(this).find('th:first').clone());
});
});
能否请您帮助使 Jquery 代码能够解决我的问题,谢谢! 马丁
最佳答案
您可以使用 insertAfter
这将在目标后的匹配元素集中插入元素。因此,对于 tbody > td
你可以遍历 tr 并得到 first
克隆它然后你可以检查是否td
不是 last-child
of tr 如果是,则在之后添加克隆元素 td
.现在,对于thead
你可以简单地使用 eq(0)
获得第一个th
然后使用 insertAfter
在每个 scope="col"
之后添加克隆.
演示代码:
$('#addcolumn').click(function() {
///loop through tds
$('tbody td').each(function() {
//get th
var clone = $(this).closest("tr").find('th:first').clone()
//if td is not last
if (!$(this).is(':last-child')) {
$(clone).insertAfter(this); //insert the cloned th
}
});
//get the header first th
var headers = $("table").find("thead th:eq(0)").clone();
//insert cloned to th where scope=col and not last child
$(headers).insertAfter("thead th[scope=col]:not(:last-child)");
});
$('#normal').click(function() {
//remove th not first child from thead and tbody
$("thead th[scope=row]:not(:first-child)").remove();
$("tbody th[scope=row]:not(:first-child)").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th scope="row"> </th>
<th scope="col"> </th>
<th scope="col"><strong>Special Header</strong></th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><strong>First</strong></th>
<td><strong>Second</strong></td>
<td><strong>Third</strong></td>
<td><strong>fourth</strong></td>
</tr>
<tr>
<th scope="row"><strong>Text</strong></th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
<button id="addcolumn">Add</button>
<button id="normal">Reset</button>
关于html - Jquery 将表的第一列复制到下一列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64843249/