1

单击按钮“更多详细信息”时，我有以下脚本可以打开 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 个按钮。*现在发生的情况是，当单击每个底部时，它会回显相同的“$ 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 />
4

3 回答 3

1

尝试这样的事情：

<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 -->
于 2012-04-21T18:53:58.593 回答
1

td在更正丢失的,后，我尝试了您的 html 代码tr。然后单击每一行/按钮显示div. 确保您在 php 中形成正确的 html 代码echo

于 2012-04-21T18:29:59.910 回答
0

我将您的代码复制/粘贴到 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>
于 2012-04-21T18:26:38.337 回答