javascript - JavaScript 不会在字符串中包含 tr- 和 td-tags
问题描述
我正在尝试使用 javascript将 a<tr>
和 a插入到表中。<td>
我有一个相当简单的 javascript 代码,每次单击按钮时都会打印一个字符串。它被打印成<table>
,但 javascript 忽略了<tr>
and<td>
标签。
如何使 Javascript 包含<tr>
和<td>
标记?我已经尝试过以各种方式转义字符串。
使用的代码:
<script>
function MoreCameras() {
document.getElementById("AddCamera").innerHTML += "<tr><td><input type='text' name='SSIDSetup[]' class='form-control' placeholder='Camera SSID'></td><td><input type='text' name='NameSetup[]' class='form-control' placeholder='Camera Name'></td><td><input type='password' name='PasswordSetup[]' class='form-control' placeholder='Camera Password'></td><td><input type='checkbox' name='EnabledSetup[]'/></td></tr>";
}
</script>
<button onclick="MoreCameras()">Try it</button>
<table>
<div id="AddCamera">
</div>
</table>
用于澄清的屏幕截图
解决方案
使用内联事件处理程序通常不是一个好主意。
您不能将表行添加到div
. 这是一个使用事件委托并将 添加innerHTML
到表中的片段。使用 DOM 脚本创建行可能更合适,参见MDN。为该片段添加了一个函数。
看到用于将文本插入网页的 innerHTML 并不少见。这有可能成为网站上的攻击媒介,从而产生潜在的安全风险。
document.addEventListener("click", MoreCameras);
function MoreCameras(evt) {
if (evt.target.id === "ih") {
document.querySelector("#AddCamera").innerHTML += getRowHtml();
}
if (evt.target.id === "ds") {
document.querySelector("#AddCamera").appendChild(createRow());
}
}
function createRow() {
const row = document.createElement("tr");
const cells = [...Array(4)].map(td => document.createElement("td"));
const inputs = [...Array(4)].map(input => document.createElement("input"));
inputs[0].type = "text";
inputs[0].name = "SSIDSetup[]";
inputs[0].classList.add("form-control");
inputs[0].setAttribute("placeholder", "Camera SSID");
inputs[1].type = "text";
inputs[1].name = "NameSetup[]";
inputs[1].classList.add("form-control");
inputs[1].setAttribute("placeholder", "Camera Name");
inputs[2].type = "password";
inputs[2].name = "PasswordSetup[]";
inputs[2].classList.add("form-control");
inputs[2].setAttribute("placeholder", "Camera Password");
inputs[3].type = "checkbox";
inputs[3].name = "EnabledSetup[]";
cells.forEach((cell, i) => {
cell.appendChild(inputs[i]);
row.appendChild(cell);
});
return row;
}
function getRowHtml() {
return `
<tr>
<td>
<input
type="text"
name="SSIDSetup[]"
class="form-control"
placeholder="Camera SSID">
</td>
<td>
<input
type="text"
name="NameSetup[]
class="form-control"
placeholder="Camera Name">
</td>
<td>
<input
type="password"
name="PasswordSetup[]"
class="form-control"
placeholder="Camera Password">
</td>
<td>
<input
type="checkbox"
name="EnabledSetup[]">
</td>
</tr>`;
}
<button id="ih">Try it (innerHTML)</button>
<button id="ds">Try it (DOM scripting)</button>
<table>
<tbody id="AddCamera"></tbody>
</tabe>
推荐阅读
- javascript - UserManager OIDC 客户端
- regex - 当字符串包含撇号时如何用另一个字符串替换字符串?
- jmeter - Jmeter:套件中的某些请求出现 502 bad gateway 错误
- python - python xml不会解析
- bash - 7zip 7z 如何在 Linux 中排除文件和文件夹
- python - 从 Python 中的 AMPL 问题中提取函数的值及其梯度
- mysql - 使用 JavaFX 从 MYSQL 数据库向表中添加新用户不起作用
- javascript - STOMP Spring Boot 客户端 ReferenceError:未定义 SockJS
- spring - Spring Boot 健康端点
- c - 如果第一个输入为空,如何在不退出的情况下再次获取用户输入