表格下拉框选择,联动表格行的联动显示和隐藏,tr行的显示和隐藏

需求:

表格中的会议主题一栏,为一个下拉框,需要实现选择的值为“座谈会”和“常委会”的时候,表格的结尾才会显示出会议说明这一栏。其他情况都默认为隐藏。上一个效果图:
默认隐藏:
在这里插入图片描述
选择改变,会议说明出现:
在这里插入图片描述
现在就讲解一下我是怎么实现的,作为前端我也是小白,不喜勿喷……
先将这一行默认隐藏,使用该属性隐藏。

display: none;

元素成功隐藏,接下来为会议主题的select元素增加一个Onchange的触发事件:

//html代码
<tr>
	<td class="lable_td">会议主题:</td>
	<td colspan="3">
		<select id="meetname" name="meetname">
			<option value="1" selected="selected">办公室会议</option>
			<option value="2">常委会</option>
			<option value="3">座谈会</option>
		</select>
	</td>
</tr>
//js代码
	document.getElementById("meetname").onchange = function(){
		let meetname = this.options[this.selectedIndex].value;
		//alert(meetname);
		if(meetname==2||meetname==3){
			document.getElementById("description_id").style.display = "table-row";
		}else{
			document.getElementById("description_id").style.display = "none";
		}	
	}

成功!!!!!

注意点:这里的设置显示的display属性要用table-row属性

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Outlier9527

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值