代码之家 › 专栏 › 技术社区 › Ocelot20

jquery-向动态树表添加单元格

html jquery

Ocelot20 · 技术社区 · 14 年前

我不能把我的头绕在这个上面…

像下面这样的表是由渲染器从一些XML中输出的。它来自的XML的深度是可变的。(请指出,如果我也在以一种可怕的方式使用Rowspan,我只是带着一些实验来到这个桌子上)。

<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文本】〔1〕

我想在jquery中完成的是…

用户单击单元格“1>2”(将具有ID)。
项目将动态添加到第三级,但在“1>2>6”下。

我什么能够 do只是在“1>2”下添加另一行,并将行跨度从“1>2”增加,但新单元格将在“1>2>5”和“1>2>6”之间出现无序。

我真的不需要确切的代码来做这个,只是为了阻止我的头在这个周围转…谢谢!

4 回复 | 直到 14 年前

Community Vlad V 7 年前

您的行扫描似乎有点奇怪,表的第一行中有3个单元格是有意义的,第一行扫描6个,第二行扫描2个,最后是“单个单元格”…

悲哀地, <tr> S和 <td> 在处理跨浏览器的colspan/rowspan问题时,s是不可靠的。 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 成品的…

Diodeus - James MacFarlane 14 年前

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

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

Metropolis 14 年前

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

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

这基本上可以得到比单击的当前行多2行的同级。我希望这就是你所说的“第三层次”。

希望这有帮助,大都会

编辑

好吧,我想我知道你现在想做什么了。“第三级”基本上是单击行后不包含特定行pans/class/id的所有行。

这是我认为你应该做的。为根元素提供一个ID为“root1、root2、root3…等”的onclick事件,然后在该事件之后但在下一个“根级别行”之前为所有行提供一个“siblingroot1、siblingroot2、siblingroot3…等”类,一旦设置好,就可以创建类似这样的单击事件,

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

graphicdivine 14 年前

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

this.parent.rowspan+1

和

this.parent.find.nextisbling.notwithrowspan.addNewRowAndCell