修改

Question

我已经在网站上搜索了答案，但我无法调整为其他人提供的代码。

我有一个PHP使用mysql查询生成的表，我想使行可选（仅整行，没有多选）并从所选行中提取“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>

鼠标悬停时，行变得高亮，但无法选择。

Answer 1

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 () {
       //
    );

这可以帮助您走上正确的轨道。

用php生成的表中的可选行

修改

1 个答案: