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 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
Angular5集成eventbus的示例代码
Jul 19 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
详解webpack的clean-webpack-plugin插件报错
Oct 16 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
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
分享10段PHP常用代码
2015/11/11 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python标准库之Sys模块使用详解
2015/05/23 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
Python实现简单的多任务mysql转xml的方法
2017/02/08 Python
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
转换科学计数法的数值字符串为decimal类型的方法
2018/07/16 Python
pandas DataFrame 行列索引及值的获取的方法
2019/07/02 Python
Python笔记之代理模式
2019/11/20 Python
Python实现搜索算法的实例代码
2020/01/02 Python
python中sys模块是做什么用的
2020/08/16 Python
python计算auc的方法
2020/09/09 Python
施工单位工程部经理岗位职责
2015/04/09 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Python Pandas 删除列操作
2022/03/16 Python
python数字图像处理数据类型及颜色空间转换
2022/06/28 Python
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技