I have dataArr = ["1","Maths","2","Science"]; I need to display the values 1,2(S.No) in the first column and the (Subject name) Maths,Science in the second column of a dynamic table.

Any way to do this using jquery/javascript?

Sample table code:

 $("#subjectTable").append("<table style='width:100%; height: 4em; border-spacing: 0px;'><tr><td style='width:25%'>"+OddpositionVal+"</td><td style='width:25%'>"+EvenpositionVal+"</td></tr></table>");    

I have dataArr = ["1","Maths","2","Science"]; I need to display the values 1,2(S.No) in the first column and the (Subject name) Maths,Science in the second column of a dynamic table.

Any way to do this using jquery/javascript?

Sample table code:

 $("#subjectTable").append("<table style='width:100%; height: 4em; border-spacing: 0px;'><tr><td style='width:25%'>"+OddpositionVal+"</td><td style='width:25%'>"+EvenpositionVal+"</td></tr></table>");    

• javascript
• jquery
• arrays
• html-table

Share Improve this question Follow edited Oct 20, 2016 at 11:00 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Sep 10, 2014 at 9:29 ShaliniShalini 21911 gold badge55 silver badges1616 bronze badges 1

• Adding a note : How to display the values in the table odd value in the first col,even value in the second col respectively . – Shalini Commented Sep 10, 2014 at 9:42

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

var dataArr = ["1","Maths","2","Science"];

Add a bare bones table to a div.

$("#subjectTable").append('<table id="table"></table>');

For each table row loop over the array in steps of 2 (i+=2). oddPositionVal is the first element in the step, evenPositionVal is the second element.

Build the row HTML and then append it to the table.

for (var i = 0, l = dataArr.length; i < l; i+=2) {
  var oddPositionVal = dataArr[i];
  var evenPositionVal = dataArr[i + 1];
  var rowhtml = '<tr><td style="width:25%">' + oddPositionVal + '</td><td style="width:25%">' + evenPositionVal + '</td></tr>';
  $('#table').append(rowhtml);
}

DEMO

var dataArr = ["1","Maths","2","Science"];
for (var i=0;i<dataArr.length;i++){
if(i%2==0){
//even index
 console.log("sno="+dataArr[i]);
}
else{
//odd index
  console.log("subject="+dataArr[i]);
}
}

UPDATE:-

DEMO

Try this :-

$.each(dataArr,function(index,value){
  if(parseInt(index) % 2 == 0)
  {
     alert(value);
  }
  else
  {
     alert(value);
  }
});

var dataArr = ["1","Maths","2","Science"];

var $table = $("<table style='width:100%; height: 4em; border-spacing: 0px;'>");
var $row = $("<tr>");
$.each(dataArr, function (index, value) {
  $row.append("<td style='width:25%'>" + value + "</td>");
  if (index % 2) {
    $table.append($row);
    $row = $("<tr>");
  }
});

$table.appendTo("#subjectTable");

Here is what you want:

var dataArr = ["1","Maths","2","Science"],
    $table = $("<table style='width:100%; height: 4em; border-spacing: 0px;'></table>").appendTo("#subjectTable");

var $tr = null;
$.each(dataArr, function(index) {
    if(index % 2 == 0) {
        $tr = $("<tr>").appendTo($table);
    }
    $tr.append("<td style='width:25%'>" + this + "</td>");
});

And here is the working example