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

Question

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

方式一：

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

方式二：

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

如果您的表体 object 存储为字符串（又名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 元素 object，下面的代码应该可以工作：

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

Answer 3

当您使用{{tbody_string}}渲染它时，Jinga2 可能是 escaping 您的 html 。 你可以用{{tbody_string|safe}}告诉它不要这样做。

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

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

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

问题描述

3 个解决方案

解决方案1
0 2019-10-30 03:39:33

解决方案2
0 2019-10-30 03:48:59

解决方案3
0 已采纳 2019-10-30 13:43:06

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

问题描述

3 个解决方案

解决方案1 0 2019-10-30 03:39:33

解决方案2 0 2019-10-30 03:48:59

解决方案3 0 已采纳 2019-10-30 13:43:06

解决方案1
0 2019-10-30 03:39:33

解决方案2
0 2019-10-30 03:48:59

解决方案3
0 已采纳 2019-10-30 13:43:06