HTML Table background Color change not working with Table getting from PHP

Question

I get a Table with Data from a MySql Database via Ajax when i click a Button. It is displayed into a Div. I get the whole HTML with content from my .php script on the Server.

...
 $statement->execute();

    echo "   <table id='tableID' onClick='idfromclick(event)' class='table table-bordered table-hover'>
    <thead>
      <tr>
        <th>Name</th>
        <th>Datum</th>
        <th>ID</th>
        <th>Position</th>
        <th>Notiz</th>
      </tr>
    </thead>
    <tbody>  ";

foreach ($statement -> fetchAll() as $result)
{   
    echo "<tr>";
    echo "<td align=center>$result[0]</td>";
    echo "<td align=center>$result[1]</td>";
    echo "<td align=center>$result[2]</td>";
    echo "<td align=center>$result[3]</td>";
    echo "<td align=center>$result[4]</td>";
    echo "</tr>";
}
echo "</tbody>
  </table>";
...

When I click on a Row I only need the ID which I get with

function idfromclick(e){    
      localStorage.setItem("ClickID",e.target.parentNode.cells[2].innerHTML);
    }

Now i want that the selected (clicked) Row is in a different Color until another Row is clicked.

This one works with a local Table

 <table id="blub" class="table table-bordered table-hover">
    <tbody>
        <tr><td>Something..blah blah</td><td>Something...blah blah</td><td>Something...blah blah</td></tr>
        <tr><td>Something ...blah blah</td></tr>
        <tr><td>Something ...blah blah</td></tr>  
        <tr><td>Something ..blah blah</td></tr>
    </tbody>
</table>

      <script> $('table tr').each(function(a,b){
    $(b).click(function(){
         $('table tr').css('background','#ffffff');
         $(this).css('background','#c5e9b8');   
    });
});
      </script>

BUT it dont work on my other (php) Table. It seems like no jQuery works?

Why is that so and can i make jQuery works?

The Solutions with only JS are much longer and complicated.

The Solutions with only JS are much longer and complicated. this is why we have JQuery — creativename
– creativename, Commented May 12, 2017 at 18:16
It won't work mostly because when you call your table, you already defined all the click events for your rows in your page, which don't include your .php table — Lixus
– Lixus, Commented May 12, 2017 at 18:18

DontVoteMeDown · Accepted Answer · 2017-05-12 18:20:18Z

2

Try binding the event to the table and not for the each row:

$('body').on("click", "table tr", function() {
    $(this).siblings().css('background','#ffffff');
    $(this).css('background','#c5e9b8');   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="blub" class="table table-bordered table-hover">
    <tbody>
        <tr><td>Something..blah blah</td>
        <td>Something...blah blah</td><td>Something...blah blah</td></tr>
        <tr><td>Something ...blah blah</td></tr>
        <tr><td>Something ...blah blah</td></tr>  
        <tr><td>Something ..blah blah</td></tr>
    </tbody>
</table>

This will work for any table you have in your page. What probably happened in your code is that you were binding the events to an already created table, so that new table won't have the events.

answered May 12, 2017 at 18:20

DontVoteMeDown

21.5k10 gold badges72 silver badges113 bronze badges

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

Comments

Yuri · Accepted Answer · 2017-05-12 18:23:23Z

0

This is because jQuery binds element events on load. To make it work you need to re-bind events after your AJAX call completed.

answered May 12, 2017 at 18:23

Yuri

2,9084 gold badges31 silver badges41 bronze badges

Collectives™ on Stack Overflow

HTML Table background Color change not working with Table getting from PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related