Question

我点击这个脚本时打开table2，点击按钮'更多细节'

 <script>
  $(document).ready(function() {

       $('#Table1 tr').click(function(event){

         $('#Table2').show();
         alert($(this).attr('id'));
       });
     });

</script>

这是我的代码

 <table id= "Table1" width='100%' border='1' cellspacing='0' cellpadding='0'>
    $sql2=..
    $sql3 = blabla ;
    while($row3 =mysql_fetch_array($sql3)){
    $sql4 = mysql_query (" SELECT $ww as place FROM data WHERE $ww =".$row3[$ww]." and  id_user = ".$userid." ");
    $row4 = mysql_fetch_array($sql4) ;
    $string = "<blink > here  </blink>" ;

    $wnumber = $row3[$ww] ;

     echo "<tr id= '".$wnumber."'><td  style= 'text-align : center ;'>Week ".$row3[$ww]."
              </td>" ;
     echo "<td >".(int) $row3["percent"] ."% </td>";
     echo "<td > "?><?php if($row4['place'] == 
     $row3[$ww] and $row2['id'] == $userid ){ echo $string ; } else { echo "";} ;?><?php
     "</td>";
     echo "<td ><button class='showr'>More Details</button> </td></tr>";
    //More Details when clicking on this buttom it open the table2
     }
   </tr>
 </table>

这是第二张表

 <?php
    echo "<div id= 'Table2' style= 'display:none;'>";
    echo "<table width='100%' border='1' cellspacing='0' cellpadding='0'>";
    echo "<th> Week ".$wnumber."</th>";
    echo "<th>try2</th>";
    echo "<tr ><td>day</td>";
    echo "<td>fff</td></tr>";
    echo "</table></div>";
 ?>

*我现在有5行5个buttoms。 *现在发生的事情就是当点击每个底部时它回显相同'$ wnumber'让我们说6。然而它从行到行延迟， - 脚本适用于单击哪一行的id的警报。 - 只使用最后一行id的最后一个按钮。 *我想要的是每个底部都有它的行ID，它反映了正确的'$ wnumber' *我试过的是（在div中制作变量）

   echo "<div id= '".$wnumber."' style= 'display:none;'>";

而不是

    echo "<div id= 'Table2' style= 'display:none;'>";

但没有工作。

希望它清楚，并有解决方案。

编辑：此源代码

   <script src="http://code.jquery.com/jquery-latest.js"></script>


    <script>
    $(document).ready(function() {

   $('#Table1 tr').click(function(event){

     $('#Table2').show();
     alert($(this).attr('id'));
   });
 });

  </script>

  <br />
  <table id= "Table1" width='100%' border='1' cellspacing='0' cellpadding='0'>
  <th >Weeks</th>
 <th ><p></p></th>

 <th > Your place</th>
 <th > More Details</th>
<tr>
 <tr id= '1'><td  style= 'text-align : center ;'>Week 1</td><td style= 'text-align : 
  center ;'>33% </td><td  style= 'text-align : center ;'> <td style= 'text-align :  
  center ;'><button class='showr'>More Details</button></td></tr><tr id= '6'><td   
  style= 'text-align : center ;'>Week 6</td><td style= 'text-align : center ;'>33%   
  </td><td  style= 'text-align : center ;'> <td style= 'text-align : center   
  ;'><button  
  class='showr'>More Details</button></td></tr><tr id= '13'><td  style= 'text-align:   
  center ;'>Week 13</td><td style= 'text-align : center ;'>33% </td><td  style=   
  'text-align : center ;'> <blink style= 'color:#990000 ;font-weight: bolder;' >  69   
  here </blink><td style= 'text-align : center ;'><button class='showr'>More   
  Details</button></td></tr></tr>

 </table>
 <br />
 <div id= 'Table2' style= 'display:none;'><table width='100%' border='1'  
  cellspacing='0' cellpadding='0'><th> Week 13</th><th>try2</th><tr ><td>day</td>  
  <td>fff</td></tr></table></div>
  <br /><br /> <br />

Answer 1

我在纠正丢失的td，tr后尝试了您的HTML代码。然后单击每行/按钮将显示div。确保在php echo

中形成正确的html代码

Answer 2

尝试这样的事情：

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function() {
        $('#Table1 tr').click(function(event){
            $('#details').find('#week' + $(this).attr('id')).show();
            // alert($(this).attr('id'));
        });
    });

</script>
<?php

$result = mysql_query($sql);

// save the results to an array so you can loop them twice
while($row = mysql_fetch_array($result)) :
    $rows[] = $row;
endwhile;

?>
<table id="table1">
    <tr>
        <th>heading</th>
        <th>heading</th>
        <th>heading</th>
        <th>heading</th>
    </tr>
    <?php foreach ($rows as $row) : // loop #1 to output the main table ?>
    <tr id="<?php echo $row['ww'] ?>">
        <td>value</td>
        <td>value</td>
        <td>value</td>
        <td><button type="button">More details</button></td>
    </tr>
    <?php endforeach; ?>
</table> <!-- end table 1 -->

<div id="details">
    <?php foreach ($rows as $row) : // loop #2 to output a table for each set of details ?>
    <table id="week<?php echo $row['ww'] ?>" style="display: none">
        <tr>
            <th>Week <?php echo $row['ww'] ?></th>
            <th>try2</th>
        </tr>
        <tr>
            <td>value</td>
            <td>value</td>
        </tr>
    </table>
    <?php endforeach; ?>
</div> <!-- end details -->

Answer 3

我将您的代码复制/粘贴到jsFiddle中，它似乎按预期工作。单击该行会发送具有正确ID的警报。

http://jsfiddle.net/JeeNN/

你的意图中是否有我遗漏的东西？

注意：最佳做法是跳过内联CSS并为表添加外部样式。此外，有效的HTML是必须的。

更新

我继续格式化你发布的php代码，所以它更容易阅读。有些变量没有定义，还有一些其他问题，但我确定你的php文件中有正确的。

我认为你想要第二次运行循环来创建第二个表。在第二个循环中，每个循环回显第二个表 - 最终会得到一堆表（每行一个加上第一个表）。然后，只需在用户点击每个ID时交换表格的可见性。

这就是你要找的东西吗？如果没有，或许试着改写你的问题。

这是格式化的代码：

<table id="Table1" width='100%' border='1' cellspacing='0' cellpadding='0'>
<?php
$sql2 = [..];
$sql3 = [..];
$ww = ?;

while($row3 = mysql_fetch_array($sql3)){

    $sql4 = mysql_query ("SELECT $ww as place FROM data WHERE $ww =".$row3[$ww]." and  id_user = ".$userid." ");
    $row4 = mysql_fetch_array($sql4) ;
    $string = "<blink> here </blink>" ;

    $wnumber = $row3[$ww];

    echo "<tr id='".$wnumber."'>";
        echo "<td style='text-align:center;'>Week ".$row3[$ww]."</td>";
        echo "<td>".(int) $row3["percent"] ."% </td>";
        echo "<td>":
        if($row4['place'] == $row3[$ww] and $row2['id'] == $userid ){
            echo $string;
        } else {
            echo "&nbsp;";
        }
        echo "</td>";
        //More Details when clicking on this buttom it open the table2
        echo "<td ><button class='showr'>More Details</button></td>";
    echo "</tr>";
} ?>
</table>

<div id= 'Table2' style= 'display:none;'>
    <table width='100%' border='1' cellspacing='0' cellpadding='0'>
        <tr>
            <th> Week <?php echo $wnumber; ?></th>
            <th>try2</th>
        </tr>
        <tr>
            <td>day</td>
            <td>fff</td>
        </tr>
    </table>
</div>

检索表行的id？

3 个答案: