如果用户点击它,则显示或隐藏表格行(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 只是构建了一个单列表,您实际上不需要一个表.在这种情况下,更好的做法是使用
<?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;}
瞧!
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á!
这篇关于如果用户点击它,则显示或隐藏表格行(HTML/JQuery)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!