javascript - 切换加/减单个按钮以显示和隐藏表格
问题描述
$(document).ready(function() {
$("#t1").hide(); // hide table by default
$('#sp1').on('click', function() {
$("#t1").show();
});
$('#close').on('click', function() {
$("#t1").hide();
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/fontawesome.css" rel="stylesheet"/>
<div class="col-md-12 col-12 table-responsive">
<div class="form-group">
<div class="col-md-12" style="padding: 10px !important;" align="center">
<div class="form-group">Main heading</div>
</div>
<table class="table table-hover">
<thead class="lbbg3">
<tr>
<td style="width: 800px;">Sub heading 1</td>
<td>Sub heading 2</td>
</tr>
</thead>
<tbody>
<tr>
<th style="background: #eef7fc; text-align: left;" colspan="2">
<button class="table-plus-btn table1" id="sp1"><i class="fa fa-plus"></i></button><button class="table-minus-btn" id="close"><i class="fa fa-minus"></i></button> Child Heading
</th>
</tr>
<tr>
<td colspan="2">
<div class="table1shw">
<table class="table1 table-hover" id="t1">
<tr>
<td style="text-align: left; width: 800px;">
Row 1
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<a href="#doc">
<input type="radio" id="customRadio50" name="customRadio" class="custom-control-input fcy edu docbtn" />
<label class="custom-control-label" for="customRadio50" style="cursor: pointer;" onchange="valueChanged()"></label>
</a>
</div>
</td>
</tr>
<tr>
<td style="text-align: left; width: 800px;">
Row 2
</td>
<td style="text-align: center;">
<div class="custom-control custom-radio radio-table">
<input type="radio" id="customRadio51" name="customRadio" class="custom-control-input fcy" />
<label class="custom-control-label" for="customRadio51" style="cursor: pointer;"></label>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
嗨,目前我正在使用两个按钮加号和减号,只是我需要一次显示一个按钮。当加号按钮单击隐藏表将显示,减号按钮应出现,加号按钮隐藏。减号按钮也一样。更多我们可以说切换按钮。还需要我们一次只能显示一个隐藏的表格。
当前所有代码和表格都可以正常工作,我将这种方法用于手风琴,但不用于表格。
解决方案
你也可以写得短一点
$(document).ready(function() {
$("#t1, #close").hide();
$('#sp1, #close').on('click', function() {
$('#t1, .table-plus-btn, .table-minus-btn').toggle();
});
});
推荐阅读
- spartacus-storefront - B2B/Powertools Spartacus 3.3 - MyAccount 中缺少“重新订购”、“取消”和“退货”选项
- python - Pandas:数据框计算 - 带除法的新行,带总和和平均值的新列
- excel - 如果我在此类单元格上使用 VBA 函数,如何获取单元格地址?
- github - 列出所有请求的评论
- search - 如何在记事本++的窗口顶部显示找到的行
- java - ArrayList 索引中的换行符
- outlook - SharePoint 日历使用特定筛选器视图连接到 Outlook(审批工作流)
- sql - 根据组合的其他 2 列查询表中的 1 列
- quarkus - Quarkus - Optaplanner 调整算法
- javascript - Ember 3.25 BelongsTo not sideloading