How Do I Convert an HTML String to a Table?
Question
I have a table body object stored as a string. I've tried setting an HTML table using javascript to be that string as follows (the {{}} are because I'm using Flask to get the string):
Way 1:
document.getElementsByTagName("tbody")[0].outerHTML= "{{tbody_string }}";
Way 2:
document.getElementsByTagName("table")[0].outerHTML = '<table>' + "{{tbody_string }}" + '</table>'
Way 3:
document.getElementsByTagName("table")[0].innerHTML = "{{tbody_string}}";
None of these is working. Instead, the table is created and is storing tbody_string as actual text content instead of treating it as html. I've used these sort of structures and flask variables with other HTML elements such as input and it works fine, but it's not seeming to work with table. Thoughts?
Extra Info:
The string looks like this:
'<tbody> <tr> <td>Name</td> <td> <input type="text" name="parameters_name" id="name" class="form-control"> </td> </tr> </tbody>'
The outer quotes are simply shown here to indicate it's a string.
3 answers
solution1
0 2019-10-30 03:39:33
Here is javascript code for table
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");
solution2
0 2019-10-30 03:48:59
If your table body object stored as a string (aka tbody_string ) is a string that goes something like tbody_string = "<table><tr><th>table</th></td></table>"
Way 3 should work fine
<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>
However, if your tbody_string isn't HTML markup text but something else. you'll need to convert it to HTML as text somehow. if it's a DOM element object, the following code should work:
document.getElementsByTagName('table')[0].innerHTML = table_dom.innerHTML
solution3
0 ACCPTED 2019-10-30 13:43:06
Jinga2 is probably escaping your html when you render it with {{tbody_string}} . You can tell it not to do that with {{tbody_string|safe}} .
Ultimately you can get rid of your "javascript ways" entirely and just render it directly with Jinja2.
Also...please note that if there is any user editable data in your tbody_string , you'll want to take the necessary precautions to avoid creating a security loophole.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.