高亮選擇的行（由PHP從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

我的是這樣的

http://i.imgur.com/uCC9bQu.jpg

來源

2014-07-15 AHMAD

你很可能需要一個jQuery（或類似的）表顯示 – franglais

謝謝，該怎麼做。 – AHMAD

@AHMAD請參閱Javascript'onClick'，並在您的行上使用它來更改單擊元素的CSS。 – Sugar

DEMO：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>

來源

2014-07-15 18:31:04 Intacto

謝謝你。讚賞 – AHMAD

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/

編輯：

在你的代碼的情況下，下面嘗試改變

<?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>

來源

2014-07-15 13:44:04

它沒有工作。 – AHMAD

現在變得有點簡單了。檢查編輯並嘗試。如果混淆，也請參閱演示。 –

這是可以在演示中，但不是在我的代碼 – AHMAD

嘗試此Javascript與js.1.7min或更高文件

<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>

來源

2014-07-15 16:25:01 Prashant

謝謝我嘗試過，但它不工作 – AHMAD

高亮選擇的行（由PHP從MySQL數據庫生成的表）

回答

相關問題