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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
jquery 3D球状导航的文章分类
Jul 06 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
微信小程序返回多级页面的实现方法
Oct 27 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 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
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
基于PHP常用函数的用法详解
2013/05/10 PHP
PHP按行读取、处理较大CSV文件的代码实例
2014/04/09 PHP
php实现word转html的方法
2016/01/22 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python中优化NumPy包使用性能的教程
2015/04/23 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
比驿:全球酒店比价网
2018/06/20 全球购物
优秀团员自我评价范文
2014/04/23 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
会计做账心得体会
2016/01/22 职场文书
python lambda 表达式形式分析
2022/04/03 Python