首页 > 解决方案 > 将 JavaScript 中的数据反向属性添加到动态 HTML 表

问题描述

我正在动态创建一个 HTML 表格,并且我希望标题包含 data-reverse 属性,以便通过推送表格标题来允许反向排序:

<table>
  <thead>
    <tr>
      <th data-reverse="true">Name</th>
      <th data-reverse="true">Surname</th>
      <th data-reverse="true">Age</th</tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>62</td>
    </tr>
    <tr>
      <td>Dylan</td>
      <td>Jones</td>
      <td>37</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Shearer</td>
      <td>55</td>
    </tr>
    <tr>
      <td>Ringo</td>
      <td>Starr</td>
      <td>52</td>
    </tr>
  </tbody>
</table>

代码片段如下。我想知道应该在函数中更正什么才能产生带有属性addRow()的上述输出?data-reverse="true"或者别的地方。

addRow(thead, "th");
    fragment.appendChild(thead);

function addRow(dom, tag) {
    for(j=1;j<rowArray.length;j++){
    var el = doc.createElement(tag);
    el.setAttribute(data-reverse,"true");
    el.innerHTML = rowArray[j];
    tr.appendChild(el);
    dom.appendChild(tr);
        }
    }

标签: javascriptsortingdynamicreverse

解决方案


推荐阅读