JQuery的 - 增加細胞對動態樹表

類似下面的表格是由一些XML渲染吐了出來。它來自的XML具有可變的深度。（請指出我是否也以可怕的方式使用了rowspans，我只是帶着一些實驗來到這張桌子上）。

<table border="1"> 
    <tr> 
     <td rowspan="12">> 1</td> 
    </tr> 
    <tr> 
     <td rowspan="3">1 > 2</td> 
    </tr> 
    <tr> 
     <td>1 > 2 > 5</td> 
    </tr> 
    <tr> 
     <td>1 > 2 > 6</td> 
    </tr> 
    <tr> 
     <td rowspan="3">1 > 3</td> 
    </tr> 
    <tr> 
     <td>1 > 3 > 7</td> 
    </tr> 
    <tr> 
     <td>1 > 3 > 8</td> 
    </tr> 
    <tr> 
     <td rowspan="3">1 > 4</td> 
    </tr> 
    <tr> 
     <td>1 > 4 > 9</td> 
    </tr> 
    <tr> 
     <td>1 > 4 > 10</td> 
    </tr> 
</table>

！[替代文本] [1]

我試圖在jQuery來完成是這樣的......

用戶點擊單元格「1> 2」（這將有一個ID）。
一個項目動態添加到第三級，但UNDER「1> 2> 6」。

我可以做的僅僅是添加其他行下面「1> 2」，並增加「1> 2」的行跨度，但隨後新的細胞會出現無序之中「1> 2> 5「和」1> 2> 6「。

我真的不需要確切的代碼來做到這一點，只是爲了阻止我的頭轉過來......謝謝！

來源

2010-04-08 Ocelot20

我真的努力理解這個問題，你有照片嗎？ – 2010-04-08 20:39:24

我添加了一個截圖。 – 2010-04-08 20:56:12

看起來你的rowspans有點奇怪，表的第一行有意義，有3個單元格，第一個是6，第二個是2，最後是「單元格」。 ..

不幸的是，當處理跨瀏覽器的colspan/rowspan問題時，<tr>和<td>是不可靠的。 SO1303106顯示了一個解決方案，該解決方案構建每行/列的矩陣並創建一些幫助您查詢它的函數。 This article啓發瞭解決方案，並顯示了問題。

使用該另一篇文章中的getTableState()函數。你可以做這樣的事情：

$("table").click(function(e) { 
    var targ = $(e.target); 
    var c = targ.closest('td').get(0); 
    if (!c) return; 
    var state = getTableState($(this).closest('table')[0]); 
    var rowSpan = c.rowSpan || 1; 
    // get the "bottom row" number from our clicked cell: 
    var rowNum = $(c).closest('tr').get(0).rowIndex + (rowSpan - 1); 
    var column = state.getRealColFromElement(c); 
    // push all rowspans on the clicked td and anything to the left 
    for (;column>=0; column--) { 
    var cell = state.cellMatrix[rowNum][column].cell; 
    cell.rowSpan = (cell.rowSpan||1)+1; 
    } 
    // insert a new row after the "bottom row" 
    $(this).closest('table').find('tr').eq(rowNum).after(
    '<tr><td>'+$(c).text() + ' > new</td></tr>' 
); 
});

而只是把它放在一起成品a jsbin preview ...

來源

2010-04-08 22:06:26 gnarf

謝謝！有點複雜，但完成我正在尋找的東西。 – Ocelot20 2010-04-09 13:20:08

如果我是你，我會使用嵌套列表並使用CSS來處理縮進。表格不是答案。

<ul><li>1 
    <ul><li> > 2 </li></ul> 
</li></ul>

來源

2010-04-08 20:28:41

我肯定會更喜歡UL的，但不幸的是一些合規性問題排除了這個解決方案。 – Ocelot20 2010-04-08 20:40:20

我不是很確定你正在尋找，但我相信你需要像這樣

$('#myRow').click(function() { 
    $(this).parent.next().next().find('td').html('ADD ITEM HERE'); 
}

這將基本上得到了兄弟是2行過去被點擊當前行。我希望這是你的意思是「第三級」。

希望這有助於都市報

編輯

好吧，我想我明白你正在嘗試盡現。「第三級」基本上是不包含特定rowspans/class/id的單擊行之後的所有行。

繼承人我認爲你應該做的。給你的根元素一個onclick事件，id爲「root1，root2，root3 ......等等」。然後，給出所有行之後但在下一個「根級行」之前的一類「siblingroot1，siblingroot2 ，siblingroot3 ....等等......「，一旦被建立，那麼你可以創建一個像這樣一個點擊事件，

$('#rootEle').click(function() { 
    $('.sibling' + $(this).attr('id')).find('td').html('ADD ITEM'); 
}

來源

2010-04-08 20:38:24 Metropolis

有不同數量的元素和級別（我相信節點/樹中的「深度」），所以不幸的是，我不能硬編碼要傳遞多少行。 – Ocelot20 2010-04-08 20:46:10

好吧，我現在困惑。是否每行都被視爲「根」級別的行？ 1> 4 ？之後你想再去3個關卡？如果所有的標記行都是兄弟行，你怎麼知道「第三」級是什麼？ – Metropolis 2010-04-08 20:52:14

讓我看看，如果我能在僞解決這個問題我的頭。看來你需要做兩件截然不同的東西：

this.parent.rowspan +1

和

this.parent.find.nextsibling.notWithRowSpan。addnewRowAndCell

來源

2010-04-08 21:31:11 graphicdivine

JQuery的 - 增加細胞對動態樹表

回答

相關問題