单击表格单元格上的函数

Click function on the table cell

本文关键字：函数 单元格 表格 单击      更新时间：2023-09-26

我想在单击每行中的第一个单元格时创建一个函数。这是用插件构建的表，此方法不起作用

$('#ecoTableTotal').find('tr').find('td').eq(0).click(function(){
    console.log('click');
})

这个正在工作，但我只需要它来单击第一个单元格。这可能吗？

 $('#ecoTableTotal').on('click', 'tr' , function (event) {
        console.log('click');
    });

编辑：表是使用引导表 （http://wenzhixin.net.cn/p/bootstrap-table/docs/index.html） 生成的。这个问题也与点击功能有关。

使用:first-of-type选择器：http://api.jquery.com/first-of-type-selector/

jsBin 演示

正如其他地方所建议的，:first-child将不起作用

  • 它不会针对真正出现的第一个i的i元素（根据您的要求）。 即：如果在i元素之前您有一个<br>或<b>bold</b>，那么i:first-child不再是第一个孩子！

从您的评论中似乎您的 TR 是动态创建的，所以喜欢

$('#ecoTableTotal').on("click", "tr td:first-of-type i:first-of-type", function(){
   console.log('click');
});

有关如何使用的详细信息：将.on()与事件委派一起使用。

要恢复，您可以使用以下两个变体：

"tr td:first-of-type i:first-of-type"

或 

"tr td:first-child i:first-of-type"
// TD is always the first inside a valid TABLE TR so only here we can use 
// first-child, but there's no guarantee that a contextual <i> element is not 
// preceded by some other HTML element tag.

> 选择器> 意味着您只对直接子元素感兴趣，它有助于定义选择器的 deph。

$('#ecoTableTotal').on('click', 'tbody > tr > td:first' , function (event) {
        console.log('click');
});

$('#ecoTableTotal').on('click', 'tr td:first-child' , function (event) {
    console.log('click');
});

编辑

$('#ecoTableTotal').on('click', 'tr td:eq(0)' , function (event) {
    console.log('click');
});

编辑

$('#ecoTableTotal').on('click', 'tr td:eq(0) i:eq(0)' , function (event) {
    console.log('click');
});
相关文章：