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) http://i.imgur.com/cJ5PLCz.jpg
Mine is like this
3 answers
solution1
1 ACCPTED 2014-07-15 18:31:04
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>
solution2
0 2014-07-15 13:44:04
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:
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>
solution3
0 2014-07-15 16:25:01
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Highlight the selected row in html table with php
Highlight table row in different colors based on values from database in php
PHP MYSQL - Highlight a database table row IF table1.id exists in table2
php from to insert a row to mysql database table
php/pdo/mysql accessing selected row from a select * in html table
Highlight or color the values of a specific row in table fetched using PHP and Mysql
Beginner: Delete row from Table and Database PHP/HTML/MySQL
Toggle Selected Table Row Highlight on Button Click
Update every row in a table with PHP in mySQL database
Delete selected row from table in php
Related Tags