使用jQuery修改HTML表格的結構

我有一個元素列表（下面例子中的X）顯示在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>

由JSF組件生成此HTML代碼（稱爲<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>

來源

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

我做了什麼，我到底要作一些澄清... 你舉的例子輸入從標籤中分離出來。實際上，我不想劃分單元格的元素，但重新組合了同一行中的兩個單元格... – 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

使用jQuery修改HTML表格的結構

回答

相關問題