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

我有一个简单的HTML表，它在一些随机列中使用行跨度。例如：

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

我想对这些行进行迭代，以便我看到的行是

A，B，C

，

d，E，C

，然后是

F，E，G

我想我可以使用cell.index（）拼凑出一些非常复杂的东西来检查后面几行中是否有“遗漏”的列，但我想要更优雅一点的…

试试这个：

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

A.
C
E
F
G

脚本：

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

var finalResult=''；
var totalTds=$（'#tbl TR'）[0]。长度；
var trArray=[]；
var trArrayValue=[]；
var-trIndex=1；
$（'#tbl TR'）。每个（函数（）{
var currentTr=$（此值）；
var tIndex=1；
trArray[trIndex]=[]；
trArrayValue[trIndex]=[]；
var tdActuallyTraversed=0；
var-colspanCount=1；
$（'#tbl TR'）.first（）.children（）.each（function（））{
如果（trIndex>1&&trArray[trIndex-1][tdIndex]>1）
{ 
trArray[trIndex][tdIndex]=trArray[trIndex-1][tdIndex]-1；
trArrayValue[trIndex][tIndex]=trArrayValue[trIndex-1][tIndex]；
finalResult=finalResult+trArrayValue[trIndex][tIndex]；
}
其他的
{                        
如果（colspanCount 1&&tIndex>1）
{
trArray[trIndex][tdIndex]=currentTr.children（）.eq（tdActuallyTraversed+colspanCount）.attr（'rowspan'）！=undefined？currentTr.childrent（）.eq（tdActuallyTraversed+colspanCount）.attr（'rowspan'）：1；
trArrayValue[trIndex][tdIndex]=trArrayValue[trIndex][tdIndex-1]；
科尔斯潘计数--；
}
其他的
{
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][tIndex]；
}
tdIndex++；
});
trIndex++；
});
警报（最终结果）；

---

我不确定它的性能，但它工作得很好。

我对您的问题的理解是：您希望使用相同的值拆分合并的单元格，然后仅按行迭代该表

我创建了一个JSFIDLE，它将使用相同的值分割合并的单元格。然后，您将拥有一个表，该表可以简单地按行进行迭代，以获得指定的所需输出

看到它在这里跑了吗

以下是完整的代码：

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

A.
B
C
D
E
F
G

下面是用于操作表数据的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);

var-tentable=$（'#tbl'）.clone（true）；
var tableBody=$（诱惑）.children（）；
$（表体）.children（）.each（函数（索引，项）{
var currentRow=项目；
$（currentRow）.children（）.each（函数（index1，item1）{
if（$（item1.attr（“rowspan”））
{
//复制单元格
var item2=$（item1）.clone（true）；
//删除行跨度
$（项目1）.removeAttr（“行范围”）；
$（项目2）.removeAttr（“rowspan”）；
//下一行中最后一项的索引
var indexOfLastElement=$（currentRow）.next（）.last（）.index（）；
如果（indexOfLastElement不带jquery：


函数表矩阵（表）{
var M=[]；
对于（var i=0；ii）{
M[i].push（…数组.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；
}
}
}
返回M；
}
var M=tableToMatrix（document.querySelector（'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{
边框：1px实心rgba（0,0,0,3）；
}

A.
B
C
D
E
F
G
H
我
您可以使用它。它支持W3C的所有要求，甚至“rowspan=0”（这似乎只有Firefox支持）。
到目前为止，我所做的是保存第一行中每个单元格的左偏移量（因为这保证有与表中列一样多的
TD
），然后逐行比较偏移量，查看单元格“属于”的列to.灵感来源——它现在还可以工作，但是如果我有任何
colspan
并且仍然感觉笨重，它就会崩溃……更新解决方案，现在它也涵盖了colspan。这一切都可以工作，但我不想更改表的表示方式——我只想在“逻辑行”中工作，这当然应该包括表中每列的一个值，如所示。您的原始表没有改变。在这个解决方案中，我正在创建一个表的副本并对其进行调整，以便您可以使用相同的元素处理新的udpated表，但行跨度合并。请在您的回答中发布相关的最小代码-这是如果主旨被删除，它对未来的搜索者来说就没那么有用了。