如何知道合并行或列的html表的实际列和行索引

Question

请在这里看到一个演示。 http://jsfiddle.net/wgstudio/CqNfZ/2/

我想合并单元格（0,0）和单元格（1,0）在html talbe，它工作在一个常规的表。

该代码isbelow。

 function() { 
      var table = $("#table1"); 

      var rowIndex = 0; 
      var colIndex = 0;     
      var actionCell =$($(table.children().children()[rowIndex]).children()[colIndex]); //Cell1 
      var tr = table.children().children()[rowIndex + 1]; 
      var toBeRemoved = $($(tr).children()[colIndex]);//Cell4 
      toBeRemoved.remove(); 
      rowSpan = toBeRemoved.attr("rowSpan") == undefined ? 1 : parseInt(toBeRemoved.attr("rowSpan"), 10); 
      actionCell.attr("rowspan", (actionCell.attr("rowSpan") == undefined ? 1 : parseInt(actionCell.attr("rowSpan"), 10)) + rowSpan); 
     } 

但如果表是这样的：

<table id="table2" style=" width: 100%;"> 
     <tr> 
      <td rowspan="2">cell_1</td> 
      <td rowspan="2">cell_2cell_5</td> 
      <td>cell_3</td> 
     </tr> 
     <tr> 
      <td>cell_6</td> 
     </tr> 
     <tr> 
      <td>cell_7</td> 
      <td>cell_8</td> 
      <td>cell_9</td> 
     </tr> 
    </table> 

（0,0），（0,1）合并的细胞，当我想合并（0,0） “小区1” 和（2,0）“Cell7”，如何通过js代码找到“cell 7”？

希望我解释清楚。

非常感谢。

比尔

Answer 1

您所遇到的主要问题是，一旦行跨度被添加到细胞时，它抛出了排索引。如果一行中的单元格具有rowspan=3，则同一列中下一个单元格的row index为currentRowIndex + 3。

这是你需要的一个很好的开始。

$("#button2").click(function() { 
    /* hard code a cell to start with*/ 
    var actionCell = $('td:first'); 

    var toBeRemoved = findNextCell(actionCell); 

    combineSpans(actionCell, toBeRemoved) 

    /* remove merged*/ 
    toBeRemoved.remove(); 

}); 

function combineSpans(actionCell, toBeRemoved){ 
    var actionSpans = getCellSpans(actionCell); 
    var nextSpans = getCellSpans(toBeRemoved); 
    /* add colspan and rowspan for both cells to apply to actionCell*/ 
    var newSpans = { 
     rowspan: actionSpans.rowSpan + nextSpans.rowSpan, 
     colspan: actionSpans.colSpan + nextSpans.colSpan 
    } 
    /* adjust actionCell colspan/rowspan*/ 
    actionCell.attr(newSpans); 

} 

function findNextCell($cell) { 

    var cellIndex = $cell.index(); 
    var rowSpan = $cell.attr("rowspan") || 1; 
    var rowIndex = $cell.closest('tr').index(); 
    var nextRow = $cell.closest('table').find('tr').eq(1 * rowSpan + rowIndex); 
    return nextRow.find('td').eq(cellIndex); 

} 


function getCellSpans($cell) { 
    var obj = {} 
    obj.rowSpan = parseInt($cell.attr("rowspan") || 1, 10); 
    obj.colSpan = parseInt($cell.attr("colspan") || 1, 10); 
    return obj; 

} 

DEMO：http://jsfiddle.net/CqNfZ/7/

编辑：刚刚意识到我combineSpans逻辑需要修改。将2个单元colspan加在一起会导致问题