Get the row number onclick using Ajax - php

Question

I have wore below code and its working.But I want row number when a ROW clicked(Hope Ajax is okay) and pass it to a php code in same page. I tried javascript it worked,bt not in the way I want. If its in Ajax its better. Any HELP would b gratefull :)
if(isset($_POST['search'])){
$search=mysqli_query($con,"SELECT * FROM bus_fares WHERE route_no='$_POST[route_no]'");
$num_rows = mysqli_num_rows($search);
$search1=mysqli_query($con,"SELECT fare FROM fare limit $num_rows ");
$x = 0;
echo" <table id='my_table'><tr><th>Fare Stage</th>
<th>Location</th>
<th>Fare</th>
</tr>";
while($row=mysqli_fetch_assoc($search) and $row1=mysqli_fetch_assoc($search1)){
echo"<tr>";
echo"<td>".$x."</td>";
echo"<td>".$row['location']."</td>";
echo"<td>".$row1['fare']."</td>";
echo"</tr>";
$x++;
}
echo"</table>";
}

Answer 1

What you really want is to not only store the visual data in your table but also some sort of meta data. There are several ways to achieve this.
Method #1: (ab)use the id or class attributes:
The resulting HTML would look like this:
<!-- example with the id-attribute: -->
<tr id="mysql_row_1"> ... </tr>
<tr id="mysql_row_2"> ... </tr>
<!-- example with the class-attribute: -->
<tr class="mysql_row_1"> ... </tr>
<tr class="mysql_row_2"> ... </tr>
This would both generate valid HTML but you would abuse attribute-tags for a purpose they're not implemented for, what is generally regarded as bad. Imagine if you had to store more than just one value. You could assign multiple classes, but you'd get stuck with the id-tag then. Therefore: don't do this!
You'd have to change your code like this to achieve this solution:
(I assume you want the value of $x as the rownumber.)
while ($row=mysqli_fetch_assoc($search) and $row1=mysqli_fetch_assoc($search1)) {
echo '<tr class="mysql_row_'.$x.'" onclick="getRowNumber()">';
echo "<td>".$x."</td>";
echo "<td>".$row['location']."</td>";
echo "<td>".$row1['fare']."</td>";
echo "</tr>";
$x++;
}
The javascript part:
function getRowNumber() {
var rowNumber = this.className.replace("mysql_row_",""); // fetches the classname and removes the extra-strings
alert(rowNumber); // alerts "1", "2", ...
}
Method #2: Use the data-* attributes:
This solution is valid for HTML5. Please add additional information regarding compatibility if you have some.
Your HTML Code will look like this:
<tr data-mysql_row_number="1" onclick="getRowNumber()"> .... </tr>
<tr data-mysql_row_number="2" onclick="getRowNumber()"> .... </tr>
And the modified javascript:
function getRowNumber() {
alert(this.getAttribute("data-mysql_row_number")); // alerts "1", "2", ...
}
This also generates perfectly valid HTML(5) code and lets you store infinite endless amounts of information since you can specify as many data-* attributes as you want to.
Method #3: use invisible <input> fields:
The resulting HTML code:
<tr onclick="getRowNumber()">
<td>
Normal content of this field
<input type="hidden" name="mysql_row_number" value="1"/>
</td>
</tr>
And the JS code to fetch the values:
function getRowNumber() {
var rowNumber = this.getElementsByName('mysql_row_number')[0].value;
alert(rowNumber); // alerts "1", "2", ...
}
This as well produces valid HTML but is semantically not really correct in my opinion, since the data inside the <input> fields is some kind of loose and not directly connected to the row. Plus you can make multiple <input> fields with the same name.
I would suggest method #2 ( data-* ), as this is the most flexible solution and uses an attribute that has been designed to store meta-data.
Method #1 would work the most reliable across all (older) browsers since all of them support acces to the id or class attribute via JS, as long as you keep the id tag unique.
Method #3 will also be quite reliable with older browsers.

Answer 2

Instead of echo"<tr>"; do :
echo "<tr id='row_".$row['id']."'>";
then when a tr is clicked, just retrieve $(this)[0].id like that with jQuery inside a script tag (be sure jQuery is included, it's a powerful JS library, google it for additional informations) :
<script>
$("#my_table").on("click", "tr", function(){
alert($(this)[0].id.replace("row_", ""));
});
</script>