Изменение структуры таблицы HTML с помощью jQuery

У меня есть список элементов (X в следующих примерах), отображаемых либо в строке, либо в столбце таблицы HTML.Изменение структуры таблицы HTML с помощью jQuery

В 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: Если вам нужно знать, Х, на самом деле вход и метки, то есть:

<td><input .../><label .../></td>

источник

2008-11-04 romaintaz

Учитывая дополнительную информацию, которую вы предоставили, я думаю, что это то, что вы хотите. Она пересекает таблицу двигающейся клетки из каждой второй строки в предыдущую строку ...

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(); 
    } 
}

источник

2008-11-04 17:34:40 Prestaul

Предполагая, что вы начинаете с одной ячейки в каждой строке, и каждая клетка имеет одну метку и один вход, то я думаю, что вы хотите что-то вроде этого:

$('#myTable tr').each(function() { 
    $('<td/>').append( 
     $(this).find('td input') 
    ).appendTo(this); 
    });

источник

2008-11-04 14:37:19 Prestaul

Я сделал некоторые разъяснения по поводу того, что я точно хочу ... Вашего примера отделить входной сигнал от метки. На самом деле я не хочу делить элементы ячейки, но группирует 2 ячейки в одной строке ... – romaintaz 2008-11-04 16:05:03

Интересные упражнения. Это делает то, что вы просите, однако это может быть не совсем то, что вы хотите. Но он говорит вам, как это можно сделать. Вы можете

настроить его, где он работает так, как вы ожидаете.

<!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, чтобы его больше по этой линии

источник

2008-11-04 15:11:53 Will

Ваш код действительно изменяет таблицу и разделяет все элементы на две строки ... Не совсем то, что я хотел сделать , но этот код можно изменить, чтобы иметь два столбца вместо двух строк ... – romaintaz 2008-11-04 16:11:51

Спасибо! Возможно, это был не приемлемый ответ, но наверняка мне было полезно. – Tim 2009-03-06 10:44:06

Изменение структуры таблицы HTML с помощью jQuery

ответ

Смежные вопросы