从 $(this) 元素中获取 tr 中的第一个 td

Question

我有一个 table 并且想在按下同一行中的按钮时访问 tr 内容中的第一个 td。

这是 fiddle： http://jsfiddle.net/dLyxrh8r/2/

jQuery代码

$('button').click(function(){
     console.log($(this).closest('tr td:first-child').html()); //get package name (prints null though)
    $('input[type=checkbox]:checked').each(function(i,elem) {
           if( $(elem).closest('tr td:first-child') == $(this).closest('tr td:first-child') ) //only count the ones in the same row
               console.log($(elem).prop("name");
    });
});

我做错了什么？

更新：http://jsfiddle.net/dLyxrh8r/3/

Answer 1

为了访问被点击元素的第一个 td 内容，更改：

$(this).closest('tr td:first-child').html();

以下任何一项：

$(this).closest('tr').find('td:first-child').html();

$(this).closest('tr').find('td').eq(0).html();

$(this).closest('tr').find('td:first').html();

根据您尝试实现的输出，您可以使用以下内容：

Updated Example

$('button').click(function () {
     console.log($(this).closest('tr').find('td:first-child').text());
    $(this).closest('tr').find('input:checked').each(function () {
        console.log(this.name);
    });
});

这将记录包的名称，然后是单击按钮行中的所有选中复选框。

Answer 2

你的问题是你没有定位正确的元素。

$("button").click(function () {
    // get the tr (two parents up from the button)
    var tr = $(this).parent().parent();
    // row name is the name of the first child's text
    var row_name = tr.children().first().text();
    // we want to target children of the row's child (td) at index 1
    var b = $(tr).children().eq(1).children()
        .filter(function (index, d) {
            // filter them based on whether they're checked
            return $(d).attr("checked");
        }).map(function (index, d) {
            // and then map the name of the input to the array
            return $(d).attr("name");
        })
    console.log(row_name, b);
})

fiddle

Answer 3

最好的方法可能是使用 $(this).closest('tr') 找到合适的行，然后使用 .find() 两次找到：

该行的第一个 <td>，然后是 .text()
行的复选框，然后组成所需的"x of n"文本

看起来像这样:

$('button').click(function() {
    var $row = $(this).closest('tr');
    var packageName = $row.find('td:first-child').text();
    var $checkboxes = $row.find('input:checkbox'); //select the checkboxes in the same row
    var checked = 0;
    $checkboxes.each(function(i, elem) {
        //console.log($(elem).prop("name"));
        if(elem.checked) {
            checked += 1;
        }
    });
    console.log(packageName);
    console.log(checked + ' of ' + $checkboxes.length + ' boxes are checked');
});

Updated fiddle

或者如果您不需要对每个循环中的复选框执行任何其他操作，您可以从 $checkboxes 中使用 .filter() 来查找已选中的复选框。

$('button').click(function() {
    var $row = $(this).closest('tr');
    var packageName = $row.find('td:first-child').text();
    var $checkboxes = $row.find('input:checkbox'); //select the checkboxes in the same row
    var checked = $checkboxes.filter(":checked").length;
    console.log(packageName); //get package name (prints null though)
    console.log(checked + ' of ' + $checkboxes.length + ' boxes are checked');
});

从 $(this) 元素中获取 tr 中的第一个 td

Get first td in a tr from $(this) element

jquery

html-table

fiddle