Javascript 按特定顺序遍历表头？

在这里：

我试图实现的是，每个

新任务

按钮必须有一个索引属性，该属性对应于它所在的列

列

1、4.1、4.2、5

是这种情况下需要考虑的列。然而，

columnHeaders

中的所有列标题都不是固定的，这使得它更加棘手

对于

行rl

中的

新建任务

按钮#1，如何为其分配

列1

的id

对于

行rl

中的

新任务

按钮#2，如何为其分配

列4.1

的id？诸如此类。在

columnheader

中，忽略

level 1

中包含子项的列，并考虑它们的子项

---

我基本上构建了两个独立的表，并将它们彼此对齐，因此

.具有
行span>0
的
宽度，在
级别2
中，我理解，自然的方法是首先创建一个数组（更像是一个字典）要查找映射的
数据列索引
。通过使用该数组，您只需查找
td
元素的相应索引，并访问其中的计算信息

第一阶段是初始化这样一个数组，如下所示：

var indexInfo = [];
$("#columnHeaders > tbody > tr").first().find("th:gt(0)").each(function(i,e){
    //obtain colspan of the current th elementv
    var csa = $(this).attr("colspan");
    //obtain the rowspan of the current th element
    var rsa = $(this).attr("rowspan");
    var cs = csa == undefined ? 1 : parseInt(csa);
    var rs = rsa == undefined ? 1 : parseInt(rsa);
    //obtain the data-column-index of the current th element
    var cia = $(this).data("column-index");
    var ci = cia == undefined ? -1 : parseInt(cia);
    var startIndex = indexInfo.length;  
    var endIndex = startIndex + cs;
    //initializing the indexInfo array
    for(var k = startIndex; k < endIndex; k++){
      indexInfo[k] = { rowSpan : rs, colIndex : ci};
    }
});

$("#columnHeaders > tbody > tr:gt(0)").each(function(i,e){
    var rowIndex = i + 1;//we skip the first row - which is used to initialize the array indexInfo
    var startColumnIndex = -1;
    $(this).find("th").each(function(j){
            startColumnIndex++;
            //if the current row is still in 'rowspan' range of the previous
            //row, we need to increase the column index
            while(indexInfo[startColumnIndex].rowSpan > rowIndex)
               startColumnIndex++;
            var rsa = $(this).attr("rowspan");
            var rs = rsa == undefined ? 1 : parseInt(rsa);
            var cia = $(this).data("column-index");
            var ci = cia == undefined ? -1 : parseInt(cia);
            //update the info
            indexInfo[startColumnIndex].rowSpan = rowIndex + rs;
            indexInfo[startColumnIndex].colIndex = ci;
    });
});

$("#kanban_rows > tbody > tr").each(function(i){
  $(this).find("td > button").each(function(j){
         $(this).attr("data-column-index", indexInfo[j].colIndex);
      });
});

在准备好的数组中包含正确的信息后。您只需在第二个表中的每个
td
中循环所有
按钮，即可相应地设置
数据列索引，如下所示：

var indexInfo = [];
$("#columnHeaders > tbody > tr").first().find("th:gt(0)").each(function(i,e){
    //obtain colspan of the current th elementv
    var csa = $(this).attr("colspan");
    //obtain the rowspan of the current th element
    var rsa = $(this).attr("rowspan");
    var cs = csa == undefined ? 1 : parseInt(csa);
    var rs = rsa == undefined ? 1 : parseInt(rsa);
    //obtain the data-column-index of the current th element
    var cia = $(this).data("column-index");
    var ci = cia == undefined ? -1 : parseInt(cia);
    var startIndex = indexInfo.length;  
    var endIndex = startIndex + cs;
    //initializing the indexInfo array
    for(var k = startIndex; k < endIndex; k++){
      indexInfo[k] = { rowSpan : rs, colIndex : ci};
    }
});

$("#columnHeaders > tbody > tr:gt(0)").each(function(i,e){
    var rowIndex = i + 1;//we skip the first row - which is used to initialize the array indexInfo
    var startColumnIndex = -1;
    $(this).find("th").each(function(j){
            startColumnIndex++;
            //if the current row is still in 'rowspan' range of the previous
            //row, we need to increase the column index
            while(indexInfo[startColumnIndex].rowSpan > rowIndex)
               startColumnIndex++;
            var rsa = $(this).attr("rowspan");
            var rs = rsa == undefined ? 1 : parseInt(rsa);
            var cia = $(this).data("column-index");
            var ci = cia == undefined ? -1 : parseInt(cia);
            //update the info
            indexInfo[startColumnIndex].rowSpan = rowIndex + rs;
            indexInfo[startColumnIndex].colIndex = ci;
    });
});

$("#kanban_rows > tbody > tr").each(function(i){
  $(this).find("td > button").each(function(j){
         $(this).attr("data-column-index", indexInfo[j].colIndex);
      });
});

下面是更新的演示（根据您自己的演示进行调整）：


您可以检查页面以查看是否正确添加了
数据列索引（根据您的要求）。
请您的问题显示相关的HTML。这看起来像是与PHP相关的问题？是的，几乎没有希望。我只是还没有弄清楚怎么做，是用PHP还是用jQuery控制结构。你应该尝试改进这个问题，让它更清楚。目前，对于您提供的具体示例，我可以猜出问题是什么以及您想要什么。但这只是猜测。这里还有更多不清楚的地方：你们这里只有一张桌子吗？（它有两组标题，分别命名为
表1
和
表2
？如果是这样，您已经对第一组标题进行了索引，而需求只是对第二组标题进行了索引？那么我们需要从第二个标题开始查询（意思是收集所有标题
表2
，但在您的代码中，您从收集所有
。has_width
）开始）…顺便说一句，为了更好地解决这个问题，试着专注于一个简单的演示来模拟你的情况。一旦我们解决了这个简单的演示，你就可以轻松地解决你自己真正的问题。这就是为什么这样问的。有时候你不需要展示你原来的问题，而是你自己先做一些努力来找出问题的根源，简化请在这里提问之前先回答。非常好。非常感谢！@herondale不客气，顺便说一句-我刚刚编辑了一下答案（在第二个片段中，在
indexInfo[startColumnIndex]行中）。行span=…
哦，好的。）顺便说一句，我意识到我在这里有点困惑，什么是
var-startIndex=indexInfo.length；
和
var-endIndex=startIndex+cs；
确切的目的是什么？我觉得我不太清楚sure@herondale由于
colspan
的原因，
indexInfo
的索引与我们循环的
th
元素的索引不匹配通过（如果所有
colspan
为1，则它们匹配）。因此
startIndex
这里只是
indexInfo
的运行索引（独立于
th
元素的索引）。我们越来越多地需要运行索引来构建
indexInfo
数组。您可以看到，当使用
colspan
时，实际上有许多虚拟列与
colspan
值匹配。因此，我们添加
+cs
来循环该范围，并相应地初始化虚拟列（作为
indexInfo
ahh的元素，我明白了，是虚拟列。还有一件事：
indexInfo[startColumnIndex]。rowSpan=rowIndex+rs；
为什么我们需要添加
rowIndex
和
rs
，并将其设置为该标题的新
rowSpan
？