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

Question

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

Here, scenario is, it is to me made in table dynamically.Table depends on arr[] .

1)create a single row <tr> <td></td></tr>, where number of <td> </td> depends upon length of arr[];

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

3)For negative numbers, <td> will be created at index of that negative number .

For eg: here negative number indexes are 3,5,6. So, for negative numbers in arr[] , create <td> in next row <tr><td></td></tr> ie <td> at 3,5,6 position with background-color. Here, for -3,-5,-6 of arr[] create <td> in first row <tr> but dont provide background-color ;

4)If no negative numbers in an arr[], then dont create second row ;

Here, arr[] data is changing, so table should be dynamic.

For above case, just few codes to understand only

//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); 

You can group some of the code in a function and reuse it:

 // 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])); 

Answer 2

Try this code:

 var array=["1","2","-3","4","-5","-6","7"]; //creating table element--------- var table = document.createElement("table"), tbody = document.createElement("tbody"); //append to table--------- table.appendChild(tbody); tbody.innerHTML=getTr(array); //append to document--------- document.body.appendChild(table); //console.log(getTr(arr)); //getting all tr--------- function getTr(arr,color='#ccc'){ var ptd='',ntd =''; for(i=0;i<arr.length;i++){ var std='<td style="background-color:'+color+';">'; ptd += (arr[i]>=0)? std + arr[i]+'</td>':'<td></td>'; ntd += (arr[i]<0)? std + arr[i]+'</td>':'<td></td>'; } return '<tr>'+ptd+'</tr>'+'<tr>'+ntd+'</tr>'; } 

You can see the simplify the code result using function

 //appending table to document------ document.body.appendChild(mktable([1, 2, -3, 4, -5, -6, -7, 8, 9, 10])); //creating table element--------- function mktable(array){ var table = document.createElement("table"), tbody = document.createElement("tbody"); tbody.innerHTML=getTr(array); table.appendChild(tbody); return table; } //getting all tr--------- function getTr(arr,color='#ccc'){ var ptd='',ntd =''; for(i=0;i<arr.length;i++){ var std='<td style="background-color:'+color+';">'; ptd += (arr[i]>=0)? std + arr[i]+'</td>':'<td></td>'; ntd += (arr[i]<0)? std + arr[i]+'</td>':'<td></td>'; } return '<tr>'+ptd+'</tr>'+'<tr>'+ntd+'</tr>'; } 

Note: This is simple and light-weight

Answer 3

Using recursive function and table.inertRow() and row.insertCell()

 var data = ["1", "2", "-3", "4", "-5", "-6", "7"]; var table = document.getElementById('myTable') function plusMinusRows(arr, rowNum) { var row = table.insertRow(); arr.map(Number).forEach(function(num) { var value = !rowNum ? (num >= 0 ? num : '') : (num < 0 ? num : ''); var cell = row.insertCell(); cell.textContent = value; cell.style.background = value !== '' ? '#cccccc' : ''; }); // call function again when rowNum not defined !rowNum && plusMinusRows(arr, 2); } // initialize 2 rows plusMinusRows(data); 

 <table id="myTable"></table>