3

考虑下表：

<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()，但我也在寻找最有效的实现。

4

5 回答 5

3

我最近为同样的问题写了一个解决方案：

如何使用 jQuery 找到每个表格单元格的“视觉位置”？

对于寻找这个的人来说，这可能是另一种解决方案。

于 2012-06-12T18:07:42.677 回答
1

像这样的东西？

<!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>
于 2009-09-21T02:14:48.603 回答
0

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

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

请注意，返回的索引是从零开始的。基本上，首先您要找到感兴趣的单元格。对于列，您在 DOM 中上一层到<tr>，获取所有子元素（在本例中将是后代<td>s 和<th>s）并找到该集合中感兴趣的元素的位置。对于该行，在这种情况下，您爬到，获取所有行，并找到感兴趣<tbody>的行的位置。<td>

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

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

于 2009-09-21T17:09:19.793 回答
0

我认为最接近缩短搜索步骤的方法是：

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

});
于 2009-09-24T00:03:45.227 回答
0

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

.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

感谢这个人回答我的问题。

于 2015-05-21T09:02:14.523 回答