如何在动态 table 中将数组的某些值作为 CSS 样式属性插入 <td>？

Question

我有一个从数组中收集数据并使用这些数据生成动态 table 的脚本。数组中的某些值是 Font Awesome 样式。

我现有的脚本将数组中的所有值插入到每个 table 单元格中。目的是 Font Awesome 样式值在 table.

的呈现期间作为单元格样式插入

在下面的代码中，请注意 paymentStatus 的数组属性存储了一个 CSS Font Awesome 样式值。

var array = [{
  amount: 12,
  payersNumber: 1245,
  paymentStatus: class="fas fa-exclamation-triangle"
}];

table = document.getElementById("table");

var currentTransaction;
var keys = ["payersNumber", "amount", "paymentStatus"];
for (var i = 0; i < array.length; i++) {
  console.log("Number of transactions: " + array.length);
  var newRow = table.insertRow(table.length);

  currentTransaction = array[i];
  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerText = currentTransaction[keys[b]];
  }
}

如何将 paymentStatus 值作为每个 <th>Status</th> 列的样式插入到 table 中？

在我现有代码生成的 HTML table 下方找到：

<table id="table" border="1">
  <tr>
    <th>Amount</th>
    <th>Number</th>
    <th>Status</th>
  </tr>
</table>

<tr>
  <td> 12 </td>
  <td> 1245 </td>
  <td> class="fas fa-exclamation-triangle" </td>
</tr>

要使Font Awesome样式成功生效，需要将其作为class样式插入到<td> </td>中。因此，所需的效果将如下所示：

<table id="table" border="1">
  <tr>
    <th>Amount</th>
    <th>Number</th>
    <th>Status</th>
  </tr>

  <tr>
    <td>12</td>
    <td>1245</td>
    <td class="fas fa-exclamation-triangle"></td>
  </tr>
</table>

Answer 1

您可以使用 classList.add 方法将 css class 添加到 HTML 元素，如下所示：

for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    if (keys[b] == 'paymentStatus') {
        let className = '';
        // it is assumed that paymentStatus value format is consistent
        const classNameArr = currentTransaction[keys[b]].split('=');
        if (classNameArr.length === 2) {
            className = classNameArr[1];
            cell.classList.add(className);
        }
    } else {
        cell.innerText = currentTransaction[keys[b]];
    }    
  }

Answer 2

在嵌套的for循环中可以根据keys[b]的当前值进行区分。如果它是 paymentStatus 添加带有 css 的 <i> 标签作为 font awesome 感叹号并使用 .innerHTML 属性的单元格。如果是其他原因，只需将适当的文本分配给 .innerText proeprty.

var array = [{
  amount: 12,
  payersNumber: 1245,
  paymentStatus: "okay"
}, {
  amount: 24,
  payersNumber: 3345,
  paymentStatus: "okay"
}, {
  amount: 45,
  payersNumber: 4534,
  paymentStatus: "not okay"
}];

table = document.getElementById("table");

var currentTransaction;
var keys = ["payersNumber", "amount", "paymentStatus"];
for (var i = 0; i < array.length; i++) {
  
  var newRow = table.insertRow(table.length);

  currentTransaction = array[i];
  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    if (keys[b] == "paymentStatus") {
      cell.innerHTML = "<i class='fas fa-exclamation-triangle'></i>" + currentTransaction[keys[b]];
    } else {
      cell.innerText = currentTransaction[keys[b]];
    }
  }
}

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css">

  <table id="table" border="1">
    <tr>
      <th>Number</th>
      <th>Amount</th>
      <th>Status</th>
    </tr>
  </table>

如何在动态 table 中将数组的某些值作为 CSS 样式属性插入 <td>？

How do I insert certain values of an array as a CSS style property for a <td> in a dynamic table?

html

javascript

arrays

css-tables

如何在动态 table 中将数组的某些值作为 CSS 样式 属性 插入 <td>？

How do I insert certain values of an array as a CSS style property for a <td> in a dynamic table?

html

javascript

arrays

css-tables

如何在动态 table 中将数组的某些值作为 CSS 样式属性插入 <td>？