javascript - 如何在动态表中插入数组的某些值作为 的 CSS 样式属性？

Question

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

我现有的脚本将数组中的所有值插入到每个表格单元格中。目的是在表格呈现期间将 Font Awesome 样式值作为单元格样式插入。

在下面的代码中，请注意 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> 的样式插入到表格中列？

在我的现有代码生成的 HTML 表格下方找到:

<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 样式成功生效，需要将其插入 <td> </td>作为类(class)风格。因此，所需的效果如下所示:

<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

在嵌套的 for 循环中，您可以根据 keys[b] 的当前值进行区分。如果是 paymentStatus 添加 <i>标记带有很棒的感叹号字体的 css，并使用单元格的 .innerHTML 属性。如果是其他内容，只需将适当的文本分配给 .innerText 属性即可。

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>