¿Cómo convierto una cadena HTML en una tabla?

Question

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.

javascript html string flask html-table

0

Elliptica 30 oct. 2019 a las 05:50

Answer 1

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

Answer 2

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

Answer 3

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

¿Cómo convierto una cadena HTML en una tabla?

3 respuestas

Nuevas preguntas

javascript