Question

我在这里有这段代码

<table>
    <thead>
        <th>Title One</th>
        <th>Title Two</th>
        <th>Title Three</th>
    </thead>
    <tbody>
        <?php foreach ($foos as $foo): ?>
            <tr>
                <td id="x"><?php echo $foo->bar1; ?></td>
                <td id="y"><?php echo $foo->bar2; ?></td>
                <td id="z"><?php echo $foo->bar3; ?></td>
            </tr>
        <?php endforeach; ?>
    </tbody>
</table>

<script type="text/javascript">
    $('#x').on('click', function(){
        console.log($(this).html());
    });
</script>

假设我有10行数据，我如何能够引用我点击的确切元素？例如第5行，jQuery如何知道我点击了第5行？我无法写<td id="x1">，<td id="x2">，<td id="x3">，<td id="x4">，因为我可以有一千条记录。

任何帮助将不胜感激。

Answer 1

您可以使用closest('tr')查找最近的父tr元素，然后使用index()获取行号。试试这个：

$('td').click(function() {
    var $tr = $(this).closest('tr');
    var rowIndex = $tr.index();
});

Example fiddle

另请注意，您应该从PHP循环中的id元素中删除td属性，否则您将复制它们，这是无效的，可能会导致JS或渲染问题。

Answer 2

$('table').on('click', 'td', function() {
    var rowNumber = $(this).closest('tr').index() + 1;
    var content = $(this).html();
    console.log(rowNumber);
    console.log(content);
});

您不需要知道您点击的某种标识，因为jQuery知道您单击的元素与整个DOM有关。

当索引从0开始计数时，您需要向行号变量添加1。

EXAMPLE

Answer 3

如果您需要知道元素的位置，请使用.index()。

$('td').on('click',function()
{
    console.log($(this).closest('tr').index())
})

否则$(this)将成为元素本身。

Answer 4

假设您在TD上点击了点击次数，您可以获得closest祖先TR，只需通过index()查看其父级的索引位置：

$('table td').on('click', function(){
    console.log($(this).closest('tr').index());
});

如果动态添加行/ TD，请使用on的委托版本：

$('table').on('click', 'td' function(){
    console.log($(this).closest('tr').index());
});

此事件仅在事件发生时才应用选择器。

注意：

index返回从0开始的值。
您可能实际上并不关心索引值本身，而只关注closest('tr')以进行其他操作。

更新

如果你想在表格中使用行ID，请将其应用于TR元素，以便获得

<tr data-parent_id="myidhere">

并使用

进行访问

$('table td').on('click', function(){
    var id = $(this).closest('tr').data('parent_id');
});

Answer 5

如果需要行号，可以使用索引功能。最简单的方法是更改单击处理程序（假设您要获取所单击的tr中任何td的索引）。您甚至不需要在您的TD上放置ID：

<tr class = 'clickiness'>
    <td id="x"><?php echo $foo->bar1; ?></td>
    <td id="y"><?php echo $foo->bar2; ?></td>
    <td id="z"><?php echo $foo->bar3; ?></td>
</tr>
<script>
$( document ).ready( function() {
    $( '.clickiness' ).click( function( event ) {
        var $tds = $( this ).children();
        var $clickedTD = $( event.target );
        var clickedIndex = $clickedTD.index( $tds );    // the zero-based index
    });
});
</script>

我在这里做的是设置将click处理程序设置为TR，所以当单击TR中的任何内容时，该函数将运行，然后我使用事件变量来获取被点击的实际元素

遍历foreach循环中的HTML DOM元素

5 个答案: