在遍历 tr 时，Jquery 不会让我 select td 的值

Question

我想 select td 的值，当该行包含一个选中的复选框时。我能够 select 包含选中复选框的行，但我无法遍历该行以 select 键。

这是 table 结构。

<table class="test"><thead><tr>
<th class="table-header-name">select</th>
<th class="placeholder" style="min-width:100px"></th>
<th class="table-header-name">Key</th>
<th class="table-header-name">hash</th>
<th class="table-header-name">type</th>
</tr>
</thead>

<tbody id="table-body">
<tr class="table-row">
<td><input class="change-select" type="checkbox"></td>
<td class="placeholder"></td>
<td class="key">TICKET:44433</td>
<td class="hash">444nhh</td>
<td class="type">COOL</td>
</tr>
</tbody></table>

我要查找的值是 class "key".

的 td 标签内的文本

<td class="key">TICKET:44433</td>

首先，我select检查包含选中复选框的行：

 AJS.$('.test tr :has(:checkbox:checked)').each(function (i,val) {
                console.log("this no:"+i+": " + val);
                // get td of class "key" and print the value

                })

            });

好吧，我尝试了很多方法来获取 td 的值，例如：

this.find("td .key").text();
this.find("td").eq([number])

在这两种情况下都不会 return。

我发现我正在迭代 HTMLTableCellElements，当我使用 '.aui tr :has(:checkbox:checked)' 时，但在这个相关主题中它应该工作：Jquery Selecting Table Rows with Checkbox

  console.log("find td: " + AJS.$(this).find('td'));
                AJS.$(this).find('td').each(function(key,element){
                    console.log('key: ' + key + '\n' + 'value: ' + element);
                })

将生成以下输出：

"find td: [object Object]"

就是这样...

所以我想我select排行的方式肯定有问题。希望你能在这里给我提示。

Answer 1

$(document).ready(function(){
    $('tbody tr').each(function(){
        if($(this).find('.change-select').attr('checked') == 'checked'){
        alert($(this).find('.key').text());
        }
    });
});

DEMO Here

Answer 2

您可以使用 find 进入选中复选框的行：

$('.table-row:has(:checkbox:checked)').each(function (idx, comp){
        console.log($(comp).find('.key')[0].innerText);
        //console.log(comp);
    });

Here is an fiddle for reference

在遍历 tr 时，Jquery 不会让我 select td 的值

Jquery won't let me select value of td, when iterating over tr

javascript

jquery

html-table