单击特定列时获取表行单元格值

Getting a table row cell value when a specific column is is clicked

本文关键字：单元格 获取 单击      更新时间：2023-09-26

我能够通过表点击事件检索所有行值，并通过event.currentTarget.cells[4].innerText();获取其值。

但是，如果只单击某个特定列，我希望应用此方法，例如，当我单击Username column下的ID 21时。它应该提醒该行的所有单元格值。然后，当我单击其他列时，它不应该发出警报。

这是我的密码。如果你有问题，请按照我的要求通知我。

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('#tableid').on('click', 'tr', function (event) {
            alert(event.currentTarget.cells[0].innerText);
            alert(event.currentTarget.cells[1].innerText);
            alert(event.currentTarget.cells[2].innerText);
            alert(event.currentTarget.cells[3].innerText);
            alert(event.currentTarget.cells[4].innerText);
        });
    });
</script>

这是我的HTMLhttp://jsfiddle.net/jE5UM/

尝试

$(document).ready(function () {
    $('#tableid').on('click', 'tr', function (event) {                
        $(this).children().each(function(){
            alert($(this).text())
        })
    });
});

演示：Fiddle

如果你想要一个数组作为结果，那么

$(document).ready(function () {
    $('#tableid').on('click', 'tr', function (event) {                
        var texts = $(this).children().map(function(){
            return $.trim($(this).html())
        }).get();
    });
});

演示：Fiddle

更新

$(document).ready(function () {
    $('#tableid').on('click', 'tr td:nth-child(2)', function (event) {                
        var texts = $(this).closest('td').siblings().addBack().map(function(){
            return $.trim($(this).html())
        }).get();
        alert(texts.join())
    });
});

演示：Fiddle

在没有特定HTML和其他信息的情况下，我建议：

$(document).ready(function () {
    $('#tableid').on('click', 'tr', function (event) {
        var cell = event.target,
            values = $(cell).siblings().addBack().map(function(){
                         return $(this).text();
                     }).get();
        alert(values);
    });
});

JS Fiddle演示。

参考文献：

  • addBack()
  • get()
  • map()
  • on()
  • siblings()
  • text()
相关文章：