Get Data from HTML Table with Jquery (Or other ways if possible)

Question

I have a really big HTML Table with data formatted like this (a simplified version of my table):

The list is much bigger.

I need to know which Application runs on which Server(multiple).

I now need to somehow get all the data and store it (maybe in an array) so I can work with it. (For example I need to compare certain applications and write a code to document it.)

I've already tried many methods I found on the web but I not sure im working in the right way.

My recent atempt is:

var data = Array();

$("table").each(function(i, v) {
  data[i] = Array();
  $(this).each(function(ii, vv) {
    data[i][ii] = $(this).text();
  });
})

document.write(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>


<div id="result" style="color: #f00"></div>

Outputs:

1 2 3 4 6 7 8 9 10

With this method I get one array:

1,2,3,4,5,6,7,8,9,10

But I cannot access the stored vaules because for example data[0] outputs all the values and not only one.

Sorry for the long text

Thanks for your help :)

Kind Regards, Markus

Pavan Mahadik · Accepted Answer · 2019-04-12 13:15:42Z

1

You can try using nested for loops and get a nested array of data.

let data = [];

$("table tr").each(function() {
  let row = [];
  $(this).children("td").each(function() {
    row.push($(this).text());
  })
  data.push(row);
})

console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

answered Apr 12, 2019 at 13:15

Pavan Mahadik

1333 bronze badges

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

Comments

charlietfl · Accepted Answer · 2019-04-12 12:55:06Z

0

You need to iterate rows and within rows iterate cells

You can do this all with map()

var data = $('tr').map(function() {
  return [$(this).children().map(function() {
    return $(this).text().trim()
  }).get()];
}).get();



console.log(JSON.stringify(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>


<div id="result" style="color: #f00"></div>

answered Apr 12, 2019 at 12:55

charlietfl

172k14 gold badges125 silver badges154 bronze badges

3 Comments

House97_ Over a year ago

Is there a way I can sort the values by its row? So for example 3 arrays for 123, 456, 789 ? I need to get all columnwise. So for example (1,4,7) (2,5,8) (3,6,9). Is there a way I can do that?

House97_ Over a year ago

What i the output of the script? I dont see any output only the table?

charlietfl Over a year ago

Hit F12 and look in developer tools console. That's what console.log() does...outputs there

Deepak A · Accepted Answer · 2019-04-12 12:52:00Z

0

use each to loop through td and get its text value

var val=[]
$('#table td').each(function(e){
val.push($(this).text())
})
console.log(val)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table id="table">
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>9</td>
        <td>10</td>
      </tr>
</table>

answered Apr 12, 2019 at 12:52

Deepak A

1,6361 gold badge9 silver badges16 bronze badges

2 Comments

Deepak A Over a year ago

@House97_ can you please verify it if it is the result that you expected,thanks

House97_ Over a year ago

Yes it worked but my problem is: The file I need to get the data from has the a table header (th) but I also need to add that to the array.... Sorry I wrote a comment but it was deleted somehow. Is there a way I can sort the values by its column? I need to get all columnwise. So for example (1,4,7) (2,5,8) (3,6,9). Is there a way I can do that?

Code_Ninja · Accepted Answer · 2019-04-12 13:02:41Z

0

In the following I am using an each function to derive the data of the table and then pushing into an array list. I hope this code is helpful. This code is really small.

var arr = [];
$("th, td").each(function(){
  arr.push($(this).text());
  $("#result").text(arr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>


<div id="result" style="color: #f00"></div>

answered Apr 12, 2019 at 13:02

Code_Ninja

1,8771 gold badge19 silver badges39 bronze badges

Collectives™ on Stack Overflow

Get Data from HTML Table with Jquery (Or other ways if possible)

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related