Question

考虑下表：

<table>
    <thead>
        <tr>
            <th scope="col" />
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Apples</td>
            <td>Oranges</td>
            <td>Pears</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td rowspan="2">Subcategory Heading</td>
            <td>ASP.Net</td>
            <td>Other</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>MVC</td>
            <td>PHP</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Red</td>
            <td>Green</td>
            <td>Blue</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">Some pointless footer content</td>
        </tr>
    </tfoot>
</table>

如何使用jQuery检索包含文本“MVC”或“PHP”的单元格的正确列号？正确的答案是第3列，但只使用.prevAll().length只计算先前单元格的数量，在这种情况下，它们无法准确反映其实际的列位置？

我确信我需要使用each()，但我也在寻找最有效的实施方案。

Answer 1

我最近针对同样的问题为这种情况编写了一个解决方案：

How can I find each table cell's "visual location" using jQuery?

可能是寻找此人的另一种解决方案。

Answer 2

这样的东西？

<!doctype html>
<table id="foo">
    <thead>
        <tr>
            <th scope="col" />
            <th scope="col">A</th>
            <th scope="col">B</th>
            <th scope="col">C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Apples</td>
            <td>Oranges</td>
            <td>Pears</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td rowspan="2">Subcategory Heading</td>
            <td>ASP.Net</td>
            <td>Other</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>MVC</td>
            <td>PHP</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Red</td>
            <td>Green</td>
            <td>Blue</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">Some pointless footer content</td>
        </tr>
    </tfoot>
</table>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
    var table = $('table#foo');
    table.find('td[rowspan], th[rowspan]').each(function() {
    var cellNum,
        reference = this,
        columnNum = $(this).attr('rowspan'),
        parentTr = $(this).closest('tr'),
        parentTrs = $(this).closest('tr').parent().find('tr');

    parentTr.find('>td, >th').each(function(i,o) {
        if ( this == reference ) {
        cellNum = i;

        var counter = columnNum;

        while ( counter-- ) {
            $(this).closest('tr').next().find('>td,>th').each(function(i,o) {
            if ( cellNum == i ) {
                $(this).addClass('rowspan-affected');
                $(this).attr('colNum', columnNum);
            }
            });
        }
        }
    });

    /* testing
    window.num = num;
    window.parentTr = parentTr;
    window.parentTrs = parentTrs;
    */
    });
</script>

Answer 3

嗯，最短（过度）的简化是：

var theCell = $('td:contains("MVC")');
col = theCell.parent().children().index(theCell);
row = theCell.parent().parent().children().index(theCell.parent());

注意，返回的索引是从零开始的。基本上，首先你找到感兴趣的细胞。对于该列，您将DOM中的级别上升到<tr>，获取所有子级（在这种情况下将是后代<td>和<th>）并找到该集合中感兴趣的元素的位置。对于该行，在这种情况下，您可以爬到<tbody>，获取所有行，并找到感兴趣的<td>行的位置。

您可以想象，表格结构的变化会改变可能的结果。但是，如果以后以相同的方式以编程方式使用索引，则可以返回到同一单元格。我提出这个问题是因为如果你以某种方式在UI中直观地使用索引，你可能必须变得更加棘手并且考虑到跨度，<tbody>与否<tbody>等等......

不知道它是否比meder的答案更有效。但是，它肯定更易于维护！：）

Answer 4

我认为最接近缩短搜索步骤会做到这样的事情：

var counter = 0;
$("#idTable tbody tr").each(function(){

   var html = $(this).html();
   var php = html.indexOf("PHP") > -1 ? true : false;
   var mvc = html.indexOf("MVC") > -1 ? true : false;

   if(php || mvc) {
       $(this).find("td").each(function(){ counter += (($(this).html()=="PHP") || ($(this).html()=="MVC")) ? 1 : 0; });
   }

});

Answer 5

尝试这样的事情，你明白了。它有效，所以为什么不：）

.stuffing {
    display: none;
}

<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td colspan="3">1</td>
        <td class="stuffing"></td>
        <td class="stuffing"></td>
        <td>4</td>
    </tr>
</table>

var tb= document.querySelector('table');
tb.rows[0].cells[3].innerHTML;  //4
tb.rows[1].cells[3].innerHTML;  //4

在this guy for his answer上my quesiton给予赞誉。

检索受“rowspan”影响的行的列索引的最有效方法是什么？

5 个答案: