Question

从表单中，我使用.html（）在输入字段和jquery中存储了变量中的一些值。我构建了一个这样的表：

var name = $('#name').val();
var age = $('#age').val();

$('table tbody').html('
<tr id="uniqueId">
<td id="name">name</td>
<td id="age">age</td>
</tr>'
)

然后我需要更新表，所以我更改了数据，我再次存储变量中的输入字段值，并使用jquery我尝试用这样的新值替换表：

$('#uniqueId').html('
   <tr id="uniqueId">
   <td id="name">NewName</td>
   <td id="age">NewAge</td>
   </tr>'
)

发生了一件奇怪的事：浏览器中的html没有改变，但是如果我看一下chrome console，html就会改变！我的意思是如果我在控制台中写入$（'＃uniqueId'）它会向我显示更新的html，但如果我在chrome控制台中使用'inspect'，我只能看到旧代码。

再说一次：如果我在控制台中写入$（'＃uniqueId'）。html（'HI'），结果在控制台中是正确的，但浏览器中没有任何变化O_o

发生了什么事？！我试图将新的html代码存储在另一个变量中，然后替换旧的代码，如下所示：

var newCode = 'html code';
$('#uniqueId').html(newCode);

没有结果......有什么想法？

Answer 1

毕竟，uniqueId可能不是那么“独特”。检查整个HTML标记中是否只有一个ID。此外，仅出于测试目的，不要按ID选择，而是按类名选择。如果这样可行，那么你无可否认会有多个“独特”的ID。

Answer 2

我在这里注意到一些问题。

1。您正在为.html(' ... ');使用单引号，并在其中声明ID。将其更改为.html(" ... ")。

2。在第一个代码段中查看这些行...

var name = $('#name').val();
var age = $('#age').val();

<td id="name">name</td>
<td id="age">age</td>

<td>个元素没有.val()属性，应该使用.html()引用。话虽如此，您提到您从输入获取值。如果是这种情况，这是否意味着你有重复的元素ID？

3。查看您的代码段...

$('#uniqueId').html('
   <tr id="uniqueId">
   <td id="name">NewName</td>
   <td id="age">NewAge</td>
   </tr>'
)

这会引起问题。您不仅要将<tr>插入<tr>，还要使用相同的ID。我想你应该这样做......

$('#uniqueId').html('
   <td id="name">NewName</td>
   <td id="age">NewAge</td>'
)

Answer 3

您的javascript代码错误。首先是声明：

$('table tbody').html("<tr id='uniqueId'>" +
"<td id='name'>Name</td>" + 
"<td id='age'>Age</td>" +
"</tr>"
)

然后在功能上：

$('#uniqueId').html("<tr id='uniqueId'> +
   "<td id='name'>NewName</td>" +
   "<td id='age'>NewAge</td>" +
   "</tr>'"
);

chrome控制台中的html与浏览器中的html不同......怎么可能？

3 个答案: