我已经在网站上搜索了答案，但我无法将为其他人提供的代码改编为我的代码。
我有一个由 PHP 使用 mysql 查询生成的表，我想让行可选(仅整行，并且不能多重选择)并从所选行中提取“CodPezzi”的值以供进一步使用:
这是我的 table
<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 () {
//
);
这应该可以帮助您走上正确的道路。
关于javascript - 使用 php 生成的表中的可选行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29233306/