How to insert rows and cells with JavaScript

For our application “Duplicate Files Finder” we’ll use the HTML table to display the duplicate files data, as shown below a sample table:

1. The first column contain checkboxes to select files to delete.
2. The second column displays the size of files
3. The third column display the file name including its extension and path.

The similar file’s rows will group in the same tbody tag, we’ll assign id to each checkbox, row and tbody for later use i.e. insert more row(s) to tbody or to delete a row.

Let’s create a table and insert heading columns, as shown below:

<table id="widget">
 <thead>
  <tr>
   <th><input type="checkbox" id="SelectAll"></th>
   <th>Size</th>
   <th>File</th>
  </tr>
 </thead>
</table>

Now we’ll insert rows, cells and checkboxes dynamically using JavaScript. First we’ll select the table:

<script>
 var table = document.querySelector('#widget');
</script>

Create sample data object:

var data = {size:'10KB',id:'uexx',files:
  [
   {id:1,path:'D:\BrainBell\a.txt'},
   {id:2,path:'D:\a copy.txt'},
   {id:3,protected:true,path:'D:\junk\a.txt'},
  ]
 };

Create a new function addRows:

function addRows(data) {
 if (!data) return;
}

Create a tbody tag using createTBody():

function addRows(data) {
 if (!data) return;
 var tbody = table.createTBody();
}

Or create tbody tag using createElement('tbody'):

function addRows(data) {
 if (!data) return;
 var tbody = document.createElement('tbody');
 table.appendChild(tbody);
}

Assign id to tbody:

var tbody = document.createElement('tbody');
tbody.id = data.id;

Or you can use setAttribute(name,value) method to assign tbody id:

tbody.setAttribute('id', data.id);

We’ve created the tbody tag and assigned it an id, now its time to insert rows inside the tbody tag. We can use three methods to insert a table row:

1. tbody.insertRow() method
2. tbody.innerHTML = '<tr>...</tr>'
3. document.createElement('tr')

Back to our data object, the data.rows array contains identical structured objects, each object contains a path and id property, now we’ll iterate over the data.rows to create rows using insertRow() method:

data.files.forEach(file => {
 var tr = tbody.insertRow();
});

The empty row inserted in our table, next, we’ll insert three table cells using insertCell() method, td1 for the checkbox, td2 for the file size and td3 for the full file path:

data.files.forEach(file=> {
 var tr = tbody.insertRow();
 var td1 = tr.insertCell();
 var td2 = tr.insertCell();
 var td3 = tr.insertCell();
});

Create a checkbox and append it to the td1 cell:

var cb = document.createElement('input');
    cb.type = 'checkbox';
    cb.id = file.id;

td1.appendChild(cb);

Disable checkbox if protected property is true.

if (file.protected === true)
 cb.disabled = true;

Create a createTextNode for the Size column and append to td2 cell:

var sz = document.createTextNode(data.size);
    td2.appendChild(sz);

/* OR
td2.innerHTML = data.size;
*/

Create a createTextNode for Path column and append to td3 cell:

var ph = document.createTextNode(file.path);
    td3.appendChild(ph);

/* OR
td3.innerHTML = file.path;
*/

Joining the addRows parts:

<script>
var table = document.querySelector('#widget');
var data = {size:'10KB',id:'uexx',files:
 [
  {id:1,path:'D:\BrainBell\a.txt'},
  {id:2,path:'D:\a copy.txt'},
  {id:3,protected:true,path:'D:\junk\a.txt'},
 ]
};

addRows(data);
addRows(data);

function addRows(data) {
 if (!data) return;
 var tbody = table.createTBody();
 tbody.id = data.id;
 
 data.files.forEach(file => {

  var tr = tbody.insertRow();
  var td1 = tr.insertCell();
  var td2 = tr.insertCell();
  var td3 = tr.insertCell();

  var cb = document.createElement('input');
      cb.type = 'checkbox';
      cb.id = file.id;
  td1.appendChild(cb);
  if (file.protected === true)
   cb.disabled = true;

  var sz = document.createTextNode(data.size);
  td2.appendChild(sz);

  var ph = document.createTextNode(file.path);
  td3.appendChild(ph);
 });
}
</script>