【问题标题】:having trouble showing table rows on click of table row单击表格行时无法显示表格行
【发布时间】:2012-08-04 11:00:15
【问题描述】:

我有一个表,其中包含三行 quest_row、quest_image 和 quest_text 组。最初,只有 quest_row 是可见的 - 这有效。它显示问题编号。当用户单击表的 quest_row 行时,我希望它显示下一个 quest_image 和 quest_text 行。这是代码:

<table width="90%">
<tr>
    <td>Questions <?php echo "how many = $how_many"; ?>
    </td>
</tr>
</table>
<?php 
for ($i=1;$i<=$how_many;$i++) {
$row=mysqli_fetch_assoc($result);?>
<table name="quest_info" id="quest_info" border=1 width="100%">
    <tr class="quest_row">
        <td bgcolor="#00CCFF">
        Question# <?php echo $i; ?>
        </td>
    </tr>
<?php if ($row["image"] <> NULL) { ?>
        <tr class="quest_image" >
            <td class="quest_image" id="quest_image<?php echo $i; ?>">
                <img src="<?php $pic = $row['image']; echo $base_path . $pic; ?>" width="200" />
            </td>
        </tr>
        <tr class="quest_text" >
            <td class="quest_text" id="quest_text<?php echo $i; ?>"><?php echo $row["question"]; ?></td>
        </tr>
    </table>
    <?php
} else {
    ?>
        <tr class="quest_image" >
            <td class="quest_image" id="quest_image<?php echo $i; ?>">
            </td>
        </tr>
        <tr class="quest_text" >
            <td class="quest_text" id="quest_text<?php echo $i; ?>"><?php echo $row["question"]; ?></td>
        </tr>
    </table>
    <?php 
} ?>
<?php
}  ?>
<script type="text/javascript" src="../jquery/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".quest_text").hide();
$(".quest_image").hide();
$("#quest_info").click(function(){
    var trigger = event.target;
    alert('target = ' + target);
    if(trigger.className == 'quest_row') 
    {
            $(trigger).closest('tr').next('quest_image').show();
            $(trigger).closest('tr').next('quest_text').show();
    }
    });
});
</script>

不知道为什么这不起作用。

【问题讨论】:

    标签: jquery show-hide


    【解决方案1】:

    JQuery 在显示/隐藏表格行时出现问题。尝试使用 DIV

    【讨论】:

    • 但是我以前用过它,我已经看到了几乎与许多 jsfiddle 示例中使用的完全相同的过程。
    • 查看它是否适用于 DIV,如果适用,那么是您的表不适用于 JQuery。我记得前段时间我在做类似的事情时,我在隐藏表格行时遇到了麻烦,但我切换到了 div,一切都很好。
    • 那么,将 div 放在 tr 元素中?
    • 或将 tr 元素包装在一个 div 中?
    • 首先只是为了测试创建一个像这样的新 div &lt;div class="mydiv"&gt;&lt;/div&gt; 然后使用您的 JQuery 隐藏该 div(只是看看它是否有效)$(".mydiv").hide();
    猜你喜欢
    • 2017-11-20
    • 1970-01-01
    • 2016-02-14
    • 2017-09-21
    • 1970-01-01
    • 2018-11-01
    • 2015-07-04
    • 2011-05-03
    • 2013-03-13
    相关资源
    最近更新 更多