How to make dynamic table row by jquery.each function

Question

I want to create dynamic table row from a string variable like below:

var c = apple,mango,jackfruit,guava,orange;
var arr = c.split(',');
var trval='<tr>';
$.each(arr,function(index,value){
      trval = trval+'<td>'+value+'</td>';
});
trval = trval+'</tr>';

The above example works well and creates following table row:

<tr>
    <td>apple</td>
    <td>mango</td>
    <td>jackfruit</td>
    <td>guava</td>
    <td>orange</td>
</tr>

But if any table cell needs a special mark-up such as needs to be red then the table row should be:

<tr>
    <td>apple</td>
    <td style="color:red">mango</td>
    <td>jackfruit</td>
    <td>guava</td>
    <td>orange</td>
</tr>

Then the array should be:

var c = apple,["style='color:red'","mango"],jackfruit,guava,orange;

Here the style='color:red' is optional. i.e it may be or may not be there. So, I have to iterate the var c in such way that it will search if individual value in arr is a variable. If it is variable, then it will iterate that array (in this case, ["style='color:red'","mango"] to create that table cell and its optional mark-up. This optional array in the string is dynamic and it could be for any element of the string or even none for those element.

How to make the jquery.each code in that case?

Ram Segev · Answer 1 · 2017-02-26T10:00:37.657

Add another array with the styles and show the value from the style array using the same index

var c = ['apple','mango','jackfruit','guava','orange'];
var d = ['green','red','blue','yellow','orange'];

//var arr = c.split(',');
var trval='<tr>';
$.each(c,function(index,value){
 trval = trval+'<td style=\"color:'+d[index]+'\">'+value+'</td>';
});
trval = trval+'</tr>';
console.log(trval);
$("table").append(trval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table></table>

omerkarj · Answer 2 · 2017-02-26T10:10:06.130

optional solution for your case:

var arr = ['apple', ['style="color:red;"', 'banana'], 'mango'];
var trval='<tr>';

$.each(arr, function(index, value){
  if (value.constructor === Array) {
    trval = trval + '<td ' + value[0] + '>' + value[1] + '</td>';
  }
  else {
    trval = trval + '<td>' + value + '</td>';
  }
});

trval = trval + '</tr>';

console.log(trval);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

however, you are creating a DOM element with string concatenation, which is a bad practice when already using jQuery. this can be another solution for your task:

var arr = ['apple', ['color: red;', 'banana'], 'mango'];
var tr=$('<tr></tr>');

$.each(arr, function (index, value){
  var td = $('<td></td>');
      
  if (value.constructor === Array) {
    td.attr('style', value[0]);
    td.html(value[1])
  }
  else {
    td.html(value);
  }
  
  tr.append(td);
});

console.log(tr.prop('outerHTML'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Is it wise to send large amount of array from one php page to another by jquery ajax request? If I want to send a whole table of 500 rows in a jquery post response, which will be faster, array by json encode or string concatenation? — Abdullah Mamun-Ur- Rashid, Feb 26 '17 at 19:04
i am not sure how this relates to your original question, but generally skipping any encoding (and decoding on the other end), and sending less data will be faster. however, the difference in the case of 500 rows is negligible compared to how much stability and maintainability your get when using a standard data transfer model like JSON. you can read more about the benefits here: http://stackoverflow.com/questions/383692/what-is-json-and-why-would-i-use-it — omerkarj, Feb 28 '17 at 07:30

Ratheesh · Answer 3 · 2017-02-26T11:52:24.787

Why dont you pass a json array to with properties Name, Style like below.

[{"name": "Red","style": "color:red" },{"name": "Orange","style": "color:orange"},{"name": "Transparent","style": ""}]


 $.each(arr,function(index,obj){
if(obj.color=='')
  trval +='<td>'+obj.name+'</td>';
else
  trval +='<td style=\"'+obj.style+'\">'+obj.name+'</td>';
});

 <table id='tbl'>
    <tr></tr>
    </table>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
        var arr=[{"name": "Red","style": "color:red" },{"name": "Orange","style": "color:orange"      },{"name": "Transparent","style": ""}];
        var trval='';
        $.each(arr,function(index,obj){
        if(obj.color=='')
              trval +='<td>'+obj.name+'</td>';
        else
          trval +='<td style=\"'+obj.style+'\">'+obj.name+'</td>';
        });
        $("#tbl tr").html(trval);
        </script>

How to make dynamic table row by jquery.each function

3 Answers3