how to get value of each table row using jquery - php

Question

Hello i have these code.
<div class="col-md-6"> <br><br>
<table class="table">
<thead>
<th> Subject </th>
<th> Schedule </th>
<th> Day </th>
<th> Slots </th>
<th> Sections </th>
<th> Action </th>
</thead>
<tbody>
<?php
foreach($Subjects as $row)
{
$course = $this->session->userdata('course');
if($course == 'BSITWMA' || $course == 'BSCSSE' || $course == 'BSITDA' || $course == 'BSITGDD')
{
if($row->ite == '1' ) {
echo '<tr>';
echo '<td id="subj_code" name="subj_code">' .$row->subject_code. '</td>';
echo '<td id="sched_time" name="sched_time">' .$row->schedule_timestart. ' - ' .$row->schedule_timeend.' </td>';
echo '<td id="day" name="day">' .$row->schedule_day. '</td>';
echo '<td id="slot" name="slot">' .$row->slots. '</td>';
echo '<td id="sect_code" name="sect_code">' .$row->section_code. '</td>';
echo '<td > <button id = "btn-add" class="btn" > Reserve </button > </td>';
echo '</tr>';
}
}
else {
if($row->coe == '1' ) {
echo '<tr>';
echo '<td id="subj_code" name="subj_code">' .$row->subject_code. '</td>';
echo '<td id="sched_time" name="sched_time">' .$row->schedule_timestart. ' - ' .$row->schedule_timeend.' </td>';
echo '<td id="day" name="day">' .$row->schedule_day. '</td>';
echo '<td id="slot" name="slot">' .$row->slots. '</td>';
echo '<td id="sect_code" name="sect_code">' .$row->section_code. '</td>';
echo '<td > <button id = "btn-add" class="btn" > Reserve </button > </td>';
echo '</tr>';
}
}
}
?>
</tbody>
</table>
</div>
I have updated my code and this is what it looks like now.
what i want is to when i press the button. i will retrieve all the values and use it to insert into the database.
i dont have any code yet for the retrieving of value part.
i have the jquery part like this, and i still dont have any idea how to get the values in each TD.
$('button').on('click',function() {
var rowCount = $('#mhTable >tbody >tr').length;
});

Answer 1

You could get the ancestor <td> element of the button and get the values by accessing the text element of the sibling <td> elements using the jQuery .each() function.
The code should look something like this:
$(document).ready(function() {
$("#btn-add").on('click', function() {
var values = [];
$(this).parent('td').siblings().each(function() {
values.push($(this).text());
});
console.log(values);
});
});
Here I pass the values to an array for simplicity but you can pass these values using ajax or whatever other method you use to send values to the database.
Here is a fiddle with this example in practise

Answer 2

Why not do something like this for each of your variables within your foreach?
$subject_code = $row->subject_code;
and then you can use that variable for whatever you choose (such as your query)