javascript – 确定位于单元格下方的表列中的单元格

在下表中：

<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 != 1var 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;}

解决方法:

马上,你需要做三件事：

>为表提供id属性以便于选择.
>为目标单元格提供id属性以便于选择.
>选择单元格的parentNode(行)

这三件事将使表格相关的计算更容易.

Next up是一个抓取指定单元格的伪属性的函数.在这种情况下,我们正在寻找它的“起始索引”(就列而言),它的“结束索引”(就列而言),以及它的“宽度”(结束 – 开始,也在列中).

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

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

这将确定哪些单元格位于您要查找的特定列中(包括示例).您可以自定义功能以满足您的需求,如果这不是您正在寻找的.

来源：https://www.icode9.com/content-1-313051.html