我有一张表格如下：
<p>
<table id="modTable">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Points</th>
<th>Deaths</th>
<th>Attended?</th>
</tr>
</thead>
<tbody>
<tr>
<td>user1</td>
<td><select name="eventRole">
<option value="referee" selected="selected">Referee</option>
<option value="assRef">Ass Ref</option>
<option value="player">Player</option>
<option value="monster">Monster</option></select></td>
<td><input type="text" name="eventPoints" maxlength="2" size="2" value="36"></td>
<td></td>
<td><input type="checkbox" name="attended" checked></td>
</tr>
<tr>
<td>user2</td>
<td><select name="eventRole">
<option value="referee">Referee</option>
<option value="assRef">Ass Ref</option>
<option value="player" selected="selected">Player</option>
<option value="monster">Monster</option></select></td>
<td><input type="text" name="eventPoints" maxlength="2" size="2" value="36"></td>
<td><input type="text" name="eventDeaths" maxlength="1" size="1" value="0"></td>
<td><input type="checkbox" name="attended" checked></td>
</tr>
</tbody>
</table>
</p></form><div id="addrows">ADD NEW</div>
一段JQuery在表中添加了一行新内容，如下所示：
$(function() {$("#addrows").click(function(){
$("#modTable").append("<tr> <td><select name="username"><option value="112">3rd spearman</option><option value="40">Alex</option><option value="157">alex.kynoch</option><option value="23">AndyK</option><option value="181">AndyL</option><option value="27">AndyMc</option></select></td><td><select name="eventRole"><option value="referee">Referee</option><option value="assRef">Ass Ref</option><option value="player">Player</option><option value="monster">Monster</option></select></td><td><input type="text" name="eventPoints" maxlength="2"></td><td><input type="text" name="eventDeaths" maxlength="1"></td><td><input type="checkbox" name="attended" checked></td> </tr>")
});
});
一切正常，当你单击“添加新”时会出现一个新行，但是，新表单字段格式不正确 - 复选框不是复选框，我似乎无法格式化任何字段使用其属性（例如size =“2”）
我猜这是因为我在JQuery中使用的HTML实体来逃避双引号，但是如果我使用ACTUAL双引号那么它就会阻止JQuery运行......任何人都可以建议我如何可以使这项工作，因为我走到了尽头！
答案 0 :(得分：4)
如果您直接在HTML中输入此内容：
<input type="checkbox" name="attended" checked>
...您希望浏览器正确解析它吗？您不使用实体作为属性值周围的引号。而且你没有使用传递jQuery的HTML。
如果您想在双引号JavaScript字符串中使用双引号，请使用反斜杠：
var foo = "I'm in a double-quoted string, \"and this part is in double quotes\"";
或者，当然，使用单引号字符串并转义单引号：
var foo = 'I\'m in a single-quoted string, "and this part is in double quotes"';
旁注：如果您发现JavaScript代码中的字符串中包含大量HTML，请考虑使用模板引擎或新的template元素，这样您就可以在标记编辑器/设计器中创建标记比你的JavaScript代码编辑器。如果你有重复的 HTML（一次在你的HTML中，然后再在你的JavaScript中），特别，你真的不想把HTML放在代码中，因为他们会失去同步。例如，在对问题的评论中，你说你在this fiddle中使用反斜杠转义引号时“仍然”没有得到你的预期。这个小提琴的主要问题是代码中的HTML与HTML中的HTML不一样;您已将size属性从文本输入中删除（至少）。当然，代码中的HTML不是完全相同（你有一个选择而不是直接的文本），但这样的差异可以很容易地处理。
附注2：另一个问题是，当您要将table元素附加到tbody元素时，您要向其追加行。
附注3：在table元素中包含p元素无效; p元素can contain phrasing content，但table元素are flow content。
这是一个不重复HTML的例子; current数组可以通过服务器端动态脚本呈现输出，也可以通过ajax：
$(function() {
// Current data
var current = [
{
name: "user1",
role: "referee",
points: 36,
deaths: null,
attended: true
},
{
name: "user2",
role: "player",
points: 36,
deaths: 0,
attended: true
}
];
// Get the table body
var tbody = $("#modTable tbody");
// Get our row model and remove it
var rowModel = tbody.find("tr").remove();
// Show the current entries
current.forEach(function(entry) {
addRow(entry);
});
// Let the user add more
$("#addrows").click(function() {
addRow();
});
function addRow(entry) {
// Clone our model
var row = rowModel.clone();
// If we have an entry, fill it in
if (entry) {
// Replace the select with the name
row.find("select[name=username]").closest("td").text(entry.name);
// Fill in fields
row.find("select[name=eventRole]").val(entry.role);
if (entry.points === null) {
row.find("input[name=eventPoints]").remove();
} else {
row.find("input[name=eventPoints]").val(entry.points);
}
if (entry.deaths === null) {
row.find("input[name=eventDeaths]").remove();
} else {
row.find("input[name=eventDeaths]").val(entry.deaths);
}
row.find("input[name=attended]").prop(entry.attended);
}
// Add it
tbody.append(row);
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
<table id="modTable">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th>Points</th>
<th>Deaths</th>
<th>Attended?</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="username">
<option value="112">3rd spearman</option>
<option value="40">Alex</option>
<option value="157">alex.kynoch</option>
<option value="23">AndyK</option>
<option value="181">AndyL</option>
<option value="27">AndyMc</option>
</select>
</td>
<td>
<select name="eventRole">
<option value="referee">Referee</option>
<option value="assRef">Ass Ref</option>
<option value="player">Player</option>
<option value="monster">Monster</option>
</select>
</td>
<td>
<input type="text" name="eventPoints" maxlength="2" size="2" value="0">
</td>
<td>
<input type="text" name="eventDeaths" maxlength="1" size="1" value="0">
</td>
<td>
<input type="checkbox" name="attended">
</td>
</tr>
</tbody>
</table>
</p>
<div id="addrows">ADD NEW</div>