Как я могу преобразовать строку HTML в таблицу? - PullRequest
Новая
       21

Как я могу преобразовать строку HTML в таблицу?

0 голосов
/ 30 октября 2019

У меня есть объект тела таблицы, хранящийся в виде строки. Я попытался установить HTML-таблицу, используя javascript, чтобы эта строка была следующей ({{}} потому что я использую Flask для получения строки):

Путь 1: 

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

Способ 2: 

document.getElementsByTagName("table")[0].outerHTML = '<table>' + "{{tbody_string }}" + '</table>'

Способ 3: 

document.getElementsByTagName("table")[0].innerHTML = "{{tbody_string}}";

Ничего из этого не работает. Вместо этого таблица создается и сохраняет tbody_string как фактическое текстовое содержимое, а не обрабатывает его как html. Я использовал такого рода структуры и переменные фляги с другими элементами HTML, такими как input, и он отлично работает, но, похоже, не работает с таблицей. Мысли?

Дополнительная информация:

Строка выглядит следующим образом:

'<tbody> <tr> <td>Name</td> <td> <input type="text" name="parameters_name" id="name" class="form-control"> </td> </tr> </tbody>'

Внешние кавычки просто показаны здесь, чтобы указать, что это строка.

Ответы [ 3 ]

0 голосов
/ 30 октября 2019

Если ваш объект тела таблицы, хранящийся в виде строки (он же 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, должен работать следующий код:

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

0 голосов
/ 30 октября 2019

Jinga2, вероятно, экранирует ваш html, когда вы отображаете его с помощью {{tbody_string}}. Вы можете запретить делать это с {{tbody_string|safe}}.

В конечном итоге вы можете полностью избавиться от своих «путей javascript» и просто сделать это напрямую с помощью Jinja2.

Также ... пожалуйстаобратите внимание, что если в вашем tbody_string есть какие-либо данные, редактируемые пользователем, вы должны принять необходимые меры предосторожности, чтобы избежать создания лазейки безопасности.

0 голосов
/ 30 октября 2019

Вот код 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");
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...