My end goal is to click a row on the table and for that to populate in the form next to it for an update. This code here is simply just "attempting" to click a row and for it to display in a Javascript alert with the row data, before I code the population of the form.
Here I have populated the table using PHP. The TR class have "updatetbl" which is later used with the javascript. I used the code example from this question: Get the table row data with a click
if ($patients->num_rows > 0){
while($row = $patients-> fetch_assoc()) {
echo '<tr class="updatetbl">';
echo '<td class="updatetbl">' . $row['ID'] . '</td>';
echo '<td class="updatetbl">' . $row['Forename'] . '</td>';
echo '<td class="updatetbl">' . $row['Surname'] . '</td>';
echo '<td class="updatetbl">' . $row['DOB'] . '</td>';
echo '<td class="updatetbl">' . $row['Address'] . '</td>';
echo '<td class="updatetbl">' . $row['Postcode'] . '</td>';
echo '<td class="updatetbl">' . $row['Telephone'] . '</td>';
echo '<td class="updatetbl">' . $row['Email'] . '</td>';
echo '<tr>';
}
}else{
echo "0 results";
}
I am trying to get the data, firstly, into an alert with Javascript (I just want to see that I have the data before putting into the form)
To populate the alert, and register the click I have the following javascript.
<script>
$("tr.updatetbl").click(function(){
var tableData = $(this).children("td").map(function(){
return $(this).text();
}).get();
alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
+ $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , "));
});
</script>
To my knowledge the tr.updatetbl concentrates on a click here? And then gathers the table data..
Any ideas?
Update: I do have etc.
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Forename</th>
<th>Surname</th>
<th>D.O.B</th>
<th>Address</th>
<th>Postcode</th>
<th>Tel</th>
<th>Email</th>
</tr>
</thead>
<?php
$servername = removed
$dbname = removed
$username = removed
$password = removed
$connection = new mysqli($servername, $username, $password, $dbname);
if ($connection->connect_error) {
die('Could not connect: ' . $connection->connect_error);
}
$sql = "SELECT ID, Forename, Surname, DOB, Telephone, Email, Address, Postcode FROM people";
$people= $connection->query($sql);
if ($patients->num_rows > 0){
while($row = $patients-> fetch_assoc()) {
echo '<tr class="updatetbl">';
echo '<td>' . $row['ID'] . '</td>';
echo '<td>' . $row['Forename'] . '</td>';
echo '<td>' . $row['Surname'] . '</td>';
echo '<td>' . $row['DOB'] . '</td>';
echo '<td>' . $row['Address'] . '</td>';
echo '<td>' . $row['Postcode'] . '</td>';
echo '<td>' . $row['Telephone'] . '</td>';
echo '<td>' . $row['Email'] . '</td>';
echo '</tr>';
}
}
else
{
echo "0 results";
}
$connection->close();
?>
</table>
Solved:
I have it figured out - I put the compiled code into a new jFiddle with the javascript and it still didn't work. I couldn't figure why, so I looked at yours and I noticed at the side you had the library as jQuery! Mine was standard JS. So I realised that I hadn't included the <script src="jquery-1.11.3.min.js"></script>
I voted the below answer because I was helped effortlessly although I am sure after all of this other answers will work.