3

HTML テーブルの行または列に表示される要素 (次の例ではX ) のリストがあります。

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>
4

3 に答える 3

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>

ほら、どうやってすべてを2行にまとめたいのかという例ですが、質問には「2列」と書かれています。簡単だったからといって2列にしました。forループを変更して、この線に沿ったものにする必要があります

于 2008-11-04T15:11:53.220 に答える
2

あなたが提供した追加情報を考えると、これがあなたの望むものだと思います。テーブルをトラバースして、セルを 2 行おきに前の行に移動します...

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-04T17:34:40.187 に答える
1

各行の1つのセルから開始し、各セルに1つのラベルと1つの入力があるとすると、次のようなものが必要だと思います。

$('#myTable tr').each(function() {
    $('<td/>').append( 
      $(this).find('td input') 
    ).appendTo(this);
  });
于 2008-11-04T14:37:19.453 に答える