当迭代tr时,Jquery不会让我选择td的值

时间:2015-05-10 17:31:50

标签: javascript jquery html-table

当行包含选中的复选框时,我想选择td的值。我可以选择包含已选中复选框的行,但我无法遍历该行以选择密钥。

这是表结构。

<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>

我正在寻找的值是“key”类的td-tag内的文本。

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

首先,我选择包含已选中复选框的行:

 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])

两种情况都不会返回任何内容。

当我使用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]"

多数民众赞成......

所以我猜我选择行的方式一定有问题。我希望你能在这里给我一个提示。

1 个答案:

答案 0 :(得分: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