确定驻留在单元格下方的表格列中的单元格

Question

在下表中：

<table>
    <thead>
        <tr>
            <th>Th1</th>
            <th colspan='2'>Th23</th>
            <th>Th4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Td1</td>
            <td>Td2</td>
            <td>Td3</td>
            <td>Td4</td>
       </tr>
    </tbody>
</table>

对于包含文本“Th23”的表格单元格，我想知道哪些单元格位于其下方。在这种情况下，答案将是分别包含文本“Td2”和“Td3”的单元格。

是否有任何 DOM 属性或内置函数可以帮助进行此类计算？

---

@Matt McDonald 有一个更通用的解决方案。

这就是我最终得到的结果：

// get tbody cell(s) under thead cell (first arg)
// if rowIndex===undefined, get from all rows; otherwise, only that row index
// NOTE: does NOT work if any cell.rowSpan != 1
var columnCells = function( th, rowIndex ) {
    // get absolute column for th
    for( var absCol=0, i=0; true; i++ ) {
            if( th.parentNode.cells[i] == th ) break;
            absCol += th.parentNode.cells[i].colSpan;
    }
    // look in tBody for cells; all rows or rowIndex
    var tBody = th.parentNode.parentNode.nextSibling;
    var cells = [];
    for( var r=((rowIndex==undefined)?0:rowIndex); true; r++ ) {
            if( rowIndex!==undefined && r>rowIndex ) break;
            if( rowIndex==undefined && r>=tBody.rows.length ) break;
            for( var c=0; true; c+=tBody.rows[r].cells[c].colSpan ) {
                    if( c < absCol ) continue;
                    if( c >= absCol+th.colSpan ) break;
                    cells.push(tBody.rows[r].cells[c]);
            }
    }
    return cells;
}

Answer 1

您立即需要做三件事：

1. 为表提供一个 id 属性以便于选择。
2. 为目标单元格指定一个 id 属性，以便于选择。
3. 选择单元格的parentNode（行）

这三件事将使表格相关的计算变得更加容易。

接下来是一个获取指定单元格的伪属性的函数。在本例中，我们正在寻找其“起始索引”（以列为单位）、“结束索引”（以列为单位）及其“宽度”（结束 - 起始，也以列为单位）。

从那里，您可以遍历表的行并检查哪些单元格位于开始索引和结束索引之间。

HTML：

<table id="foo">
    <colgroup span="1">
    <colgroup span="2">
    <colgroup span="1">
    <thead>
        <tr>
            <th>foo</th>
            <th id="example" colspan="2">bar</th>
            <th>baz</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>bing</td>
            <td>bang</td>
            <td>boom</td>
            <td>bong</td>
        </tr>
    </tbody>
</table>

JS（耐心等待）：

function getCellSpanProps(table, row, cell)
{
    var isRow = (function()
    {
        var i = 0, currentRow;
        for(i;i<table.rows.length;i++)
        {
            currentRow = table.rows[i];
            if(currentRow === row)
            {
                return true;
            }
            currentRow = null;
        }
        return false;
    }()), 
    cellHasCorrectParent, i = 0, 
    currentCell, colspanCount = 0,
    props;
    if(isRow)
    {
        cellHasCorrectParent = (function()
        {
            return cell.parentNode === row;
        }());
        if(cellHasCorrectParent)
        {
            for(i;i<row.cells.length;i++)
            {
                currentCell = row.cells[i];
                if(currentCell === cell)
                {
                    props = {"start": colspanCount, 
                    "end": colspanCount + cell.colSpan, 
                    "width": (colspanCount + cell.colSpan) - colspanCount};
                    break;
                }
                colspanCount += currentCell.colSpan;
                currentCell = null;
            }
            row = null;
        }
        return props;
    }
}

function findCellsUnderColumn(table, props)
{
    var i = 0, j = 0, row, cell,
    colspanCount = 0, matches = [],
    blacklist = {"": true, "NaN": true, "null": true, "undefined": true, 
    "false": true};
    if(blacklist[props.start] || blacklist[props.end] || blacklist[props.width])
    {
        return false;
    }
    for(i;i<table.rows.length;i++)
    {
        row = table.rows[i];
        colspanCount = 0;
        for(j=0;j<row.cells.length;j++)
        {
            cell = row.cells[j];
            if(colspanCount >= props.start && colspanCount < props.end)
            {
                matches.push(cell);
            }
            colspanCount += cell.colSpan;
            cell = null;
        }
        row = null;
    }
    return matches;
}

var table = document.getElementById("foo"), 
example = document.getElementById("example"),
targetRow = example.parentNode,
props = getCellSpanProps(table, targetRow, example),
matches = findCellsUnderColumn(table, props);
console.log(matches);

演示：http://jsbin.com/ohohew/edit# javascript,html

这将确定哪些单元格位于您要查找的特定列（包括示例）内。如果这不完全是您想要的功能，您可以自定义该功能以满足您的需求。

Answer 2

您需要知道单元格的列索引。我将其命名为 ci。然后读取其colspan（如果为空，则将其设置为1）。然后在下一行中找到列索引 >= ci 和 的单元格。 ci + colspan。对于如此复杂的需求，使用JS框架是非常有用的。我假设您可以使用 JQuery，因为它是最常用的。

计算列索引有 SO 上的几种解决方案< /a>.

读取 colspan 属性只需使用 jQuery cell.attr('colspan') 即可。

查找下一行是cell.closest('tr').next('tr')。

最后一步是迭代该行的每个元素并计算它们的列索引。您可以使用与上面相同的函数，但如果它不够高效，应该很容易调整其代码，使其不返回整数，而是将元素添加到数组中。