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 つの列ができました。そして2行目に4列。2 番目の行の 4 番目の列に対応する最後の行にもう 1 列を追加したい場合は、最後の行に 1 つの空の 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. スリックグリッド

   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属性が役立ちます