Question

我有一个基本的DOM“大纲”，其中包含一个带有虚拟数据的表，如下所示：

<table>
  <tr>
    <td>name</td>
    <td>phone</td>
  </tr>
</table>

我的脚本使用它作为虚拟行来克隆和替换TD标记与文本中的文本之间的文本。没有复制整个脚本，这里有两个我尝试过的不同的东西：

newRow.find("td.name").text(participant.name);

newRow.find("contains("phone")").text(participant.homePhone);

两者都不起作用。该脚本克隆并显示行很好，但我有30行“name”和“phone”。

我使用Firebug的console.log进行调试，我确信它是从JSON正确获取数据，加载到“participant”参数中。我做错了什么？

Answer 1

您正在使用标记中不存在的td.name。 .name表示一个类，因此您需要标记为：<td class="name"></td>才能使其生效。

如果您将其用作虚拟行并替换这两个td，我会为<td class="name"></td><td class="phone"></td>提供一个类来使用newRow.find("td.name")或使用类似的内容：newRow.find("td:first")和newRow.find("td:last")

Answer 2

newRow.find("td:contains(name)").text(participant.name);

newRow.find("td:contains(phone)").text(participant.homePhone);

Answer 3

如果我明白你要做什么，第二个版本几乎是正确的。注意选择器前面的冒号和内部单引号的使用。

newRow.find(":contains('name')").text(participant.name);
newRow.find(":contains('phone')").text(participant.homePhone);

更好的是提供模板类并使用它们或仅仅依靠定位。

位：

newRow.find('td:first-child')
      .text(participant.name)
      .next()
      .text(participant.homePhone);

类：

newRow.find( 'td.name' ).text( participant.name );
newRow.find( 'td.phone' ).text( participant.homePhone );

接受这种改变：

<table> 
  <tr> 
    <td class="name">name</td> 
    <td class="phone">phone</td> 
  </tr> 
</table>

Answer 4

find('td.name')会查找td class="name"，但您没有newRow。我建议将其添加到HTML中，以便为jQuery创建一个钩子来更新文本。特别是如果页面上有几个。

另外，您如何设置{{1}}？

用jQuery替换DOM文本

4 个答案: