我已经在站点上搜索了答案，但是我无法改编供他人挖掘的代码。
我有一个使用mysql查询由PHP生成的表，我想使行成为可选的（仅整行，并且没有多选），并从所选行中提取“ CodPezzi”的值以供进一步使用：
这是我的桌子
<table width="504" border="1" align="center" class="Tabella" id="maintable">
<th>Codice</th>
<th>Tipologia</th>
<th>Costruttore</th>
<th>Macchinario</th>
<th>Quantità</th>
<tbody>
<?php
$result=$ SSide->query($sql);
while($row = mysqli_fetch_assoc($result)) {
echo " <tr <td>".$row['CodPezzi']."</td>". "
<td>".$row['Tipologia']."</td>". "
<td>".$row['Macchinario']."</td>". "
<td>".$row['Costruttore']."</td>". "
<td>".$row['sum(Quantita)']."</td>
</tr>";
}
?>
</tbody>
</table>
我不想选择标题。您能为我提供一个苗条的代码，让我做自己想做的事情吗？
编辑
这是我来这里之前尝试过的：
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-1 .ui-selecting { background: #707070 ; }
#selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
#selectable-1 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-1 li { margin: 3px; padding: 0.4em;
font-size: 16px; height: 18px; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#selectable-1" ).selectable();
});
</script>
</head>
<body>
<table width="504" border="1" align="center" class="Tabella"id="selectable-1" >
<th >Codice</th>
<th >Tipologia</th>
<th >Costruttore</th>
<th >Macchinario</th>
<th >Quantità</th>
<tbody>
<?php
$result = $SSide->query($sql);
while($row = mysqli_fetch_assoc ($result)){
echo "<tr> <li <td>".$row['CodPezzi']."</td> </li>".
"<li class="ui-widget-content"><td>".$row['Tipologia']."</td> ".
"<li class="ui-widget-content"><td>".$row['Macchinario']."</td></li>".
"<li class="ui-widget-content"><td>".$row['Costruttore']."</td></li>".
"<li class="ui-widget-content"><td>".$row['sum(Quantita)']."</td></li>
</tr>";
}?>
</tbody>
</table>
</body>
</html>
并且
<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>
<table width="504" border="1" align="center" class="Tabella" id="maintable">
<th>Codice</th>
<th>Tipologia</th>
<th>Costruttore</th>
<th>Macchinario</th>
<th>Quantità</th>
<tbody>
<?php $result=$ SSide->query($sql); while($row = mysqli_fetch_assoc ($result)){ echo "
<tr>
<td>".$row['CodPezzi']."</td>". "
<td>".$row['Tipologia']."</td>". "
<td>".$row['Macchinario']."</td>". "
<td>".$row['Costruttore']."</td>". "
<td>".$row['sum(Quantita)']."</td>
</tr>"; }?>
</tbody>
</table>
<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>
</body>
</html>
这些行在鼠标悬停时变为突出显示，但无法选择。
最佳答案
StackOverflow并不是要求人们为您编写代码的地方，但是我可以为您提供解决方案：
当您创建表格行时
echo "<tr>
<td>".$row['CodPezzi']."</td>". "
<td>".$row['Tipologia']."</td>". "
...";
您可以包含以下ID和类：
while($row = mysqli_fetch_assoc ($result)){
echo "<tr class='selectableRow'>
<td class='CodPezzi'>".$row['CodPezzi']."</td>". "
<td>".$row['Tipologia']."</td>". "
...";
然后在jquery中捕获相关事件：
$("tr.selectableRow").hover(
function () {
$(this).css("background","blue");
},
function () {
$(this).css("background","");
}
);
$("tr.selectableRow").click(function () {
//
);
这应该可以帮助您走上正确的道路。