Javascript生成带有一些html标记的表，作为某些列的一部分

我正在尝试使用java脚本根据从服务器发送的数据生成一个表

以下是HTML代码：

<form role="form" method="post" action="updatePCRAnalysis" name="datafixfrm">
 <div class="table-responsive">
 <table id="tabledata" class="table table-bordered table-striped table-condensed">
  <thead>
   <tr>
    {% for d in description %}
     <td> <b>{{ d[0].decode('utf-8') }} </b> </td>
    {% endfor %}
    <td> <b> Investigator </b> </td>
    <td> <b> Remarks </b> </td>
    <td> <b> Status </b> </td>
    <td> <b> Submit </b> </td>
   </tr>
  </thead>
  <tbody>
   <script>addBody({{dataList}})</script>
  </tbody>
 </table>
 </div>
</form>

我认为这可能是由于非UTF-8数据造成的，因此我添加了一个函数来将值转换为urf-8格式，并将原始函数中的部分更改为“cell.textContent=decode_utf8（dataList[I][j]）；”

更新日期：2016年3月3日

已更新函数调用的参数：

    <script>
      addBody({{dataList|tojson|safe}});
    </script>

addBody（{{dataList | tojson | safe}}）；

将tbody和cell.textContent的变量赋值更新为cell.innerHTML：

    function addBody(dataList){
      var tbody = document.getElementById('tabledata').getElementsByTagName("tbody")[0];
      ...
      ...
      var cell1 = document.createElement('td');
      cell1.innerHTML = '<input class="form-control" name="investigator" type="textfield">';
      row.appendChild(cell1);
      var cell2 = document.createElement('td');
      cell2.innerHTML = '<td> <input class="form-control" name="remarks" type="textfield"> </td>';
      row.appendChild(cell2);
      var cell3 = document.createElement('td');
      cell3.innerHTML = '<select name="flag"> <option value="N">New</option> <option value="X">Exclude</option> <option value="D">Raise Defect</option> </select>';
      row.appendChild(cell3);
      var cell4 = document.createElement('td');
      cell4.innerHTML = '<button class="btn btn-primary" name="submit" value="submit">Submit</button>';
      row.appendChild(cell4);
      tbody.appendChild(row);
      ...
      ...
    }

函数addBody（数据列表）{
var tbody=document.getElementById（'tabledata'）.getElementsByTagName（“tbody”）[0]；
...
...
var cell1=document.createElement（'td'）；
cell1.innerHTML=''；
行。追加子行（单元格1）；
var cell2=document.createElement（'td'）；
cell2.innerHTML=''；
第2行为子行（第2单元格）；
var cell3=document.createElement（'td'）；
cell3.innerHTML='New Exclude Raise Defect'；
第3行为子行（第3单元格）；
var cell4=document.createElement（'td'）；
cell4.innerHTML='Submit'；
第4行为子行（第4单元格）；
tbody.appendChild（世界其他地区）；
...
...
}

您有哪些具体问题？数据没有显示在表中。为什么不显示？您的Flask应用程序中的

dataList

是否存在问题？（你还没有分享你的观点，所以谁知道它在做什么。）

addBody

中是否有JavaScript错误？谢谢你的回复。我已经更新了我的问题，让它更清晰。你确定

dataList

的呈现方式符合你的预期吗？您可能需要转义数据，例如，

{{{dataList | tojson | safe}}

。

    function decode_utf8(s) {
      return decodeURIComponent(escape(s));
    }

    <script>
      addBody({{dataList|tojson|safe}});
    </script>

    function addBody(dataList){
      var tbody = document.getElementById('tabledata').getElementsByTagName("tbody")[0];
      ...
      ...
      var cell1 = document.createElement('td');
      cell1.innerHTML = '<input class="form-control" name="investigator" type="textfield">';
      row.appendChild(cell1);
      var cell2 = document.createElement('td');
      cell2.innerHTML = '<td> <input class="form-control" name="remarks" type="textfield"> </td>';
      row.appendChild(cell2);
      var cell3 = document.createElement('td');
      cell3.innerHTML = '<select name="flag"> <option value="N">New</option> <option value="X">Exclude</option> <option value="D">Raise Defect</option> </select>';
      row.appendChild(cell3);
      var cell4 = document.createElement('td');
      cell4.innerHTML = '<button class="btn btn-primary" name="submit" value="submit">Submit</button>';
      row.appendChild(cell4);
      tbody.appendChild(row);
      ...
      ...
    }