Get HTML data from table row click into javascript alert

Question

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.

One problem you'll have here is that you're not closing the <tr> correctly. — Sondre
– Sondre, Commented Nov 13, 2015 at 10:28
Just updated that, silly me! Although unfortunately still doesn't work. Thanks — bananabreadbob
– bananabreadbob, Commented Nov 13, 2015 at 10:29
You cannot listen for a "click" event on a table row. It simply is not raised. Instead you have to listen to click events of the content of the rows cells. — arkascha
– arkascha, Commented Nov 13, 2015 at 10:31
Remove the updatetbl class from tds, you dont need them. (@arkascha : event works on TR) — ThinkTank
– ThinkTank, Commented Nov 13, 2015 at 10:31

ThinkTank · Accepted Answer · 2015-11-13 10:38:38Z

1

You have one ")" at the end this line which is not needed, thats why it doesnt work :

`alert("Data = "+ $trim(tableData[0]) + " , " + $trim(tableData[1]) + " , "
    + $trim(tableData[2]) + " , " + $trim(tableData[3]) + " , ")); which isnt needed.

Moreover, just add the class updatetbl on row.

HTML

<table>
    <tbody>
    <tr class="updatetbl">
        <td >ID</td>
        <td >Forename</td>
        <td >Surname</td>
        <td >DOB</td>
        <td >Address</td>
        <td >Postcode</td>
        <td >Telephone</td>
        <td >Email</td>
    </tr>
    <tbody>
</table>

JS :

$(".updatetbl").click(function(){
   var tableData = $(this).children("td").map(function(){
       return $(this).text();
   }).get();

    alert("Data = "+ tableData[0] + " , " + tableData[1] + " , "
        + tableData[2] + " , " + tableData[3] + " , ");
});

answered Nov 13, 2015 at 10:38

ThinkTank

1,1919 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

bananabreadbob Over a year ago

Thanks, I have updated those silly errors - although still doesn't seem to register the click.

ThinkTank Over a year ago

Do you have other JS on your page ? Do you have a debugger like Firebug for example ? It helps to check javascript errors

bananabreadbob Over a year ago

I have firebug, but it doesn't raise any issues regarding errors within the console.

ThinkTank Over a year ago

Ok my bad, its just that you forget to declare <table> and <tbody> so the <tr> is not seen by javascript.

bananabreadbob Over a year ago

I do have <table> etc, it is just outside the code (I have updated the main post with this code) it's just that there was a lot of php there.

|

CiaranSynnott · Accepted Answer · 2015-11-13 10:40:10Z

0

How about;

        $("tr.updatetbl").click(function(){

            var data = [];

            $("tr.updatetbl td").each(function(i, td){
                data.push(td.text());
            });

            console.log(data);

        });

answered Nov 13, 2015 at 10:40

CiaranSynnott

9285 silver badges9 bronze badges

Comments

swidmann · Accepted Answer · 2015-11-13 11:03:36Z

0

Please find the below code for this

$( "table tr.updatetbl" ).on( 'click', function( e ) {
    e.preventDefault();
    var data = [];
    $( this ).find( "td" ).each( function(){ data.push( $.trim( $( this ).text() ) ) } );
    console.log( data );
});

fiddle link : https://jsfiddle.net/4tk4w0ua/1/

edited Nov 13, 2015 at 11:03

swidmann

2,7921 gold badge21 silver badges32 bronze badges

answered Nov 13, 2015 at 10:36

Kshirodra Meher

2481 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

Get HTML data from table row click into javascript alert

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related