0

我得到一个包含表格的 HTML 文件：

src.HTML：

<table id="all">
  <tr>
    <th>Row 1</th>
    <td>Content 1</td>
  </tr>
  <tr>
    <th>Row 2</th>
    <td>Content 2</td>
  </tr>
  <tr>
    <th>Row 3</th>
    <td>Content 3</td>
  </tr>
</table>

这是我的代码：

$('document').ready(function(){
    var tempTable = $('<table id="tempTable"></table>');
    tempTable.load('src.Html #all tr');
    console.log(tempTable);    --> it shows content of tempTable

    console.log($(tempTable).find('tr'));   --> it shows []

});

它有效，它打印 tempTable 的内容。

但是当我想根据需要获得行时，它什么也没显示！如：

$(tempTable).find('tr');        --> []
$(tempTable).find('tr').eq(1);  --> []
$('#tempTable tr:eq(2)')        --> []

谁能告诉我为什么？那个 tempTable 不是一个普通的 DOM 对象吗？

4

2 回答 2

0

我个人不喜欢.load方法。我一直在为此苦苦挣扎。我什至不知道为什么这个例子没有正确加载和显示 HTML。但是，我确实在那里做了一些测试。你自己看。

在回调中，一切都很好。在调用回调之外的相同函数之后执行回调。这意味着您的内容是在您的代码之后加载的，因此您会收到空数组。

在谷歌 Chrome 开发者工具中，仍然显示临时表有子表的原因是您有一个对 DOM 对象的引用。我相信不同之处在于 JavaScript 范围与 DOM 范围不同。与纯 JavaScript 对象不同，到目前为止我对 DOM 对象的每个引用都会自动更新。请参阅本修订版。对同一个表的两个引用都表明第三行具有不同的内容，尽管它们在不同的时间被调用。

最后，您所需要的只是一个回调处理程序。

编辑：

忘记为什么它不会显示内容。当然不会，我从来没有更新过它们。

于 2012-08-08T04:20:11.503 回答
0

只需使用函数回调.load()：

tempTable.load('src.Html #all tr', function() {
  $(tempTable).find('tr');
});
于 2012-08-08T04:21:59.020 回答