Question

我有一个存储为字符串的表主体对象。我尝试使用javascript将HTML表设置为该字符串，如下所示（{{}}是因为我正在使用Flask来获取字符串）：

方法1：

document.getElementsByTagName("tbody")[0].outerHTML= "{{tbody_string }}";

方法2：

document.getElementsByTagName("table")[0].outerHTML = '<table>' + "{{tbody_string }}" + '</table>'

方法3：

document.getElementsByTagName("table")[0].innerHTML = "{{tbody_string}}";

这些都不起作用。而是创建该表并将其存储为tbody_string作为实际文本内容，而不是将其视为html。我已经将这类结构和flask变量与其他HTML元素（例如input）一起使用，并且工作正常，但似乎不适用于表。有想法吗？

其他信息：

字符串如下：

'<tbody> <tr> <td>Name</td> <td> <input type="text" name="parameters_name" id="name" class="form-control"> </td> </tr> </tbody>'

此处简单地显示了引号，以表明它是一个字符串。

Answer 1

这是表格的javascript代码

var body = document.getElementsByTagName("body")[0];
 
 
  var ourTable     = document.createElement("table");
  var ourTableBody = document.createElement("tbody");
 
 
  for (var i = 0; i < 4; i++) {
 
    var row = document.createElement("tr");
 
    for (var j = 0; j <2; j++) {
 
 
      var cell = document.createElement("td");
      var cellText = document.createTextNode("cell in row "+i+", column "+j);
      cell.appendChild(cellText);
      row.appendChild(cell);
    }
 
 
    ourTableBody.appendChild(row);
  }
 
 
  ourTable.appendChild(ourTableBody);
 
  body.appendChild(ourTable);
 
  ourTable.setAttribute("border", "2");

Answer 2

如果您的表主体对象存储为字符串（又名tbody_string）是类似于tbody_string = "<table><tr><th>table</th></td></table>"

的字符串

方法3应该可以正常工作

<html>
    <body>
        <table>
            <tr>
                <th>Replace this table</th>
            </tr>
        </table>
    </body>
    <script lang="javascript">
        const tbody_string = `
            <table>
                <tr>
                    <th>Table</th>
                </tr>
                <tr>
                    <td>this is replaced table</td>
                </tr>
            </table>`;
        document.getElementsByTagName('table')[0].innerHTML = tbody_string;       
    </script>
</html>

但是，如果您的tbody_string不是HTML标记文本，而是其他内容。您需要以某种方式将其转换为HTML作为文本。如果它是DOM元素对象，则下面的代码应该起作用：

document.getElementsByTagName('table')[0].innerHTML = table_dom.innerHTML

Answer 3

在使用{{tbody_string}}渲染HTML时，Jinga2可能会将其转义。您可以告诉它不要使用{{tbody_string|safe}}。

最终，您可以完全摆脱“ javascript方式”，而直接使用Jinja2进行渲染。

还...请注意，如果您的tbody_string中有任何用户可编辑的数据，则需要采取必要的预防措施，以避免造成安全漏洞。

如何将HTML字符串转换为表格？

3 个答案: