Create html table from comma separated strings javascript

Question

I am trying to write a Javascript function which writes the text to (eventually) create the following html tables (I will be passing different length arguments to it to create hundreds of tables):

<table>
    <tr><td><u>School</u></td>
    <td><u>Percent</u></td>
    <tr><td>School 1: </td>
    <td>Percent1</td></tr>
    <tr><td>School 2: </td>
    <td>Percent2</td></tr>
    <tr><td>School 3: </td>
    <td>Percent3</td></tr>  
</table>

The inputs that I have are comma separated strings:

var school_list = "School 1, School 2, School 3"
var pct_list = "Percent1, Percent2, Percent3"

The function needs to be passed school_list and pct_list, and return a string of the html table code above.

BvdVen · Accepted Answer · 2012-05-16 05:54:09Z

5

Something like this:

var schoolArr = school_list.split(',');
var pctArr = pct_list.split(',');
var table = "<table>";
for (var i=0; i< schoolArr.length; i++) {
    table = table + "<tr><td>"+ schoolArr[i]+"</td><td>"+ pctArr[i] +"</td></tr>"; 
}
table = table + "</table>";

return table;

edited May 16, 2012 at 5:54

answered May 16, 2012 at 5:47

BvdVen

2,96126 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Manas Khandelwal · Accepted Answer · 2021-06-03 13:12:06Z

2

You can try below code with Jsfiddle demo ::

function createTable(tab) {
  var tar = document.getElementById(tab);
  var table = document.createElement('TABLE');
  table.border = '1';
  var tbdy = document.createElement('TBODY');
  table.appendChild(tbdy);
  for (var j = 0; j < 4; j++) {
    var tr = document.createElement('TR');
    tbdy.appendChild(tr);
    for (var k = 0; k < 2; k++) {
      var td = document.createElement('TD');
      td.width = '100';
      if (k == 0) td.innerHTML = "School" + (j + 1);
      else td.innerHTML = "Percent" + (j + 1);
      tr.appendChild(td);
    }
  }
  tar.appendChild(table);
}

createTable('tab');

<div id="tab"></div>

edited Jun 3, 2021 at 13:12

Manas Khandelwal

3,9442 gold badges15 silver badges26 bronze badges

answered May 16, 2012 at 6:16

Umesh Patil

10.7k16 gold badges56 silver badges81 bronze badges

Comments

xiaoyi · Accepted Answer · 2012-05-16 05:56:18Z

var schools = school_list.split(/,\s*/g).join('</td><td>');
var pcts = pct_list.split(/,\s*/g).join('</td><td>');
return '<table><tr><td>' + schools + '</td></tr><tr><td>' + pcts + '</td></tr></table>'

or a better approach is to construct the whole table in DOM and place it in document directly.

function appendTD(tr, content) {
  var td = document.createElement('td');
  td.appendChild(document.createTextNode(content));
  tr.appendChild(td);
}
var table = document.createElement('table');
school_list.split(/,\s*/g).forEach(appendTD.bind(null, table.appendChild(document.createElement('tr'))));
pct_list.split(/,\s*/g).forEach(appendTD.bind(null, table.appendChild(document.createElement('tr'))));

someParent.appendChild(table);

HGK · Accepted Answer · 2012-05-16 06:04:28Z

0

var numberOfSchools = school_list.split(',');
var numberOfPercent = pct_list.split(',');
var htmlOutput= '<table><tr><td><u>School</u></td><td><u>Percent</u></td>';
for(var i = 0 ; i < numberOfSchools.length; i++)
{
htmlOutput +=  "<tr><td>" + numberOfSchools[i] + "</td>";
htmlOutput += "<td>"+numberOfPercent[i] +"</td></tr>"

}
htmlOutput += "</table>"

And return htmlOutput

edited May 16, 2012 at 6:04

answered May 16, 2012 at 5:50

HGK

3861 gold badge4 silver badges13 bronze badges

1 Comment

RobG Over a year ago

numberOfSchools[0] should be numberOfSchools[i], same for numberOfPercent[0].

RobG · Accepted Answer · 2012-05-16 06:15:22Z

Here's a DOM method, highlighs why innerHTML is so popular. DOM methods are pretty fast in execution lately, but the amount of code is a bit tiresome unless there's a good reason to use it.

The amount of code can be significantly reduced with a couple of helper functions so it is on par with innerHTML methods:

var school_list = "School 1, School 2, School 3" 
var pct_list = "Percent1, Percent2, Percent3" 

function makeTable(schools, percents) {

  // Turn input strings into arrays
  var s = schools.split(',');
  var p = percents.split(',');

  // Setup DOM elements
  var table = document.createElement('table');
  var tbody = table.appendChild(document.createElement('tbody'));
  var oRow = document.createElement('tr');
  var row;

  oRow.appendChild(document.createElement('td'));
  oRow.appendChild(document.createElement('td'));
  table.appendChild(tbody);

  // Write header
  row = tbody.appendChild(oRow.cloneNode(true));
  row.childNodes[0].appendChild(document.createTextNode('School'));
  row.childNodes[1].appendChild(document.createTextNode('Percent'));

  // Write rest of table
  for (var i=0, iLen=s.length; i<iLen; i++) {
    row = tbody.appendChild(oRow.cloneNode(true));
    row.childNodes[0].appendChild(document.createTextNode(s[i]));
    row.childNodes[1].appendChild(document.createTextNode(p[i]));
  }
  document.body.appendChild(table);
}

It can be called after the load event, or just placed somewhere suitable in the document:

window.onload = function() {
  makeTable(school_list, pct_list);
}

Collectives™ on Stack Overflow

Create html table from comma separated strings javascript

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related