遍歷表格單元格，重新使用rowspan值

Question

我有一個簡單的HTML表格，它在一些隨機列中使用rowspans。一個例子可能看起來像

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

我想遍歷行這樣的，我看行作爲A,B,C，D,E,C，然後F,E,G。

我想我大概可以湊齊東西使用cell.index()以檢查後行「遺漏」列非常令人費解，但我想的東西多一點優雅......

Answer 1

試試這個：

<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); 

Fiddle

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

Answer 2

我的理解與您的問題是：你想拆分合並的單元格具有相同的值，然後簡單地按行迭代表。

我已經創建了一個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 3

沒有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 4

您可以使用this Gist。它支持W3C的所有要求，甚至「rowspan = 0」（這似乎只被Firefox支持）。