Question

我正在尝试为每个＆＃34; tr＆＃34;执行一个函数。我＆＃34; table＆＃34;的子元素使用jquery，但此代码不识别孩子。我已将此代码用于＆＃34; div＆＃34;之前的基础设计，如果我改变＆＃34;表＆＃34;它可以很好地工作。和＆＃34; tr＆＃34;标签到＆＃34; div＆＃34;但它并没有在这里运行！这是一个简单的设计：

<table id="tblSearch" border="1px">
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hey</td>
    </tr>
    <tr>
        <td>Hi</td>
    </tr>
    <tr>
        <td>There!</td>
    </tr>
</table>
<table>
    <tr align="center">
        <input id="btnSearch" type="button" value="Search" />
    </tr>
</table>

这是jquery：

$(function () {
    $('#btnSearch').click(function () {
        var a = $("#tblSearch").children("tr").each(function(){
            alert($(this).text);
        });
    });
});

jsfiddle: 请注意，警报只运行一次！而且我也删除了＆＃34; tr＆＃34;为我的jsfiddle中的孩子们让代码可以运行... 有人可以帮帮我吗？

Answer 1

tr元素不是table的子元素，属于tbody（或thead或tfoot）的子元素。如果未指定tbody元素，则会自动创建该元素。如果检查生成的DOM，您可以轻松地自己解决这个问题。

长话短说，用.find

搜索所有后代

$("#tblSearch").find("tr")
// simpler:
$("#tblSearch tr")

或在您的选择器中加入tbdoy：

$("#tblSearch").children("tbody").children("tr")
// simpler:
$("#tblSearch > tbody > tr")

话虽如此，您还必须在td个元素中添加实际内容，如其他答案中所述。

如果您不熟悉HTML和表格，请阅读MDN documentation。

Answer 2

问题是：

tables会自动将tbody元素插入到DOM中，因此您不应将TR引用为TABLE元素的子元素。
您引用了一个不存在的text属性而不是jQuery text()函数。
你可能想要引用td无论如何（并且可能只是每行中的特定TD），因为返回整行（TR）的文本在HTML中很少有意义。< / LI>

JSFiddle：http://jsfiddle.net/TrueBlueAussie/TdGKj/1/

$(function () {
    $('#btnSearch').click(function () {
        var a = $("#tblSearch td:first-child").each(function () {
            alert($(this).text());
        });
    });
});

#tblSearch td:first-child选择器基本上说：＆＃34;使用id=tblSearch查找元素，然后搜索其父级td的任何first child元素。注意我在JSFiddle中添加了第二列虚拟TDs单元格，因此您可以在实践中看到这一点。

有很多选择器可供选择特定的孩子，这些选择器会根据您的具体需求而有所不同，但这需要对jQuery selectors进行一些研究

Answer 3

有2个问题，html无效且选择器错误

<table id="tblSearch" border="1px">
    <tr>
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hey</td>
    </tr>
    <tr>
        <td>Hi</td>
    </tr>
    <tr>
        <td>There!</td>
    </tr>
</table>

然后

$(function () {
    $('#btnSearch').click(function () {
        var a = $("#tblSearch").find(">tbody > tr").each(function () {
            alert($(this).text());
        });
    });
});

演示：Fiddle

Answer 4

你根本不需要使用孩子。你可以创建一个选择器 -

$('#tblSearch tr td')

工作演示 - http://codepen.io/nitishdhar/pen/Aiwgm

首先，您需要修复HTML结构，将子td元素放在每个tr -

中

<table id="tblSearch" border="1px">
    <tr> 
        <td>Hello</td>
    </tr>
    <tr>
        <td>Hey</td>
    </tr>   
    <tr>
        <td>Hi</td>
    </tr>   
    <tr>
        <td>There!</td>
    </tr>
</table>

<div>
<input id="btnSearch" type="button" value="Search"/></td>
</div>

现在，您可以使用此javascript代码段提醒每个值 -

$(function () {
  $('#btnSearch').click(function () {
     $("#tblSearch tr td").each(function(){
          alert($(this).text());
      });
  });
});

注意 - 这将根据需要单独提醒每个值。

Answer 5

首先修复你的html并在单元格数据周围添加正确的标签

然后这应该做你想要的：

 $('table#tblSearch tr').children().each(function(){
   alert($(this).text());
 });

Answer 6

您提供的问题中存在多个问题：

您的HTML无效;在td

tr

调用正确的jQuery函数。而不是使用children('tr')，它找不到，因为tr元素没有table（tbody元素thead，find()等等，你需要调用find('td') jQuery函数（例如tr），然后你就可以得到单元格的文本;但是，在这种情况下，您也可以找到{{1}}并获取整行的文本。

jQuery查找？<table> </table>的子元素

6 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/TdGKj/1/