Refine an HTML table by a specified value and eliminate columns using JavaScript to display a new table

Question

Refine an HTML table by a specified value and eliminate columns using JavaScript to display a new table

Hey there, I'm currently working with two HTML tables labeled id="source" and id="destination".

The source table contains 7 columns while the destination table only has 5 columns.

My goal is to filter data based on col2 (with a value of 150) from the source table into the destination table. However, I only want to display columns 1, 3, 4, 5, and 6, completely ignoring col2 and col7 as shown in the image below. https://i.sstatic.net/3Ruod.png I've come across examples using jQuery for this task, but I prefer to achieve it using pure JavaScript since I'm not very familiar with jQuery. I have attempted to create two functions for this purpose, but unfortunately, I am still not obtaining the desired results.

function copytable() {
var source = document.getElementById('source');
var destination = document.getElementById('destination');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'destination');
destination.parentNode.replaceChild(copy, destination);
filterTable();
}

function filterTable() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("destination");
 tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
}       
}
}

javascript

Answer 1

Answer №1

Each step is clearly outlined with detailed explanations provided in javascript code :

function filterValue() {
 var vl = document.getElementById('txtValue').value; //retrieve filtering value
 var stbl = document.getElementById('source');  //fetch the source table
 var dtbl = document.getElementById('destionation');//access the destination table
 for(var i=0;i<stbl.rows.length;i++) {  //iterate through the rows of the source table
   var row=stbl.rows[i]; //get each row from the source table one by one
   if(row.cells[1].innerHTML==vl) {  //check if the entered value matches the value in column 2 of the source table
    var newrow=dtbl.insertRow();  //create a new row in the destination table
    for(var x=0;x<row.cells.length;x++) { //loop through all cells
      if(x!=1 && x!=6) {  //exclude column 2 and column 7 while copying values from source to destination cells
        var cell=newrow.insertCell();//add a cell in the newly created row
        cell.innerHTML=row.cells[x].innerHTML; //copy the value from the source cell to the destination cell
      }
    }
  }
 }
}

#source, #destionation {margin-top:15px; border:solid 1px #c0c0c0;}
#source tr:first-child, #destionation tr:first-child {background-color:#B6D7A8; border-bottom:solid 1px #c0c0c0;}

Filter by value from <b>col2</b> : 
<input type="text" id="txtValue" value="" />
<input type="button" value="Filter" onclick="filterValue();" /><br>
  <table id="source" cellpadding="5" cellspacing="0">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
<td>col7</td>
</tr>
<tr><td>45</td><td>150</td><td>john</td><td>3.00</td><td>15.00</td><td>95</td><td>45:00:00</td></tr>
<tr><td>46</td><td>150</td><td>Anyone</td><td>3.00</td><td>15.00</td><td>95</td><td>37:00:00</td></tr>
<tr><td>49</td><td>220</td><td>Not included</td><td>3.00</td><td>15.00</td><td>95</td><td>15:22:00</td></tr>
<tr><td>48</td><td>150</td><td>And so on</td><td>3.00</td><td>15.00</td><td>95</td><td>35:50:00</td></tr>
</tr>
  </table>
  <table id="destionation" cellpadding="5" cellspacing="0">
<tr>
<td>col1</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
  </table>

Answer 2

Each step is clearly outlined with detailed explanations provided in javascript code :

function filterValue() {
 var vl = document.getElementById('txtValue').value; //retrieve filtering value
 var stbl = document.getElementById('source');  //fetch the source table
 var dtbl = document.getElementById('destionation');//access the destination table
 for(var i=0;i<stbl.rows.length;i++) {  //iterate through the rows of the source table
   var row=stbl.rows[i]; //get each row from the source table one by one
   if(row.cells[1].innerHTML==vl) {  //check if the entered value matches the value in column 2 of the source table
    var newrow=dtbl.insertRow();  //create a new row in the destination table
    for(var x=0;x<row.cells.length;x++) { //loop through all cells
      if(x!=1 && x!=6) {  //exclude column 2 and column 7 while copying values from source to destination cells
        var cell=newrow.insertCell();//add a cell in the newly created row
        cell.innerHTML=row.cells[x].innerHTML; //copy the value from the source cell to the destination cell
      }
    }
  }
 }
}

#source, #destionation {margin-top:15px; border:solid 1px #c0c0c0;}
#source tr:first-child, #destionation tr:first-child {background-color:#B6D7A8; border-bottom:solid 1px #c0c0c0;}

Filter by value from <b>col2</b> : 
<input type="text" id="txtValue" value="" />
<input type="button" value="Filter" onclick="filterValue();" /><br>
  <table id="source" cellpadding="5" cellspacing="0">
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
<td>col7</td>
</tr>
<tr><td>45</td><td>150</td><td>john</td><td>3.00</td><td>15.00</td><td>95</td><td>45:00:00</td></tr>
<tr><td>46</td><td>150</td><td>Anyone</td><td>3.00</td><td>15.00</td><td>95</td><td>37:00:00</td></tr>
<tr><td>49</td><td>220</td><td>Not included</td><td>3.00</td><td>15.00</td><td>95</td><td>15:22:00</td></tr>
<tr><td>48</td><td>150</td><td>And so on</td><td>3.00</td><td>15.00</td><td>95</td><td>35:50:00</td></tr>
</tr>
  </table>
  <table id="destionation" cellpadding="5" cellspacing="0">
<tr>
<td>col1</td>
<td>col3</td>
<td>col4</td>
<td>col5</td>
<td>col6</td>
</tr>
  </table>

Refine an HTML table by a specified value and eliminate columns using JavaScript to display a new table

Answer №1

Similar questions

Puppeteer headful Browser running on Node JS fails to start

Issue with JQuery Ajax: Some users experiencing failure with ajax requests (response code 0)

Encounter an issue while trying to fetch a JavaScript value from a variable using Selenium with Python

Setting up node.js for angular - serving static files with connect.static and running unit tests

Change the input value by clicking different buttons

Preventing incomplete file uploads (through FTP) while retrieving the latest file using ajax and PHP

Unable to trigger $(document).ready function

Steps for disabling and collapsing an individual header on the JQuery Accordian

Printing HTML to a VueJS page is simple and efficient

Encountered an error stating 'Cannot read property 'user' of undefined' while attempting to generate a user document during account creation using Firebase

Incapable of deactivating button in Vue JS when quantity equals zero

An Illustration of Basic Nested Controller within Directive Parameters

Can VueJS capture events emitted by a group of child components simultaneously?

Move the text below the fixed header position

Would it be considered acceptable practice to implement a setTimeout on the loading state to ensure that the log in page does not momentarily appear before the user has completed the authentication process?

Activate javascript when the range selector button in Highstock is clicked

Dealing with multiple jQuery ajax requests - strategies for managing them

Avoiding divs from crashing into each other

Notifying the chosen option using jQuery

Post Request to Express API does not produce any output