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

这篇文章主要介绍了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就改变了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • element-ui table span-method(行合并)的实现代码

    element-ui table span-method(行合并)的实现代码

    element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需要做一些修改.我们首先解读一下官网实例中的各参数的意义: objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { //用于设置要合并的列 if (rowIndex % 2 === 0) { //用于设置合并开始的行号 return { row

  • JS 获取span标签中的值的代码 支持ie与firefox

    ie支持outerText,firefox支持textContent 复制代码 代码如下: if (isIE) { var spanTest=document.getElementById('spanTest'); spanValue = spanTest.outerText; } else { spanValue = spanTest.textContent; }

  • javascript 动态table添加colspan\rowspan 参数的方法

    解决方法:取得表对象,并取得他下面对应的行对象下的某个元素,这里如document.tableId.rows[i].cells[j]即取得表下第i行下的第j个元素,然后document.tableId.rows[i].cells[j].colspan=n即可. eg: dempTHFirst为要增加行或列属性的元素. demoThFirst.colSpan=3;

  • JS 如果改变span标签的是否隐藏属性

    测试: test.html 代码: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <SCRIPT LANGUAGE="JavaScript" src="js/Menu.js"></S

  • js获取html的span标签的值方法(超简单)

    js获取html的span标签的值方法(超简单)

    HTML中代码为: <span id="testid">aaaa</span> 获取的js代码: 方法一:.innerText var x1 = document.getElementById("testid").innerText; alert("x1="+x1); 方法二:.innerHTML var x2 = document.getElementById("testid").innerHTML;

  • JScript|Event]面向事件驱动的编程(二)--实例讲解:将span模拟成超连接

    作者:泣红亭 在上一篇文章<面向事件驱动的编程>中我讲了三种将事件绑定到元素的方法,而推荐使用第三种方法,即使用attachEvent/addEventListener来绑定.上一篇文章的主旨是告诉大家如何使用事件,而这一篇文章的主旨是让大家弄懂如何灵活应用事件来批处理某一类的对象行为. 首先讲一讲事件传递的概念.什么是事件传递?举个现实的例子,有个人捏了一下你的手指,你可能会说他捏了你手指,也可能会说他捏了你的手,甚至可能会说他捏了你.事实上三种说法都没错,在浏览器事件的执行中亦有相似的情况

  • js动态修改表格行colspan列跨度的方法

    本文实例讲述了js动态修改表格行colspan列跨度的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script> function setColSpan() { var x=document.getElementById('myTable').rows[0].cells; x[0].colSpan="2"; x[1].colSpan="6"; } </sc

  • javascript给span标签赋值的方法

    js给span标签赋值的方法?一般有两种方法: 第一种方法:输出html <body onload="s()"> <span id="hello"></span> <script language="javascript"> function s(){ document.getElementById("hello").innerHTML = "<iframe sr

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

    这篇文章主要介绍了Js代码中的span拼接问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天遇到一个小需求,用bootstrap的table只有两个字段,占用太宽,页面不美观,组长要求用拼接,一行几列的形式展现出来. 我在form表单中拼接了span,遇到以下问题: 1.点击查询,以前生成的span不消失,新的拼接在后面 2.span中的复选框,值的取出,复选框的状态更换 对于职场老手来说,这没什么,但是js代码没接触多久的我来说,只

  • 如何在js代码中消灭for循环实例详解

    前言 这篇文章基于我在公司内部分享会整理而成.欢迎探讨补充. 补充一:看来很多人没看完文章就评论了.我在文章末尾说了,是不写 for 循环,不是不用 for 循环.简单陈述不写 for 循环的理由:for 循环易读性差,而且鼓励写指令式代码和执行副作用.更多参考这篇文章 补充二:回应大家的一些反对意见.本来准备专门写文章回应的,但是没时间,就简短回复,直接扔链接了. 1.for 循环性能最好.回应:微观层面的代码性能优化,不是你应该关注的.我在文章中演示了,对百万级数据的操作,reduce 只比

  • 详解如何在JS代码中消灭for循环

    Edit: 在我入职第三家公司的第一天,看到代码库里面一堆的 for 循环,内心有些崩溃,于是做了一次技术分享,展示怎样在代码中避免 for 循环.这篇文章是那次分享的总结.本文并不完美,其中递归的部分其实不应该在目前的生产环境中使用.但是我依然坚持认为 JS 引擎应该支持尾调优化,写尾递归和写循环性能没差别. 一,用好 filter,map,和其它 ES6 新增的高阶遍历函数 问题一: 将数组中的 falsy 值去除 const arrContainsEmptyVal = [3, 4, 5,

  • Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因

    看到别人写的JS,ajax请求地址后加随机参数,比如XXXX?t= + new Date().getTime(). 一开始搞不懂为什么,网上查了资料,原因是防止浏览器缓存. 浏览器为了提高用户访问同一页面的速度,会对页面数据进行缓存.当url请求地址不变时, 有时候会导致浏览器不发送请求,直接从缓存中读取之前的数据. 如果数据改变了,而没加随机数,读取的数据会跟之前一样. 加上随机数,就是欺骗浏览器url改变了,会每次都向服务器发送请求而不去读缓存

  • 几种延迟加载JS代码的方法加快网页的访问速度

    本文介绍了如何延迟javascript代码的加载,加快网页的访问速度. 当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点: 1.延迟加载js代码 复制代码 代码如下: <script type="text/javascript" src="" id="my"></script> <script type="text/

  • 实现动画效果核心方式的js代码

    下边我就简单说一下过程和原理.第一步:实现一个匿名函数并能自己执行. 复制代码 代码如下: (function(){ })() 这个函数在一样编的好的JS代码中经常会见到,起到闭包,自动执行的效果,在函数后加一对()表示自动执行,前边的匿名函数需要用()包起来,这样才能为宿主(我们的BOM环境)理解,里面的function(){}这就是个匿名函数.第二步:实现动画,以改变一个box的秀明度来说明.id为animation的div 复制代码 代码如下: <div id="animation&

  • 用js代码改变单选框选中状态的简单实例

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 复制代码 代码如下: function doGender(gender) { if (gender == "男") { gel("radionan").style.checked = "checked"; } else { gel("radionv").style.checked = "checked"; }} function

  • 禁止空格提交表单的js代码

    在做项目的时候,有个页面我用到了ckeditor,可是问题来了,我在只要有文本框的地方按下回车键就会自动刷新.最后终于找到了解决的方法: 复制代码 代码如下: <input type="text" name="mes.mesTitle" value="<s:property value='mes.mesTitle'/>" class="InputStyle" onkeydown="keydown(t

  • 让网站自动生成章节目录索引的多个js代码

    让网站自动生成章节目录索引的多个js代码

    第一种:只支持一级目录 <h3>,作为段落不支持分类 一个好的博文除了博文的质量要好以外,好的组织结构也能让读者阅读的更加舒服与方便,我看园子里面有一些园友的博文都是分章节的,并且在博文的前面都带有章节的目录索引,点击索引之后会跳转到相应的章节阅读,并且还可以回到目录顶端,其中 Fish Li 的博文就是这种组织,当然这种结构如果是在写博文的时候人工设置那是非常麻烦的,无疑是增加了写作人的工作量.如果能自动生成章节索引岂不是节省了一大堆工作量.本来想通过FireBug看看Fish Li源码是怎

  • JS 调试中常见的报错问题解决方法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Function.m.parseJSON (jquery.js:8515) at Object.success (crud.html:45) at j (jquery.js:3143) at Object.fireWith [as resolveWith] (jquery.js:3255) at x (

随机推荐