Iterate through each table within an HTML file

Question

Iterate through each table within an HTML file

I need a solution to loop through all tables in a given HTML document. The document is a report with potentially thousands of tables that I need to filter based on a keyword search. The conditions are a bit unique:

This HTML document will be used offline in a browser or WebBrowser .NET control, so there is no external network connection.
The script must be pure and concise JavaScript that will be embedded within the html document itself.
I am open to solutions for both <table> and display:table CSS formatted tables.
Speed is not a top priority.

What are the best options for accomplishing this task?

javascript .net html-table css-tables portability

Answer 1

Answer №1

If you're looking for a solution using JavaScript iteration, I have provided an example code snippet that may be helpful to you.

var tables = document.getElementsByTagName("table");

for (var i = 0; i < tables.length; i++) {
  var table = tables[i];
  var tds = table.getElementsByTagName("td");

  for (var j = 0; j < tds.length; j++) {
    var text = tds[j].innerHTML;
    document.getElementById("output").innerHTML += text + "<br>";
  }
}

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>


<br>
<h1>The Parsed Output</h1>

<div id="output"></div>

Answer 2

If you're looking for a solution using JavaScript iteration, I have provided an example code snippet that may be helpful to you.

var tables = document.getElementsByTagName("table");

for (var i = 0; i < tables.length; i++) {
  var table = tables[i];
  var tds = table.getElementsByTagName("td");

  for (var j = 0; j < tds.length; j++) {
    var text = tds[j].innerHTML;
    document.getElementById("output").innerHTML += text + "<br>";
  }
}

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>


<br>
<h1>The Parsed Output</h1>

<div id="output"></div>

Iterate through each table within an HTML file

Answer №1

Similar questions

Increase the width of the div to extend it to the right side of the

I am trying to figure out the best way to position the navbar directly under the jumbotron in Bootstrap 4

What is preventing this Javascript from running in Firefox and Chrome?

Utilizing Puppeteer to Navigate and Interact with Elements Sharing Identical Class Names

Tips for safely storing JWT tokens in a react/next.js app:

How can information be seamlessly transferred between two HTML pages using a script?

An investigation into the texturing and highlighting problem in Three.js

In mvc.net 4, Ajax is only compatible with the httpGet method and not with httpPost

Troubleshooting a Peculiar Problem with Form Submission in IE10

Error: Code cannot be executed because the variable "sel" has not been defined in the HTML element

The .AppendChild() method does not appear to be working as expected following the completion of

Display information on a web page based on user input using HTML

How to retrieve the same value from multiple selections using Vanilla JavaScript and multiple select options?

JavaScript function to evaluate true conditions

Error occurred while attempting to parse JSON on comment system

I encountered an error with the TS1003 code in Angular because an identifier was expected on the throw import statement. Upon further investigation, I realized that the issue originated from

Can videos be loaded in the front end through JavaScript when dragged and dropped?

Save the data in Redux and access it back

Using Vue.js watchers can sometimes cause an endless loop

Implementing jquery-confirm in CodeIgniter: A Step-by-Step Guide