Изменение структуры таблицы HTML с помощью jQuery - PullRequest
Новая
       22

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

3 голосов
/ 04 ноября 2008

У меня есть список элементов ( 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>

Ответы [ 3 ]

2 голосов
/ 04 ноября 2008

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

настроить его так, как он работает. 

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

2 голосов
/ 04 ноября 2008

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

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();
    }
}
1 голос
/ 04 ноября 2008

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

$('#myTable tr').each(function() {
    $('<td/>').append( 
      $(this).find('td input') 
    ).appendTo(this);
  });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...