4

いくつかのランダムな列で行スパンを使用する単純な HTML テーブルがあります。例は次のようになります

 A | B |
---|---| C
 D |   |
---| E |---
 F |   | G

A,B,C行が, D,E,C, thenと表示されるように、行を反復処理したいと思いますF,E,G。

おそらく、後の行の「見逃された」列をチェックするために非常に複雑なものを組み合わせることができると思いますcell.index()が、もう少しエレガントなものが欲しいです...

4

4 に答える 4

5

jquery なし:

function tableToMatrix(table) {
  var M = [];
  for (var i = 0; i < table.rows.length; i++) {
    var tr = table.rows[i];
    M[i] = [];
    for (var j = 0, k = 0; j < M[0].length || k < tr.cells.length;) {
      var c = (M[i-1]||[])[j];
      // first check if there's a continuing cell above with rowSpan
      if (c && c.parentNode.rowIndex + c.rowSpan > i) {
        M[i].push(...Array.from({length: c.colSpan}, () => c))
        j += c.colSpan;
      } else if (tr.cells[k]) {
        var td = tr.cells[k++];
        M[i].push(...Array.from({length: td.colSpan}, () => td));
        j += td.colSpan;
      }
    }
  }
  return M;
}

var M = tableToMatrix(document.querySelector('table'));

console.table(M.map(r => r.map(c => c.innerText)));

var pre = document.createElement('pre');
pre.innerText = M.map(row => row.map(c => c.innerText).join('\t')).join('\n');
document.body.append(pre);
td {
  border: 1px solid rgba(0,0,0,.3);
}
<table>
  <tr>
    <td colspan=2>A</td>

    <td rowspan=2>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td rowspan=3>D</td>
  </tr>
  <tr>
    <td rowspan=2>E</td>
    <td rowspan=4>F</td>
  </tr>
  <tr></tr>
  <tr>
    <td rowspan=2 colspan=2>G</td>
  </tr>
  <tr></tr>
  <tr>
    <td rowspan=3 colspan=3>H</td>
  </tr>
  <tr></tr>
  <tr></tr>
  <tr>
    <td colspan=3>I</td>
  </tr>
</table>

于 2015-10-10T21:34:13.867 に答える
1

あなたの質問で私が理解したのは、マージされたセルを同じ値で分割し、テーブルを単純に行ごとに繰り返したいということです。

結合されたセルを同じ値で分割する JSFiddle を作成しました。次に、指定した目的の出力を取得するために、行ごとに単純に反復できるテーブルが作成されます。

ここで実行されていることを確認してくださいhttp://jsfiddle.net/9PZQj/3/

完全なコードは次のとおりです。

<table id="tbl" border = "1">
    <tr>
        <td>A</td>
        <td>B</td>
        <td rowspan="2">C</td>
    </tr>
    <tr>
        <td>D</td>
        <td rowspan="2">E</td>
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
    </tr>
</table>
<br>
<div id="test"> </div>

テーブルのデータを操作するために使用される jquery を次に示します。

   var tempTable = $('#tbl').clone(true);
    var tableBody = $(tempTable).children();
    $(tableBody).children().each(function(index , item){
        var currentRow = item;
        $(currentRow).children().each(function(index1, item1){
            if($(item1).attr("rowspan"))
            {
                // copy the cell
                var item2 = $(item1).clone(true);
                // Remove rowspan
                $(item1).removeAttr("rowspan");
                $(item2).removeAttr("rowspan");
                // last item's index in next row
                var indexOfLastElement = $(currentRow).next().last().index();
                if(indexOfLastElement <= index1)
                {
                     $(currentRow).next().append(item2)
                }
                else
                {
                  // intermediate cell insertion at right position
                  $(item2).insertBefore($(currentRow).next().children().eq(index1))
                }
            }
        });

        console.log(currentRow)
    });

   $('#test').append(tempTable);
于 2013-07-29T12:20:49.513 に答える