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.

0
Elliptica 30 oct. 2019 a las 05:50

3 respuestas

La mejor respuesta

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.

0
noslenkwah 30 oct. 2019 a las 13:43

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");
0
Jone Milka 30 oct. 2019 a las 03:39

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

0
Plus Pingya 30 oct. 2019 a las 03:48