0

我正在尝试使用 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>

用于澄清的屏幕截图

Javascript 忽略字符串中的 td- 和 tr-tags

4

3 回答 3

3

使用内联事件处理程序通常不是一个好主意。

您不能将表行添加到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>

于 2020-06-06T15:32:12.697 回答
1

您正在将基于单元格的元素插入 div，这不是有效的 html。添加 atbody thead并将您插入的 id 添加到tbody

于 2020-06-06T15:21:54.950 回答
1

只需删除 div 并将 id="AddCamera" 放在桌子上。您以错误的方式插入 td tr 。

编辑：实际添加具有该 ID 的 tbody，这将为您提供正确的 HTML 语法

<tbody id="AddCamera">


<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>
<tbody id="AddCamera">
	
</tbody>
</table>

于 2020-06-06T15:27:48.053 回答