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的 - 增加细胞对动态树表

回答

相关问题