如何将数组的某些值作为< td>的CSS样式属性插入在动态表中？ [英] How do I insert certain values of an array as a CSS style property for a <td> in a dynamic table?

问题描述

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

I have a script that collects data from an array and uses these to generate a dynamic table. Some of these values in the array are Font Awesome styles.

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

My existing script inserts all the values in the array into each table cell. The intention is for the Font Awesome style values to be inserted as a cell style, during the rendering of the table.

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

In the code below, notice that the array properties for paymentStatus stores a CSS Font Awesome style value.

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> 列的样式插入表格中的strong>值？

How do I get the paymentStatus values to get inserted into the table as the style for each <th>Status</th> column?

在我现有代码生成的HTML表下面找到：

Find below the HTML table that my existing code geneates:

<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> 作为类样式。
因此，所需的效果如下所示：

For the Font Awesome style to successfully be put in effect, it needs to be inserted into the <td> </td> as a class style. The desired effect would, therefore, look like this:

<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>

推荐答案

在嵌套的for循环中，您可以区分基于键[b] 的当前值。如果它是 paymentStatus ，请添加带有CSS的< i> 标记，并带有字体，并使用 .innerHTML 单元格的属性。如果还有其他问题，只需将适当的文本分配给 .innerText 属性。

Inside the nested for-loop you can make a distinction based on the current value of keys[b]. If it's paymentStatus add an <i> tag with the css for the font awesome exclamation mark and use the .innerHTML property of the cell. If it's something else just assign the appropriate text to the .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>

这篇关于如何将数组的某些值作为< td>的CSS样式属性插入在动态表中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！