突出显示表的选定行（该表由PHP从MySQL数据库生成）
[英]Highlight selected row of the table (table is generated by PHP from MySQL database)
问题描述
我有一个表，该表从MySQL数据库调用其数据
码
<?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>";
?>
问题我想突出显示单击的行。
像这样（icloud邮件） http://i.imgur.com/cJ5PLCz.jpg
我的就是这样
3 个解决方案
解决方案1
1 已采纳 2014-07-15 18:31:04
演示： http : //jsfiddle.net/wZ969/
简单，容易-分为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>
解决方案2
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：
编辑：
如果是您的代码，请尝试以下更改
<?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>
解决方案3
0 2014-07-15 16:25:01
使用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>
根据php中数据库的值突出显示不同颜色的表行
[英]Highlight table row in different colors based on values from database in php
PHP MYSQL - 突出显示数据库表行IF table1.id存在于table2中
[英]PHP MYSQL - Highlight a database table row IF table1.id exists in table2
php / pdo / mysql从html表中的select *访问所选行
[英]php/pdo/mysql accessing selected row from a select * in html table
突出显示或着色使用PHP和Mysql获取的表中特定行的值
[英]Highlight or color the values of a specific row in table fetched using PHP and Mysql
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.