javascript - 迭代表格单元格，重新使用行跨度值

Question

我有一个简单的 HTML 表，它在一些随机列中使用行跨度。一个例子可能看起来像

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

我想遍历行，以便将行视为A,B,C, D,E,C, then F,E,G。

我想我可能可以拼凑一些非常复杂的东西cell.index()来检查后面行中的“丢失”列，但我想要一些更优雅的东西......

Answer 1

没有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>

Answer 2

试试这个：

    <table id="tbl">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">A</td>
        <td rowspan="2">C</td>
    </tr>
    <tr>
        <td rowspan="2">E</td>
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
    </tr>
    </table>

脚本：

    var finalResult = '';
    var totalTds = $('#tbl TR')[0].length;
    var trArray = [];
    var trArrayValue = [];
    var trIndex = 1;
    $('#tbl TR').each(function(){
    var currentTr = $(this);
    var tdIndex = 1;
    trArray[trIndex] = [];
    trArrayValue[trIndex] = [];
    var tdActuallyTraversed = 0;
    var colspanCount = 1;
    $('#tbl TR').first().children().each(function(){
        if(trIndex > 1 && trArray[trIndex - 1][tdIndex] > 1)
        { 
            trArray[trIndex][tdIndex] = trArray[trIndex - 1][tdIndex] - 1;
            trArrayValue[trIndex][tdIndex] = trArrayValue[trIndex - 1][tdIndex];
            finalResult = finalResult + trArrayValue[trIndex][tdIndex];
        }
        else
        {                        
            if(colspanCount <= 1)
            {
                colspanCount = currentTr.children().eq(tdActuallyTraversed).attr('colspan') != undefined ? currentTr.children().eq(tdActuallyTraversed).attr('colspan') : 1;
            }
            if(colspanCount > 1 && tdIndex > 1)
            {
                trArray[trIndex][tdIndex] = currentTr.children().eq(tdActuallyTraversed + colspanCount).attr('rowspan') != undefined ?currentTr.children().eq(tdActuallyTraversed + colspanCount).attr('rowspan') : 1;
                trArrayValue[trIndex][tdIndex] = trArrayValue[trIndex][tdIndex - 1];
                colspanCount--;
            }
            else
            {
                trArray[trIndex][tdIndex] = currentTr.children().eq(tdActuallyTraversed).attr('rowspan') != undefined ?currentTr.children().eq(tdActuallyTraversed).attr('rowspan') : 1;
                trArrayValue[trIndex][tdIndex] = currentTr.children().eq(tdActuallyTraversed).html();
                tdActuallyTraversed++;
            }
            finalResult = finalResult + trArrayValue[trIndex][tdIndex];

        }

        tdIndex++;
    });
    trIndex++;
});

alert(finalResult);

小提琴

我不确定性能，但效果很好。

Answer 3

我对你的问题的理解是：你想用相同的值分割合并的单元格，然后简单地逐行迭代表。

我创建了一个 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);

Answer 4

你可以使用这个 Gist。它支持 W3C 的所有要求，甚至“rowspan=0”（似乎只有 Firefox 支持）。