html - 如何匹配html中表格的不同列？

Question

我有一个表结构如下：

<table>
  <tr id="tr1">
      <td></td>
      <td></td>
  </tr>
  <tr id="tr2">
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr id="tr3">
    <td></td>
    <td></td>
  </tr>
</table>

现在它在第一行和最后一行各有 2 列。第二行有 4 列。现在，如果我想在对应于第 2 行第 4 列的最后一行添加一列，我知道我应该将一个空 td 附加到最后一行，然后添加该列。但这种空 td 加入并非在所有情况下都是可能的。那么如何随机添加列和管理表的结构呢？我能得到任何帮助吗？？

Answer 1

这是你想要的吗？

$(document).ready(function(){
    addCol("tr3", 4);
});

function addCol(rowid, coldes){
    var tr = $("#" + rowid + " td");
    var trctr = tr.length;
    troffset = coldes - trctr;
    alert(troffset);
    for(var i = 1; i <= troffset; i++){
        tr.parent().append("<td></td>");
    }
}

http://jsfiddle.net/djb78/1/

Answer 2

手动处理 HTML 表格（添加列等）是很成问题的，但是有一些用于表格/数据表示的库可能会对您有所帮助。

1. 数据表

   http://www.datatables.net/

2. 弹性网格

   http://www.flexigrid.info/

3. SlickGrid

   https://github.com/mleibman/SlickGrid

4. jqGrid

   http://www.trirand.com/blog/

5. dgrid 和 DojoX 数据网格

   http://dojotoolkit.org/features/desktop.php

Answer 3

你不能那样做。您必须合并一些单元格并删除它们的边框。 rowspan和colspan属性会有所帮助