fiddle

Question

我有一张桌子，想要在按下同一行的按钮时访问tr内容中的第一个td。

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

或者，如果您不需要对每个循环中的复选框执行任何其他操作，则可以使用.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

3 个答案:

fiddle