用java脚本隐藏表行
Hide table row with java script
我想使用javascript隐藏表行。
我现在就是这么做的。但我知道有更好的办法。
我为每一行使用了一个表,每个表都有一个id。
当选择下拉表项时,表中只显示一行。
part of my table
<table width="100%" border="0" cellspacing="0" id="tableOneHDPT1">
<tr>
<td width="9%" align="center" bgcolor="#0471B2" height="30"><strong>Width</strong></td>
<td width="10%" align="center" bgcolor="#0471B2"><strong>Length</strong></td>
<td width="8%" align="center" bgcolor="#0471B2"><strong>Mil.</strong></td>
<td width="15%" align="center" bgcolor="#0471B2"><strong>Rolls Per Case</strong></td>
<td width="9%" align="center" bgcolor="#0471B2"><strong>1 Case</strong></td>
<td width="10%" align="center" bgcolor="#0471B2"><strong>2 Case</strong></td>
<td width="8%" align="center" bgcolor="#0471B2"><strong>5 Cases</strong></td>
<td width="11%" align="center" bgcolor="#0471B2"><strong>10 Cases</strong></td>
<td width="10%" align="center" bgcolor="#0471B2"><strong>25 Cases</strong></td>
<td width="10%" align="center" bgcolor="#0471B2"><strong>60 Cases</strong></td>
</tr>
<tr>
<td colspan="10" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" id="PT1Row1">
<tr>
<td width="9%" align="center">2''</td>
<td width="10%" align="center">55 yds.</td>
<td width="8%" align="center">2</td>
<td width="15%" align="center">72</td>
<td width="9%" align="center">N/A</td>
<td width="10%" align="center">N/A</td>
<td width="8%" align="center">$4.12</td>
<td width="11%" align="center">$3.64</td>
<td width="10%" align="center">$3.04</td>
<td width="10%" align="center">$2.54</td>
</tr>
</table></td>
</tr></table>
下拉
<select name="TapeSizeHDPT" id="TapeSizeHDPT">
<option selected="selected" value="-1"><Select></option>
<option value="HDPT1">2"x55 yds.</option>
<option value="HDPT2">3"x55 yds.</option>
<option value="HDPT3">2"x 110 yds.</option>
<option value="HDPT4">3"x 110 yds.</option>
<option value="HDPT5">2"x 1000 yds.</option>
<option value="HDPT6">3"x 110 yds.</option>
</select>
这是我的js:
$('#TapeSizeHDPT').change(function() {
if ($('#TapeSizeHDPT option:selected').val() == "HDPT1") {
$('#PT1Row1').show();
$('#PT1Row2').hide();
$('#PT1Row3').hide();
$('#PT1Row4').hide();
$('#PT1Row5').hide();
$('#PT1Row6').hide();
}
});
您可以将其一般化,并将其写得更短,如:
$('#TapeSizeHDPT').change(function () {
$('#PT1Row'+$(this).val().replace('HDPT')).show().siblings().hide();
});
我们实际上在这里做的是获取被选中选项的数字部分并显示相应的tr
,同时隐藏其所有兄弟(即所有其他tr
)
您可以隐藏<TBODY>
:
$('#some_tbody').children().hide();
然后显示您想要显示的1个<TR>
:
$('#' + this.value).show(); // this.value is from the <select> onchange event
为此,您需要<TABLE>
与<THEAD>
和<TBODY>
:
<table>
<thead>
<tr>... THs here ...</tr>
</thead>
<tbody id="some_tbody">
<tr id="HDPT1">...</tr>
<tr id="HDPT2">...</tr>
<tr id="HDPT3">...</tr>
<tr id="HDPT4">...</tr>
</tbody>
</table>
而不是所有的<TR>
直接在<TABLE>
.
将下拉菜单的值改为数字1,2…然后
$('#TapeSizeHDPT').change(function () {
var id = '#PT1Row' + $(this).val();
$('#table').find(':visible').hide();
$(id).show();
})
相关文章:
- 火虫找到隐藏我的元素的脚本
- jQuery:调用脚本时隐藏元素
- 如何向登录用户隐藏选择加入脚本
- Java脚本显示隐藏字段
- 脚本执行,但代码隐藏不执行
- 什么脚本隐藏父菜单项
- 从Java脚本调用C#代码隐藏代码
- 如何制作jquery脚本,在表为空时隐藏表
- 共享脚本可以对与之共享脚本的用户隐藏吗
- 如果在外部单击,则隐藏弹出窗口.为什么我的脚本没有'不起作用
- 如何隐藏脚本Cam
- 通过脚本在中隐藏元素,然后使用函数显示
- 隐藏的“纬度”和“lng”字段没有被删除,所以我的脚本仍在从不正确的地理位置中搜索纬度和液化天然气结果
- 将text.innerHTML修改为显示/隐藏脚本中的图像
- 如何使用 JQuery 显示/隐藏脚本来显示隐藏的文本
- 显示/隐藏脚本无法在第二次单击时再次隐藏
- 为什么我的显示/隐藏脚本不工作
- 增强这个简单的JS显示/隐藏脚本
- 使用javascript显示/隐藏脚本
- 显示隐藏脚本不工作在JQuery