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

问题

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.

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.

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]];
  }
}

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

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>

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>

回答1:

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>

回答2:

You can use classList.add method to add css class to HTML element as follows:

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]];
    }    
  }

来源：https://stackoverflow.com/questions/57322097/how-do-i-insert-certain-values-of-an-array-as-a-css-style-property-for-a-td-in

标签

javascript