How to get individual table row date-index attribute indices so I can pull the value of its cells?

Question

I'm using the Bootstrap Table integration to create a table with data from my ajax get request. The table plugin dynamically generates a <tbody> with <tr> and <td> based on your data. I need to be able to get the individual <tr> with their respective <td> values to use in another ajax call.

<table id="table>
<tbody>
   <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
   </tr>
   <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
   </tr>
   <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
   </tr>
   <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
   </tr>
   <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
   </tr>
   <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
   </tr>
</tbody>
</table>

I have this on click event currently.

let data = []

$("#table").on("click", function (id) {
    
        const $ths = $(this).find("tr")
        $.each($ths, function () {
            data.push($(this).text().trim())
        })
        console.log(data)
    })

Right now this will get all the <td> values, like this.

[
    "ACB",
    "1540",
    "0784",
    "E",
    "ACB",
    "1559",
    "0784",
    "E",
    "ACB",
    "2095",
    "0784",
    "A",
    "ADH",
    "1075",
    "0347",
    "E",
    "ADH",
    "0001",
    "0347",
    "S",
    "ADH",
    "0001",
    "0347",
    "A",
    "ADH",
    "1076",
    "0347",
    "E",
    "AHG",
    "2135",
    "0657",
    "W",
    "AHG",
    "1037",
    "0657",
    "E",
    "AHG",
    "2101",
    "0657",
    "A"
]

I need to be able to get only one <tr> value and push them into the data array individually like the example below. How can I get the index from the data-index attribute on the <tr> to get the individual data and push that into the data array? Any advice is greatly appreciated!

[
    "ACB",
    "1540",
    "0784",
    "E"
]
[
    "ACB",
    "1559",
    "0784",
    "E"
]
[
    "ACB",
    "2095",
    "0784",
    "A"
]
[
    "ADH",
    "1075",
    "0347",
    "E"
]
[
    "ADH",
    "0001",
    "0347",
    "S"
]

Does this answer your question? [How to tell which row number is clicked in a table?](https://stackoverflow.com/questions/4524661/how-to-tell-which-row-number-is-clicked-in-a-table) — UserOfStackOverFlow, Sep 01 '21 at 11:53

score 1 · Answer 1 · answered Aug 31 '21 at 13:35

You can cycle the inner td elements of each tr:

let data = []

const $ths = $("#table").find("tr");
$.each($ths, function () {
    const innerData = [];
    $(this).find("td").each(function () {
      innerData.push($(this).text().trim());
    });
    data.push(innerData);
})
console.log(data)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<tbody>
   <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
   </tr>
   <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
   </tr>
   <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
   </tr>
   <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
   </tr>
   <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
   </tr>
   <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
   </tr>
   <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
   </tr>
   <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
   </tr>
</tbody>
</table>

This still pushes all of the data into the array at once whenever a row is clicked. I need it to push only the data from the individual row that gets clicked on. — Matthew, Aug 31 '21 at 14:21

mplungjan · Answer 2 · 2021-08-31T15:52:14.827

You mean this - cells per TR clicked

$("#table tbody tr").on("click", function() {
  const data = $('td',this).map(function() { 
      return $(this).text().trim();
  }).get()
  console.log(data)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tbody>
    <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
    </tr>
    <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
    </tr>
    <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
    </tr>
    <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
    </tr>
    <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
    </tr>
    <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
    </tr>
  </tbody>
</table>

Or this - get ALL cells per TR for the whole table

const data = []
$("#table").on("click", function() {
  $('tr',this).each(function() { 
      data.push($(this).find("td").map(function(){ return $(this).text().trim() }).get());
  })
  console.log(data)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='table'>
  <tbody>
    <tr data-index="0">
      <td>ACB</td>
      <td>1540</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="1">
      <td>ACB</td>
      <td>1559</td>
      <td>0784</td>
      <td>E</td>
    </tr>
    <tr data-index="2">
      <td>ACB</td>
      <td>2095</td>
      <td>0784</td>
      <td>A</td>
    </tr>
    <tr data-index="3">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>S</td>
    </tr>
    <tr data-index="4">
      <td>ADH</td>
      <td>1075</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="5">
      <td>ADH</td>
      <td>0001</td>
      <td>0347</td>
      <td>A</td>
    </tr>
    <tr data-index="6">
      <td>ADH</td>
      <td>1076</td>
      <td>0347</td>
      <td>E</td>
    </tr>
    <tr data-index="7">
      <td>AHG</td>
      <td>2136</td>
      <td>0657</td>
      <td>W</td>
    </tr>
    <tr data-index="8">
      <td>AHG</td>
      <td>1037</td>
      <td>0657</td>
      <td>E</td>
    </tr>
    <tr data-index="9">
      <td>AHG</td>
      <td>I013</td>
      <td>0657</td>
      <td>W</td>
    </tr>
  </tbody>
</table>

How to get individual table row date-index attribute indices so I can pull the value of its cells?

2 Answers2

Linked

Related