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 相关文章推荐
硬盘浏览程序,保存成网页格式便可使用
Dec 03 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
Jan 06 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
使用BootStrap实现标签切换原理解析
Mar 14 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
JS实现中英文混合文字溢出友好截取功能
Aug 06 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 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+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
IE中jscript/javascript的条件编译
2006/09/07 Javascript
原生js和jquery中有关透明度设置的相关问题
2014/01/08 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
js canvas实现星空连线背景特效
2019/11/01 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
Python fileinput模块使用介绍
2014/11/30 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Python中return语句用法实例分析
2015/08/04 Python
python中Switch/Case实现的示例代码
2017/11/09 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python实现FTP文件传输的实例
2019/07/07 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
Python定义函数实现累计求和操作
2020/05/03 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
医德考评自我评价
2014/09/14 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
Python测试框架pytest高阶用法全面详解
2022/06/01 Python
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers