使用 jQuery 修改 HTML 表格的结构
Posted
技术标签:
【中文标题】使用 jQuery 修改 HTML 表格的结构【英文标题】：Modifying the structure of a HTML table with jQuery 【发布时间】：2010-09-20 16:36:38 【问题描述】：我有一个元素列表（以下示例中的 X）显示在 html 表格的一行或一列中。
从 HTML 代码的角度来看，我有（水平显示）：
<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
...
</tr>
</table>
或（垂直显示）：
<table id="myTable">
<tr>
<td>A</td>
</tr>
<tr>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
...
</table>
此 HTML 代码由 JSF 组件（称为 <h:selectManyCheckboxes/>）生成，因此，我无法控制此 HTML 代码。
但是，我想在 2 列中显示我的元素列表。 换句话说，我的表格的 HTML 代码将是这样的：
<table id="myTable">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
...
</table>
如何使用 jQuery 做到这一点？
提前感谢您的帮助。
ps：如果你需要知道，X实际上是一个输入和一个标签，即：
<td><input .../><label .../></td>
【问题讨论】：
【参考方案1】：鉴于您提供的其他信息，我认为这就是您想要的。它遍历表格，将单元格从每隔一行移动到前一行...
var idx = 1;
var row, next;
while((row = $('#myTable tr:nth-child(' + idx++ + ')')).length)
if((next = $('#myTable tr:nth-child(' + idx + ')')).length)
row.append(next.find('td'));
next.remove();
【讨论】：
我们也可以用 ':eq' 代替 ':nth-child' 。对于 ':eq' ，参数是从零开始的索引。对于 ':nth-child' ，参数是从一开始的索引。作为一名程序员，我喜欢 ':eq'，因为它像大多数编程语言一样基于零并且干净。 @Prestaul 如何使用它来创建 3 列而不是 2 列？ tnx @romaintaz 如何使用此代码创建 3 列而不是 2 列？谢谢！【参考方案2】：有趣的练习。这可以满足您的要求，但它可能不是您想要的。但它会告诉你如何做到这一点。你可以
将其调整到您期望的工作方式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Example of restructuring tables</title>
<script src="Scripts/jquery-1.2.6.commented.js"></script>
</head>
<!--<body><table id="Table1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>-->
<table id="myTable">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function()
debugger;
var tds = $("#myTable tr td"); // gets all td elements in the table with id myTable
var col1 = $("<tr></tr>"); // holds our first row's columns
var col2 = $("<tr></tr>"); // holds our second row's columns
var halfway = Math.ceil(tds.length / 2);
// add the first half of our td's to the first row, the second half to the second
for (var i = 0; i < tds.length; i++)
if (i < halfway)
col1.append(tds[i]);
else
col2.append(tds[i]);
// clear out the clutter from the table
$("#myTable").children().remove();
// add our two rows
$("#myTable").append(col1);
$("#myTable").append(col2);
);
</script>
</body>
</html>
看，您希望它如何最终将所有内容放在两行中的示例，但您的问题是“两列”。我做了两行只是因为它更容易。您只需要修改 for 循环，使其更符合这条线
【讨论】：
您的代码确实修改了表格并将所有元素分成两行...不完全是我想要做的，但此代码可以修改为具有两列而不是两行... 谢谢！可能不是这里公认的答案，但肯定对我有用..【参考方案3】：假设您从每一行中的一个单元格开始，并且每个单元格都有一个标签和一个输入，那么我认为您想要这样的东西：
$('#myTable tr').each(function()
$('<td/>').append(
$(this).find('td input')
).appendTo(this);
);
【讨论】：
我已经对我到底想要什么做了一些澄清......您的示例将输入与标签分开。实际上我不想分割一个单元格的元素，而是将同一行中的 2 个单元格重新组合...以上是关于使用 jQuery 修改 HTML 表格的结构的主要内容，如果未能解决你的问题，请参考以下文章