Js代码中的span拼接问题解决


Posted in Javascript onNovember 22, 2019

这篇文章主要介绍了Js代码中的span拼接问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

今天遇到一个小需求,用bootstrap的table只有两个字段,占用太宽,页面不美观,组长要求用拼接,一行几列的形式展现出来。

我在form表单中拼接了span,遇到以下问题:

1.点击查询,以前生成的span不消失,新的拼接在后面

2.span中的复选框,值的取出,复选框的状态更换

对于职场老手来说,这没什么,但是js代码没接触多久的我来说,只能撞墙寻出口,边撞边试。

我选择的是遍历form删除,下面是代码

$('span', form).each(function(){
  $(this).remove();
});
/*这里的form,我换成了$("#"+id)*/

------》对与复选框的取值

1).复选框若是value,直接$(this).val();若是自定义,则是$(this).attr("name");比如

$('input[class="checkbox"]:checked').each(function(){
/*对于选中复选框的value取值*/
  $(this).val();
/*自定义取值*/$(this).attr("自定义的名字");
  });

2).复选框的状态

对于全选用prop,prop() 方法设置或返回被选元素的属性和值。全选、取消全选的事件 使用prop可以避免版本迭代的bug,避免出现只能全选一次

function selectAll(){  
  if ($("input[name='ck']").prop("checked")) {     
    $("input[type='checkbox'][name='cks']").prop("checked",true);//全选
  } else {       
    $("input[type='checkbox'][name='cks']").prop("checked",false); //取消全选   
  } 
}

复选框就是根据checked的true或false改变状态,在遍历的选中复选框下,改变复选框对象obj.checked=false就改变了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
Js 随机数产生6位数字
May 13 Javascript
javascript getElementsByTagName
Jan 31 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
微信小程序商品详情页底部弹出框
Nov 22 #Javascript
小程序实现图片预览裁剪插件
Nov 22 #Javascript
Vue数据双向绑定底层实现原理
Nov 22 #Javascript
Node如何后台数据库使用增删改查功能
Nov 21 #Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
Nov 21 #Javascript
微信小程序动态设置图片大小的方法
Nov 21 #Javascript
通过原生vue添加滚动加载更多功能
Nov 21 #Javascript
You might like
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
javascript 按回车键相应按钮提交事件
2009/11/02 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
纯JavaScript实现的分页插件实例
2015/07/14 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
jQuery EasyUI封装简化操作
2016/09/18 Javascript
ajax与json 获取数据并在前台使用简单实例
2017/01/19 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
意大利和国际奢侈品牌购物网站:Suitnegozi.com
2021/01/15 全球购物
高中毕业自我评价
2014/02/08 职场文书
音乐课外活动总结
2015/05/09 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers