0

我将如何更改表格中某个单元格之后的单元格？我无法使用它.parent().nextAll()，或者.index()

我很抱歉，但我没有任何代码可以发布。我认为这更像是一个普遍的问题。

4

3 回答 3

1

单元格在 HTML 中实际上并不是连续的，因此您不能只使用同一级别的所有内容（使用nextAll或类似）。假设你有这张桌子：

<table>
    <tbody>
        <tr>
            <td>one</td>
            <td id="two">two</td>
            <td>three</td>
        </tr>
        <tr>
            <td>four</td>
            <td>five</td>
            <td>six</td>
        </tr>
    </tbody>
</table>

...并且您想突出显示“之后”的每个单元格two，这将遍历并选择这些单元格：

$('table td:gt(' + $('#two').index() + ')').each(function() {
    console.log($(this).text()); // or whatever you want to do with the cell
});

演示小提琴在这里。

于 2013-07-08T23:33:58.840 回答
0

可能不是最有效的解决方案，但它可以完成工作：

这里的基本策略是：（a）在当前单元格之后选择兄弟，（b）跳转到行元素，对于当前行之后的每一行，抓取 TD 元素并添加到兄弟列表中。

<!doctype html>
<html>
<head><script src="../lib/jquery-1.9.1.js"></script>
<style>
table { border:1px solid black; }
thead th { border-bottom:1px solid black; }
tfoot th { border-top:1px solid black; }
</style>
<script>
$(function() {

    $('tbody').find('td')
        .click(function(event) {
            var $cell           = $(event.target),
                $siblings       = $cell.nextAll('td'),
                $remainingCells = $cell.closest('tr').nextAll().find('td');

            $siblings.add($remainingCells).each(function(index, element) {
                console.info(index + ':', $(element).text());
            });
        });

});
</script>
</head>
<body>
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alpha</td>
            <td>Bravo</td>
            <td>Charlie</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Delta</td>
            <td>Echo</td>
            <td>Foxtrot</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Golf</td>
            <td>Hotel</td>
            <td>India</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>#</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
    </tfoot>
</table>
于 2013-07-09T00:00:28.987 回答
-1 
// Selecting all <td>s after <td id="i-want">
$('td#i-want ~ td')

// Selecting the next <td> after <td id="i-want">
$('td#i-want + td')
于 2013-07-08T23:32:26.950 回答