获得select的选中值,并控制table中某个tr的显示与隐藏

在html中,我们根据id为type的select控件值的变化,动态变化business,city,district的显示情况。
在table中控制tr的显示与隐藏时,不要用$(".business").css(display, "block"),这样会使tr的显示出现问题,用hide和show即可。

$("#type").change(function(){
		var type = $("#type option:selected").val();
		if(type=="0"){
			$(".business").hide();
		}
		if( type=="1"){
			$(".business").hide();
			$(".province").show();
		}
		if( type=="2"){
			$(".business").hide();
			$(".city").show();
		}
		if( type=="3"){
			$(".business").hide();
			$(".district").show();
		}
		if( type=="4"){
			$(".business").show();
		}
	});
 
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在 Vue 实现 table 表格全选功能,可以通过以下步骤: 1. 在 data 定义一个变量,用来表示是否全选,例如 `selectAll: false` 2. 在 table 表格添加一个全选的 checkbox,绑定到 selectAll 变量上,例如: ``` <thead> <tr> <th><input type="checkbox" v-model="selectAll"></th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> ``` 3. 在每一行的 checkbox 绑定一个 selected 属性,用来表示该行是否被选中,例如: ``` <tbody> <tr v-for="(item, index) in list" :key="index"> <td><input type="checkbox" v-model="item.selected"></td> <td>{{ item.column1 }}</td> <td>{{ item.column2 }}</td> <td>{{ item.column3 }}</td> </tr> </tbody> ``` 4. 监听 selectAll 变量的变化,在其变为 true 时将所有行的 selected 属性都设置为 true,在其变为 false 时将所有行的 selected 属性都设置为 false,例如: ``` watch: { selectAll: function(val) { this.list.forEach(function(item) { item.selected = val; }); } } ``` 5. 实现全选和取消全选的方法,例如: ``` methods: { selectAllRows: function() { this.selectAll = true; }, deselectAllRows: function() { this.selectAll = false; } } ``` 将这两个方法绑定到全选和取消全选的按钮上即可。 完整代码示例: ``` <template> <div> <button @click="selectAllRows">Select All</button> <button @click="deselectAllRows">Deselect All</button> <table> <thead> <tr> <th><input type="checkbox" v-model="selectAll"></th> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr v-for="(item, index) in list" :key="index"> <td><input type="checkbox" v-model="item.selected"></td> <td>{{ item.column1 }}</td> <td>{{ item.column2 }}</td> <td>{{ item.column3 }}</td> </tr> </tbody> </table> </div> </template> <script> export default { data() { return { selectAll: false, list: [ { column1: 'Row 1 Column 1', column2: 'Row 1 Column 2', column3: 'Row 1 Column 3', selected: false }, { column1: 'Row 2 Column 1', column2: 'Row 2 Column 2', column3: 'Row 2 Column 3', selected: false }, { column1: 'Row 3 Column 1', column2: 'Row 3 Column 2', column3: 'Row 3 Column 3', selected: false } ] } }, watch: { selectAll: function(val) { this.list.forEach(function(item) { item.selected = val; }); } }, methods: { selectAllRows: function() { this.selectAll = true; }, deselectAllRows: function() { this.selectAll = false; } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值