将内容分配给特定的 th 元素

Question

有没有办法将内容作为 td 元素传递给特定的 th 元素？ 我有一个动态表格，需要在正确的表格标题下分配内容。

我已经为表格的行添加了分页。所有的 td-都分配给“Ref.”（见附图）。但我需要在“分数”下分配{{score}}，在“标题”下分配黑色部分

<table class="table table-hover">
    <thead id="header">
        <tr id="tableHead">
            <th>Ref.</th>
            <th>Score</th>
            <th>Title</th>
        </tr>
    </thead>

    <tbody style="width: 100%">
        {% for i in range (0,numofresults) %}
        <tr id="cardmb3n{{i}}">
            <td id="ref{{i}}"> </td>
            <td id="score{{i}}"> </td>
            <td>
                <div>
                    <a id="header{{i}}" href="" </a> 
                    <br>
                    <a id="hyperlink{{i}}" href="" target=_blank </a> 
                </div> 
            </td> 
        </tr> 
    </tbody> 
    {% endfor %}                            
</table>

Answer 1

我希望你正在寻找这个。

我假设您拥有动态 JSON 格式的数据。

var data = [
  {
    "score": 86,
    "ref": "desc 021",
    "title": "021"
  },
  {
    "score": 72,
    "title": "022",
    "ref": "desc 022"
  }
];


function addTable() {

  var myTableDiv = document.getElementById("myTable");
  myTableDiv.innerHTML = "";

  var table = document.createElement('TABLE');
  table.border = '1';

  var tableHeader = document.createElement('THEAD');
  table.appendChild(tableHeader);

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  var n = data.length;
  var m = 0;
  var thKeys;
  if (n > 0) {
    thKeys = Object.keys(data[0]);
    m = thKeys.length;
  }

  var tr = document.createElement('TR');
  tableBody.appendChild(tr);

  for (var j = 0; j < m; j++) {
    var td = document.createElement('TD');
    td.width = '75';
    td.innerText = thKeys[j];
    tr.appendChild(td);
  }


  for (var i = 0; i < n; i++) {
    tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var j = 0; j < m; j++) {
      var td = document.createElement('TD');
      td.width = '75';
      td.innerText = data[i][thKeys[j]];
      tr.appendChild(td);
    }
  }

  myTableDiv.appendChild(table);

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="addTable()">add table</button>

<div id="myTable"></div>

如果你给我确切的数据，我会为它做出改变。