程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

我无法完全理解这个……

像下面这样的表格是由渲染器从一些 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>

![替代文字][1]

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

1. 用户单击单元格“1 > 2”（将有一个 ID）。
2. 一个项目被动态添加到第三层，但在“1 > 2 > 6”下。

我能做的只是在“1 > 2”下添加另一行并从“1 > 2”增加行跨度，但新单元格将在“1 > 2 > 5”和“1 > 2 >”之间出现乱序6"。

我真的不需要确切的代码来执行此操作，只是为了阻止我的头脑围绕这个旋转......谢谢！

解决方案

看起来你的行跨度有点奇怪，表格的第一行有 3 个单元格，第一行跨度为 6，第二行跨度为 2，最后是“单个单元格”......

遗憾的是，在处理跨浏览器的 colspan/rowspan 问题时， <tr>和是不可靠的。SO1303106显示了一个解决方案，它构建了每行/列的矩阵并创建了一些函数来帮助您查询它。 本文启发了该解决方案，并展示了问题所在。<td>

使用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>'
  );
});

只是为了把它们放在一起，一个成品的 jsbin 预览......