javascript - 如何根据数组中的数据动态创建表

Question

var arr=["1","2","-3","4","-5","-6","7"]  //  data changes as well arr[] size ;

在这里，场景是，对我来说是动态地在表中创建的。表取决于 arr[] .

1) 创建单行 <tr> <td></td></tr>,其中<td> </td>的数量|取决于 arr[]; 的长度

2)提供style="background-color" to <td> ;

3)对于负数，<td>将在 index of that negative number 创建.

例如:此处 negative number indexes are 3,5,6. 所以，对于负 numbers in arr[] , 创建 <td>在下一行 <tr><td></td></tr>即<td>在 3,5,6 position与 background-color. 在这里，对于 -3,-5,-6 的 arr[]创建 <td>在first row <tr>但不要提供 background-color ;

4)如果arr[]中没有负数，则不创建第二行；

这里，arr[]数据是变化的，所以表应该是动态的。

对于上面的例子，只需要几段代码就可以理解

//length of arr = 7;

<tr>
<td style="background:#ccc">1</td>
<td style="background:#ccc">2</td>
<td style="background:#ccc"></td>
<td style="background:#ccc">4</td>
<td></td>
<td></td>
<td style="background:#ccc">7</td>
</tr>
<tr>
<td></td>
<td></td>
<td style="background:#ccc">-3</td>
<td></td>
<td style="background:#ccc">-5</td>
<td style="background:#ccc">-6</td>
<td></td>
</tr>
    
The above scenario will change according to data. Please help
  

Answer 1

var arr = ["1","2","-3","4","-5","-6","7"];

var table = document.createElement("table"),          // create the table element
    tbody = document.createElement("tbody");          // create the table body element
    
table.appendChild(tbody);                             // add the table body to table

// ### POSITIVE ROW ######################

var tr = document.createElement("tr");                // create the table row element
arr.forEach(function(e) {                             // for each element e in arr
  var td = document.createElement("td");              // create a table cell element
  if(e >= 0) {                                        // if e is positive
    td.textContent = e;                               // then change the text content of this cell to e
    td.style.background = "#ccc";                     // and change the background as well
  }
  tr.appendChild(td);                                 // add the cell to the row (if the number is negative the cell will be empty and without background)
});
tbody.appendChild(tr);                                // add the row to table


//### NEGATIVE ROW ######################

tr = document.createElement("tr");                    // same but for negative numbers ...
arr.forEach(function(e) {
  var td = document.createElement("td");
  if(e < 0) {
    td.textContent = e;
    td.style.background = "#ccc";
  }
  tr.appendChild(td);
});
tbody.appendChild(tr);

document.body.appendChild(table);

您可以将一些代码组合在一个函数中并重用它:

// elt is shortcut for document.createElement
function elt(tag) {
  return document.createElement(tag);
}

// take an array and a condition function conditionFN and return a row of all the element that passed the condition function with a background of #ccc
function makeRow(arr, conditionFN) {
  var tr = elt("tr");
  arr.forEach(function(e) {
    var td = elt("td");
    if (conditionFN(e)) {
      td.textContent = e;
      td.style.background = "#ccc";
    }
    tr.appendChild(td);
  });
  
  return tr;
}

// take an array and return the equivalent table element
function makeTable(arr) {
  var table = elt("table"),
      tbody = elt("tbody");

  table.appendChild(tbody);
  
  tbody.appendChild(makeRow(arr, function(e) { return e >= 0; })); // the condition function only allows positive numbers => positive row
  tbody.appendChild(makeRow(arr, function(e) { return e < 0; }));  // the condition function only allows negative numbers => negative row
  
  return table;
}



document.body.appendChild(makeTable([1, 2, -3, 4, -5, -6, -7, 8, 9, 10]));