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"
]
CodePudding user response:
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>
CodePudding user response:
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>