Highlight selected row of the table (table is generated by PHP from MySQL database)

Question

I have a table which calls its data from a MySQL database

Code

<?php

$result = mysqli_query($conn,"SELECT * FROM library ORDER BY `CreatedTime` DESC");

echo "<table id='products' class='table-fill' border='0' cellpadding='0' cellspacing='0'>
<tr>
<th position='fixed' overflow='hidden' width='10%'>Book Name</th> 
<th width='5%'></th>
</tr>";

while($row = mysqli_fetch_array($result) ) {

    echo "<tr class='videorow'>";
    echo "<td colspan='2' style='padding-bottom: 0;'><a href='library.details.php?id=". $row['id']."' target='content' class='positiontitle-link'><font style='text-shadow: none; font-weight: 800;'>" . $row['bookname']. "</td>";
    echo  "</tr>";
    echo "<tr style='border-top-width: 0; padding-top: 0;'>";
    echo "<td style=' padding-top: 0; padding-left: 15px; width: 40%;'> <font color='gray'>Author :</font> " .($row['authorname'] ). "</td>";
    echo "<td  width='5%' style=' padding-top: 0;'> <font color='gray'>Year Published </font>" . $row['yearpublished'] . "</td>";
    echo "</tr>";

}
echo"</table>";
?>

Question I want to highlight the row which is clicked.

like this (icloud mail) https://i.stack.imgur.com/kMCWh.jpg

Mine is like this

https://i.stack.imgur.com/K3t38.jpg

You'd more than likely need a jQuery (or similar) table display — franglais, Jul 15 '14 at 13:34
@AHMAD See Javascript `onClick`, and use it on your rows to change the CSS of the clicked element. — Clément Malet, Jul 15 '14 at 13:36
thanks @ClémentMalet, can you please guide me how to do that. — AHMAD, Jul 15 '14 at 13:37
It doesn't matter how the table is generated. Given some HTML markup and wanting to alter the CSS based upon user interaction will only require some Javascript. Follow @ClémentMalet and use the `onClick` attribute or bind to the click event of your table's ID or something like that and check the `event` object to find the row that was clicked. See http://api.jquery.com/click/ for docs on how to do this using jQuery. — Charlie Schliesser, Jul 15 '14 at 13:39
@AHMAD I won't guide you, but here is a nice guide : http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript — Clément Malet, Jul 15 '14 at 13:40
thanks @ClémentMalet i am new to jquery and i will appreciate id you guide me, — AHMAD, Jul 15 '14 at 13:47

Intacto · Accepted Answer · 2014-07-24T14:01:21.550

DEMO: http://jsfiddle.net/wZ969/

Simply, easy - 3 parts: html, javascript and css.

<html>
  <head>
    <style>
    #maintable {border-collapse:collapse;}
    #maintable tr:hover {background-color: #FFFFAA;}
    #maintable tr.selected td {
        background: none repeat scroll 0 0 #FFCF8B;
        color: #000000;
    }
    </style>
  </head>
<body>
<!-- HTML -->
<table id='maintable' class='table-fill' cellpadding='0' border='1' cellspacing='0'>
  <tr>
    <th position='fixed' overflow='hidden' width='10%'>Book Name</th><th width='5%'></th>
  </tr>
  <tr>
    <td colspan=2>
    <div style='padding-bottom: 0;'><a href='library.details.php?id=id' target='content' class='positiontitle-link'>A Baker's Dozen</a></div>
<div style=' padding-top: 0; padding-left: 15px; width: 40%; float:left;'> <font color='gray'>Author :</font> authorname</div>
    <div  width='5%' style=' padding-top: 0; float:right;'> <font color='gray'>Year Published </font>1956</div>
    </td>
  </tr><tr>
    <td colspan=2>
        <div style='padding-bottom: 0;'><a href='library.details.php?id=id' target='content' class='positiontitle-link'>Adventure On the Rogue</a></div>
<div style=' padding-top: 0; padding-left: 15px; width: 40%; float:left;'> <font color='gray'>Author :</font> authorname</div>
    <div  width='5%' style=' padding-top: 0; float:right;'> <font color='gray'>Year Published </font>1975</div>
    </td>
  </tr>
</table>
<!-- /HTML -->

<!-- JAVASCRIPT -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script language="javascript"><!--
//<![CDATA[
$("#maintable tr").click(function(){
    //alert($(this).hasClass("selected"));
    if ($(this).hasClass("selected")){
        $(this).removeClass("selected");
    }else{
        $(this).addClass("selected").siblings().removeClass("selected");
    }
});
//]]>
--></script>
<!-- /JAVASCRIPT -->
</body></html>

Parag Tyagi · Answer 2 · 2014-07-15T14:13:44.150

HTML:

<table border='1'>
   <tr class="row">
     <td>Cell</td>
     <td>Cell</td>
   </tr>
   <tr class="row">
     <td>Cell</td>
     <td>Cell</td>
   </tr>
</table>

jQuery:

$(".row").on("click", function(ev){
   el = $(this);
   el.css("background-color", "red");
})

DEMO:

http://jsfiddle.net/deWgP/

EDIT:

In case of your code, try below changes

<?php

$result = mysqli_query($conn,"SELECT * FROM library ORDER BY `CreatedTime` DESC");

echo "<table id='products' class='table-fill' border='0' cellpadding='0' cellspacing='0'>
<tr>
<th position='fixed' overflow='hidden' width='10%'>Book Name</th> 
<th width='5%'></th>
</tr>";

while($row = mysqli_fetch_array($result) ) 
{
  echo "<tr class='videorow'>";
  echo "<td colspan='2' style='padding-bottom: 0;'><a href='library.details.php?id=". $row['id']."' target='content' class='positiontitle-link'><font style='text-shadow: none; font-weight: 800;'>" . $row['bookname']. "</td>";
  echo "</tr>";
  echo "<tr class='videorow' style='border-top-width: 0; padding-top: 0;'>";
  echo "<td style=' padding-top: 0; padding-left: 15px; width: 40%;'> <font color='gray'>Author :</font> " .($row['authorname'] ). "</td>";
  echo "<td  width='5%' style=' padding-top: 0;'> <font color='gray'>Year Published </font>" . $row['yearpublished'] . "</td>";
  echo "</tr>";
}

echo"</table>";
?>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(".videorow").on("click", function(ev){
   ev.preventDefault();
   el = $(this);
   el.css("background-color", "red");
});
</script>

Made it bit simple now. Check edits and try. Also see demo if confusion. — Parag Tyagi, Jul 15 '14 at 13:55
Thanks, but i just want to highlight one row and when the nest row selected then the previous row should me deselect — AHMAD, Jul 16 '14 at 05:53

score 0 · Answer 3 · answered Jul 15 '14 at 16:25

Try this Javascript with js.1.7min or higher file

<script>

var click=1;
$(".videorow tr").click(function() {
    click=click+1;
    for(var i=0;i<=click;i++){
        if(click % 2 === 0 ){
            $(this).css("background-color","#98AFC7");
        }else{
            $(this).css("background-color","#FFF");
        }

    }     
});   

</script>

Highlight selected row of the table (table is generated by PHP from MySQL database)

3 Answers3