Изменение структуры HTML-таблицы с помощью jQuery
У меня есть список элементов (Икс в следующих примерах), отображаемых либо в строке, либо в столбце таблицы 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>
Ответы 3
Предполагая, что вы начинаете с одной ячейки в каждой строке и что каждая ячейка имеет одну метку и один ввод, я думаю, вам нужно что-то вроде этого:
$('#myTable tr').each(function() {
$('<td/>').append(
$(this).find('td input')
).appendTo(this);
});
Интересное упражнение. Это делает то, о чем вы просите, однако это может быть не совсем то, что вам нужно. Но он говорит вам, как это можно сделать. Ты можешь
настройте его так, как вы ожидаете.
<!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, чтобы он больше в этой строке
Ваш код действительно изменяет таблицу и разделяет все элементы на две строки ... Не совсем то, что я хотел сделать, но этот код можно изменить, чтобы иметь два столбца вместо двух строк ...
Спасибо! Возможно, здесь не был принятый ответ, но он был мне полезен.
Учитывая предоставленную вами дополнительную информацию, я думаю, что это именно то, что вам нужно. Он перемещается по таблице, перемещая ячейки из каждой второй строки в предыдущую ...
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 столбцов вместо двух? tnx
@romaintaz, как я могу использовать этот код для создания 3 столбцов вместо 2? Благодарность!
Я сделал некоторые пояснения по поводу того, что именно я хочу ... Ваш пример отделяет ввод от метки. На самом деле я не хочу разделять элементы ячейки, а перегруппировываю 2 ячейки в одну строку ...