[英]Highlight selected row of the table (table is generated by PHP from MySQL database)
I have a table which calls its data from a MySQL database 我有一个表,该表从MySQL数据库调用其数据
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 像这样(icloud邮件) http://i.imgur.com/cJ5PLCz.jpg
Mine is like this 我的就是这样
http://i.imgur.com/uCC9bQu.jpg http://i.imgur.com/uCC9bQu.jpg
DEMO: http://jsfiddle.net/wZ969/ 演示: http : //jsfiddle.net/wZ969/
Simply, easy - 3 parts: html, javascript and css. 简单,容易-分为3部分:html,javascript和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>
HTML: 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: jQuery的:
$(".row").on("click", function(ev){
el = $(this);
el.css("background-color", "red");
})
DEMO: DEMO:
http://jsfiddle.net/deWgP/ 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>
Try this Javascript with js.1.7min or higher file 使用js.1.7min或更高版本的文件尝试此Javascript
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.