Comparison: Create a Table With Pure Vanilla JavaScript versus jQuery

This is a comparison of how to create a simple HTML table with pure “vanilla” JavaScript versus using jQuery. Both examples will create a table with a table header row, thead, and a few rows of cells. In both examples, data cells will be given the data-label attribute. Both the JavaScript and the jQuery table will show the same sample data and column headings. So, you can get a real line-per-line comparison.

Note that “vanilla” JavaScript here means pure JavaScript without libraries. Also note that while the pure JavaScript method takes a few more lines than the jQuery, it is noticeably faster.

First you’ll see the sample data that will be used by both tables. Then the actual comparison is split into four parts: creating the table, creating the table header row, creating the table body, and adding the data to the table body.

The Sample Data

Before creating the tables, here is the sample data that will fill the tables. The data is just a JavaScript array of fruit objects. Below the data, there are some helper variables that we’ll need in both scenarios.

var data = [{
  color: "yellow",
  fruit: "banana"
}, {
  color: "black",
  fruit: "blackberry"
}, {
  color: "red",
  fruit: "apple"
}, {
  color: "brown",
  fruit: "kiwi"
}, {
  color: "green",
  fruit: "watermelon"
}]

// table headings
var columnHeadings = Object.keys(data[0]);

// Get the count of columns.
var columnCount = columnHeadings.length;

// The count of rows.
var rowCount = data.length;

Now, I’ll move on to the comparison of how to create tables with JavaScript and jQuery.

1. Create An Empty Table

This part just creates the empty table. The header, rows, cells, and data will be added afterward. As you can see, pure JavaScript takes two lines while jQuery does this in one line.

With JavaScript

// Create table.

var table = document.createElement('table');

document.getElementById("data-list").appendChild(table);

With jQuery

// Create table.

var table = $('<table>').appendTo('#data-list');

 

In both cases, it will append the table to an element with the id data-list. So, if you’re trying this in JSFiddle, you’ll want to add this to the HTML:

<div id="data-list"></div>

2. Create The Table Header Row

This part creates the table header element, thead. It also adds the table heading cells, th. These contain the column headings. Together, these make up the table header row. Again, pure Javascript takes almost double the lines of jQuery.

With JavaScript

// Add the header row.

var header = table.createTHead();

var row = header.insertRow(-1);

for (var i = 0; i < columnCount; i++) {

	var headerCell = document.createElement('th');

	headerCell.innerText = columnHeadings[i].toUpperCase();

	row.appendChild(headerCell);

}

With jQuery

// Add the header row.

var header = $('<thead />').appendTo(table);

for (var i = 0; i < columnCount; i++) {

	$('<th />', { text: columnHeadings[i].toUpperCase() }).appendTo(header);

}

3. Create The Table Body Element

This part creates the table body element, tbody. Again, two lines of JavaScript to one line of jQuery.

With JavaScript

// Create table body.

var tBody = document.createElement('tbody');

table.appendChild(tBody);

With jQuery

// Create table body.

var tBody = $('<tbody />').appendTo(table);

4. Add Each Row of Data To The Table Body

Finally, this section adds all the rows of data to the table body. Each table cell, td, will get the data-label attribute. Both the JavaScript and jQuery methods take up the same number of lines. I find the pure JavaScript easier to read for this part.

With JavaScript

// Add the data rows to the table body.

for (var i = 0; i < rowCount; i++) { // each row
  
  row = tBody.insertRow(-1);
  
  for (var j = 0; j < columnCount; j++) { // each column
  
  	var cell = row.insertCell(-1);

    cell.setAttribute('data-label', columnHeadings[j].toUpperCase());

    var obj = data[i];
    
    cell.innerText = obj[columnHeadings[j]];

  }

}

With jQuery

// Add the data rows to the table body.

for (var i = 0; i < rowCount; i++) { // each row

  var row = $('<tr />').appendTo(tBody);

  for (var j = 0; j < columnCount; j++) { // each column

		var obj = data[i];

    $('<td />', {
    	text: obj[columnHeadings[j]]
    }).attr('data-label', columnHeadings[j].toUpperCase()).appendTo(row);

  }
  
}

I hope you enjoyed this comparison of how to create tables with JavaScript versus jQuery.

↑ Top