如果用户点击它，则显示或隐藏表格行(HTML/JQuery) [英] Show or hide table row if user clicks on it (HTML/JQuery)

问题描述

我在使用 jquery 显示或隐藏表行时遇到问题.我希望如果用户点击带有 id="jobtitle" 的表格行，那么带有 class="texter" 的 tr 将显示或隐藏(如果已经打开).

我现在的代码是:

<?php foreach($works as $w){ ?><tr id="jobtitle" onclick="onPress()"><td><?php echo $w->title;?></td></tr><tr class="texter" style="display:none;"><td><?php echo $w->text;?></td></tr><?php } ?></tbody><脚本>函数 onPress(){var isHidden = $('.texter').is(":hidden");如果(isHidden == true){$(".texter").show();$("#colorized").css("背景", "#06499d");} 别的 {$('.texter').hide();$("#colorized").css("背景", "#20669d");}}

到目前为止，所有带有 class="texter" 的 tr 都会扩展.如何根据 class="jobtitle" 上的 tr 点击来使只有一个 tr 切换.

解决方案

因为我没有 50 个代表，所以我需要写一个答案而不是评论.它以某种方式演变成一个完整的答案，而不仅仅是一个评论.

首先，我同意在单个 HTML 文档中使用多个 ID 是错误的，也是不允许的.他解决了这个问题，这很好.但我也认为使用表格并不是上面有人所说的大nono".不总是，至少.
使用表格作为表格而不是用于布局，是完全合法的.但是 OP 只是构建了一个单列表，您实际上不需要一个表.在这种情况下，更好的做法是使用

元素并删除内联 CSS，如下所示:

<?php $num = 1;?><?php foreach($works as $w){ ?><div id="colorized<?php echo $num; ?>"class="fromage"><div class="title"><?php echo $w->title;?>
<div class="texter"><?php echo $w->text;?>

<?php $num++;?><?php } ?>

然后，我将使用 jQuery 方法 toggleClass().示例:

$(document).ready(function(){$('.title').click(function(){$(this).parent().toggleClass("baguette");});});

让 CSS 发挥作用:

.texter {显示:无；}.fromage {背景:#06499d；光标:指针；/* 显示它是可点击的 */填充:.5em；/* 纯美 */颜色:#fff;/* 纯美 */}.baguette .texter {显示:块；}.baguette.fromage {背景:#20669d；}

瞧！

JS 小提琴

Im having a problem showing or hiding a table rows with jquery. I want that if user clicks on table row with id="jobtitle" then tr with class="texter" will show up or hide if already opened.

my code right now is:

<table>
    <tbody>
        <?php foreach($works as $w){ ?>
            <tr id="jobtitle" onclick="onPress()">
                <td>
                    <?php echo $w->title; ?>
                </td>
            </tr>
            <tr class="texter" style="display:none;">
                <td>
                    <?php echo $w->text; ?>
                </td>
            </tr>
        <?php } ?>
    </tbody>
</table>

<script>
    function onPress(){
            var isHidden = $('.texter').is(":hidden");
            if (isHidden == true) {
                $(".texter").show();
                $("#colorized").css("background", "#06499d");
            } else {
                $('.texter').hide();
                $("#colorized").css("background", "#20669d");
            }
    }
</script>

So far all tr with class="texter" will expand. How to make that only one tr will toggle based on click on tr with class="jobtitle".

解决方案

Since I haven't got 50 rep I need to write an answer instead of a comment. It somehow evolved into a complete answer rather than just a comment.

First of all, I agree that using multiple IDs inside a single HTML document is wrong and also not allowed. He fixed that, which is nice. But I also think that using tables is NOT a big "nono" as someone called it above. Not always, at least.
Using a table as a table and not for layouting, is imo totally legit. But the OP just builds a single column table, where you actually wouldn't need a table. In this case, a better practice would be using <div> elements and remove inline CSS as followed:

<div class="wrap">
    <?php $num = 1; ?>
        <?php foreach($works as $w){ ?>
        <div id="colorized<?php echo $num; ?>" class="fromage">
            <div class="title">
                <?php echo $w->title; ?>
            </div>
            <div class="texter">
                <?php echo $w->text; ?>
            </div>
        </div>
        <?php $num++; ?>
    <?php } ?>
</div>

Then, I'd use the jQuery-method toggleClass(). Example:

$(document).ready(function(){
    $('.title').click(function(){
        $(this).parent().toggleClass("baguette");
    });
});

An let the CSS do the magic:

.texter {
    display: none;
}

.fromage {
    background: #06499d;
    cursor: pointer; /* to show it's clickable */
    padding: .5em; /* pure beauty */
    color: #fff; /* pure beauty */
}

.baguette .texter {
    display: block;
}

.baguette.fromage {
    background: #20669d;
}

Voilá!

JS Fiddle

这篇关于如果用户点击它，则显示或隐藏表格行(HTML/JQuery)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！