如果用户单击表格行，则显示或隐藏表格行(HTML/JQuery） - Show or hide table row if user clicks on it (HTML/JQuery)

Show or hide table row if user clicks on it (HTML/JQuery)

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

我现在的代码是：

<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>

到目前为止，所有带有class="texter"的tr都将扩展。如何使只有一个 tr 将根据单击带有 class="jobtitle" 的 tr 进行切换。

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

首先，我同意在单个HTML文档中使用多个ID是错误的，也是不允许的。他修好了，这很好。但我也认为使用表格并不是上面有人所说的一个大的"nono"。至少并非总是如此。
使用表格作为表格而不是用于布局，是完全合法的。但是 OP 只是构建一个单列表，您实际上不需要表。在这种情况下，更好的做法是使用 <div> 元素并删除内联 CSS，如下所示：

<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>

然后，我会使用 jQuery-method toggleClass() 。例：

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

让CSS施展魔法：

.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;
}

瞧！

JS小提琴

这是你想做的吗？如果单击id='jobtitle'，将显示具有class='texter'的孩子。

$('#jobtitle').on('click', function(){
   $(this).find('.texter').show(); 
});

或者，如果id='jobtitle'有class='texter'，则显示文本

$('#jobtitle').on('click', function(){
    if($(this).hasClass.('texter')){
        $(this).show();
    }
});

这是我

的解决方案。它不是很好，但它现在可以工作，直到我将重构整个代码。

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

和JavaScript

function onPress(value){
        var isHidden = $('.texter'+value).is(":hidden");
        var id = "texter"+value;
    $(".texter"+value).fadeToggle();
        if (isHidden == true) {
            $(".id").show();
            $("#colorized"+value).css("background", "#06499d");
        } else {
            $(".id").hide();
            $("#colorized"+value).css("background", "#20669d");
        }
}