How can I make an array of a HTML table?

Question

Here is my DOM:

...
<table>
  <tbody>
    <tr>
        <td>1</td>
        <td><img src="../first"></td>
        <td>John</td>
    <\tr>
    <tr>
        <td>2</td>
        <td><img src="../second"></td>
        <td>Peter</td>
    <\tr>
  </tbody>
</table>
...

Now I want to make this array: (to pass it to the server side and make a .CSV export of it)

var arr = array();
arr = array(array(1,'../first','John'),array(2,'../second','Peter'));

How can I make array above from the DOM ?

Note: I use jquery, So I can get the src attribute by using this:

$('img').attr('src');

xhg · Accepted Answer · 2017-04-08 08:37:39Z

1

Haven't tested yet. Basically you need to iterate through all <tr> and get each values.

BTW, array should be Array.

var arr = Array();
$('table tr').each(function(index) {
    var id = $(this).children()[0].innerText;
    var imageSrc = $(this).find('img').attr('src');
    var name = $(this).children()[2].innerText;
    arr.push_back(Array(id, imageSrc, name));
});

answered Apr 8, 2017 at 8:37

xhg

1,9033 gold badges22 silver badges36 bronze badges

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

Comments

Nenad Vracar · Accepted Answer · 2017-04-08 08:42:02Z

0

You can return array using map() and get().

var array = $('tr').map(function() {
  return [$(this).find('td').map(function(i) {
    return i == 1 ? $(this).find('img').attr('src') : $(this).text()
  }).get()]
}).get()

console.log(array)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td><img src="../first"></td>
      <td>John</td>
    </tr>
    <tr>
      <td>2</td>
      <td><img src="../second"></td>
      <td>Peter</td>
    </tr>
  </tbody>
</table>

answered Apr 8, 2017 at 8:42

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

Lajos Arpad · Accepted Answer · 2017-04-08 08:45:52Z

0

First, add an id to your table, to make sure that you do not accidentally send rows from other table to the server:

<table id="request-rows">
  <tbody>
    <tr>
        <td>1</td>
        <td><img src="../first"></td>
        <td>John</td>
    <\tr>
    <tr>
        <td>2</td>
        <td><img src="../second"></td>
        <td>Peter</td>
    <\tr>
  </tbody>
</table>

Then build your array like this:

var arr = [];
$("#request-rows tr").each(function() {
    var tds = $(this).find("td");
    var newElement = [$(td[0]).text(), $(td[1]).find("img").attr("src")];
    arr.push(newElement);
});
//Do something with arr

answered Apr 8, 2017 at 8:45

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

Comments

prasanth · Accepted Answer · 2017-04-08 08:47:40Z

0

Try like this .create array of each tr and then push with main array

var res = []

var a = $('tbody tr')
a.each(function(a, b) {
  a = [];
  a[0] = $(this).children('td').eq(0).text();
  a[1] = $(this).children('td').eq(1).children('img').attr('src');
  a[2] = $(this).children('td').eq(2).text();
  res.push(a);
})
console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>1</td>
      <td><img src="../first"></td>
      <td>John</td>
      <tr>
        <tr>
          <td>2</td>
          <td><img src="../second"></td>
          <td>Peter</td>
          <\tr>
  <\tbody>
<\table>

edited Apr 8, 2017 at 8:47

answered Apr 8, 2017 at 8:38

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

1 Comment

JYoThI Over a year ago

typo : near tr tag <\tr>

Collectives™ on Stack Overflow

How can I make an array of a HTML table?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related