Question

我无法完全围绕这一个......

下面的表格是由渲染器从某些XML中吐出的。它来自的XML具有可变深度。（请指出我是否也以可怕的方式使用了行盘，我只是通过一些实验来到这张桌子上。）

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

！[alt text] [1]

我想在JQuery中完成的是......

用户点击单元格“1＆gt; 2”（将有一个ID）。
项目动态添加到第三级，但是“1＆gt; 2＆gt; 6”。

我可以做的只是在“1＆gt; 2”下面添加另一行并从“1＆gt; 2”增加rowspan，但新单元格随后会出现乱序1> 2> 5“和”1＆gt; 2＆gt; 6“。

我真的不需要确切的代码来做到这一点，只是阻止我的头脑旋转...谢谢！

Answer 1

看起来你的rowpans有点奇怪，表的第一行是有意义的，其中有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放在一起......

Answer 2

如果我是你，我会使用嵌套列表并使用CSS来处理缩进。表格不是答案。

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

Answer 3

我不确定你在寻找什么，但我相信你需要这样的东西

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

这基本上可以获得超过当前行所点击的2行的兄弟。我希望这就是“第三级”的意思。

希望这会有所帮助，Metropolis

修改

好的，我想我现在正在尝试做什么。 “第三级”基本上是单击行之后的所有行，不包含特定的rowspans / class / id。

这是我认为你应该做的事情。给你的根元素一个onclick事件，其id为“root1，root2，root3 ......等......”然后，在那个之后但在下一个“根级行”之前给出所有行“siblingroot1，siblingroot2” ，siblingroot3 .... etc ...“，一旦设置好，那么你可以创建一个像这样的点击事件，

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

Answer 4

让我看看我是否可以用伪代码解决这个问题。似乎你需要做两件截然不同的事情：

this.parent.rowspan +1

和

this.parent.find.nextsibling.notWithRowSpan.addnewRowAndCell

JQuery - 将单元格添加到动态树表

4 个答案: