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学习笔记(二) js一些基本概念
Jun 18 Javascript
在子窗口中关闭父窗口的一句代码
Oct 21 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
jQuery操作css样式
May 15 jQuery
微信小程序实现折叠面板
Jan 31 Javascript
Angular angular-file-upload文件上传的示例代码
Aug 23 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
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
PHP数据库开发知多少
2006/10/09 PHP
PHP实现用户认证及管理完全源码
2007/03/11 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
详解WordPress中添加和执行动作的函数使用方法
2015/12/29 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
node.js超时timeout详解
2014/11/26 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
Ionic快速安装教程
2016/06/03 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
15分钟深入了解JS继承分类、原理与用法
2019/01/19 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
python生成器generator用法实例分析
2015/06/04 Python
Python使用爬虫猜密码
2016/02/19 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Css3圆角边框制作代码
2015/11/18 HTML / CSS
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
大学生表扬信范文
2014/01/09 职场文书
业务内勤岗位职责
2014/04/30 职场文书
文明演讲稿范文
2014/05/12 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2019教师的学习计划
2019/06/25 职场文书
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python