在javascript中動態分解HTML表格到兩個表格

我正在使用asp.net中的用戶控件，其中我從後面的代碼創建了一個html表格。初始結構如下。在javascript中動態分解HTML表格到兩個表格

<table> 
    <tr> 
     <td>Property1</td> 
     <td>Property2</td> 
     <td>Property3</td> 
     <td>Property4</td> 
    </tr> 
    <tr> 
     <td>Value1</td> 
     <td>Value2</td> 
     <td>Value3</td> 
     <td>Value4</td> 
    </tr> 
</table>

我的問題是我想根據容器的它要被放置[因爲它是一個用戶控制]的大小重組它。對於Ex如果每個單元格的寬度是20px，容器寬度是40px，那麼結構將如下所示;

<table> 
    <tr> 
     <td>Property1</td> 
     <td>Property2</td> 
    </tr> 
    <tr> 
     <td>Value1</td> 
     <td>Value2</td> 
    </tr> 
    </table> 



<table> 
    <tr> 
     <td>Property3</td> 
     <td>Property4</td> 
    </tr> 

    <tr> 
     <td>Value3</td> 
     <td>Value4</td> 
    </tr> 
</table>

來源

2014-04-01 Abhijit_Srikumar

這兩個表格在標題中提到了哪裏？ – adripanico

看看這裏http://stackoverflow.com/questions/6259675/split-a-table-in-half還有類似的問題 – user2167382

我必須在IE中實現。並且上述帖子中給出的解決方案在ie中不起作用。 –

感謝您的建議@ user2167382。最後，我已經解決了，但我不得不使用jQuery。以下是我的html。

<table id="sourceT"> 
<tr> 
    <td>Col 1</td> 
    <td>Col 2</td> 
    <td>Col 3</td> 
</tr> 
<tr> 
    <td>Col 1 - value</td> 
    <td>Col 2 - value</td> 
    <td>Col 3 - value</td> 
</tr> 
</table> 



<table id="targetT"> 
</table>

這裏是jQuery的邏輯。

var $target = $("#targetT"); 

$("#sourceT tr").each(function() { 
var $tds = $(this).children(), 
    $row = $("<tr></tr>"); 
    var i=1; 
while(i<3) 
{ 
    alert(i) ; $row.append($tds.eq(i).clone()).appendTo($target); 
    i++; 

} 
});

希望它能幫助別人。

來源

2014-04-03 10:14:09

在javascript中動態分解HTML表格到兩個表格

回答

相關問題