Tengo un objeto de cuerpo de tabla almacenado como una cadena. Intenté configurar una tabla HTML usando javascript para que sea esa cadena de la siguiente manera (las {{}} son porque estoy usando Flask para obtener la cadena):
Camino 1:
document.getElementsByTagName("tbody")[0].outerHTML= "{{tbody_string }}";
Camino 2:
document.getElementsByTagName("table")[0].outerHTML = '<table>' + "{{tbody_string }}" + '</table>'
Camino 3:
document.getElementsByTagName("table")[0].innerHTML = "{{tbody_string}}";
Ninguno de estos está funcionando. En cambio, la tabla se crea y almacena tbody_string
como contenido de texto real en lugar de tratarla como html. He usado este tipo de estructuras y variables de matraz con otros elementos HTML como input
y funciona bien, pero no parece funcionar con la tabla. Pensamientos?
Información extra:
La cadena se ve así:
'<tbody> <tr> <td>Name</td> <td> <input type="text" name="parameters_name" id="name" class="form-control"> </td> </tr> </tbody>'
Las comillas externas simplemente se muestran aquí para indicar que es una cadena.
3 respuestas
Jinja2 probablemente está escapando de su html cuando lo renderiza con {{tbody_string}}
. Puede decirle que no haga eso con {{tbody_string|safe}}
.
En última instancia, puede deshacerse de sus "formas de javascript" por completo y renderizarlas directamente con Jinja2.
Además ... tenga en cuenta que si hay datos editables por el usuario en su tbody_string
, deberá tomar las precauciones necesarias para evitar crear un vacío de seguridad.
Aquí está el código de JavaScript para la tabla
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");
Si su objeto de cuerpo de tabla almacenado como una cadena (también conocido como tbody_string
) es una cadena que se parece a tbody_string = "<table><tr><th>table</th></td></table>"
Way 3 debería funcionar bien
<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>
Sin embargo, si su tbody_string no es texto de marcado HTML sino algo más. necesitará convertirlo a HTML como texto de alguna manera. si es un objeto de elemento DOM, el siguiente código debería funcionar:
document.getElementsByTagName('table')[0].innerHTML = table_dom.innerHTML
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.