<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>编辑模式</title>
<style type="text/css">
table{
text-align:center;
}
.active{
background-color:red;
color: #FFFFFF;
}
</style>
</head> <body>
<div>
<input type="button" name="checkAll" value="全选">
<input type="button" name="reverseAll" value="反选">
<input type="button" name="cancleAll" value="取消">
<input type="button" name="edit" value="进入编辑模式">
</div> <div>
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>主机名</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>V1</td>
<td>111.1</td>
<td>在线</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>V2</td>
<td>111.2</td>
<td>在线</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>V3</td>
<td>111,3</td>
<td>在线</td>
</tr> </tbody>
</table>
</div> <script src="jquery-1.12.4.js" type="text/javascript"></script>
<script>
//框架加载完就执行js函数
$(function(){ //选中所有页面上的复选框。
$('[name="checkAll"]').bind('click',function() {
$("input[type='checkbox']").prop("checked", true); //*jQuery中input框单独操作方法.prop()
}); //取消所有页面上的复选框。
$('[name="cancleAll"]').bind('click',function() {
$("input[type='checkbox']").prop("checked", false);
}); //反向所有页面上的复选框。
$('[name="reverseAll"]').bind('click',function() {
$("input[type='checkbox']").each(function(k){ //#jQuery的循环语法each,k是当前索引
// this(Dom对象),代指当前循环的每一个元素 // Dom写法
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/ // jQuery写法
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/ // 三元运算var v = 条件? 真值:假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v);
});
}); //对功能按钮“编辑”监控点击事件
$(':input[name="edit"]').click(function(){
//如果退出编辑模式
if($(this).hasClass('active')){ //通过含有某个类进行筛选.hasClass()
$(this).removeClass('active'); //移除样式
$(this).prevAll().prop('disabled', false); //解禁其他功能按钮
$(this).val('进入编辑模式');
//取消checkbox的绑定事件
$(':checkbox').unbind('click'); //根据添加的input中的class属性查找并返回值
$('.my_input').each(function(){
var con = $(this).val();
$(this).parent().html(con);
});
//根据添加的select中的id属性查找全并返回值
$('#my_select').each(function(){
var con4 = $(this).val();
$(this).parent().html(con4);
}); //如果进入编辑模式
}else{
$(this).addClass('active');
$(this).prevAll().prop('disabled', true); //禁用其他功能按钮
$(this).val('退出编辑模式'); //查找循环所有checkbox
$(':checkbox').each(function(){ //如果选项勾上更改为可编辑
if($(this).prop('checked') == true){ //获取td内容并添加input框
var con = $(this).parent().next().text();
var tag = document.createElement('input');
$(tag).val(con).addClass('my_input'); //为添加的input加上共同标识class属性
$(this).parent().next().html(tag); //在其父级标签下加入input //获取td内容并添加select框
var con4 = $(this).parent().siblings().eq(2).text();
var tag4 =$(document.createElement('select')).append('<option value="在线">在线</option>').append('<option value="离线">离线</option>');
$(tag4).val(con4).attr({id:'my_select'});
$(this).parent().siblings().eq(2).html(tag4);
} //给选框绑定点击事件
$(this).bind('click', function(){ //如果编辑模式下打钩
if($(this).prop('checked') == true){ //获取td内容并添加input框
var con = $(this).parent().next().text();
var tag = document.createElement('input');
$(tag).val(con).addClass('my_input');
$(this).parent().next().html(tag); //获取td内容并添加select框
var con4 = $(this).parent().siblings().eq(2).text();
var tag4 =$(document.createElement('select')).append('<option value="在线">在线</option>').append('<option value="离线">离线</option>');
$(tag4).val(con4).attr({id:'my_select'});
$(this).parent().siblings().eq(2).html(tag4); //如果编辑模式下取消勾选需返回值
}else{ var sel_con = $(this).parent().next().children().val();
$(this).parent().next().html(sel_con); var sel_con4 = $(this).parent().siblings().eq(2).children().val();
$(this).parent().siblings().eq(2).html(sel_con4)
}
}); });
}
});
});
</script>
</body>
</html>

jQuery练习 | 复选框及编辑模式的更多相关文章

  1. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  2. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  3. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  4. jquery判断复选框是否选中

    jquery判断复选框是否被选中 $(function(){ $(document).on("click", ".checkbox",function(){ v ...

  5. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  6. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  7. jquery实现复选框全选,全不选,反选中的问题

    今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <h ...

  8. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  9. 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选

    还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...

随机推荐

  1. CEPH经常出现slow request的排查解决

    现象: 通过ceph -w日志经常发现有request blocked的问题(如果虚拟机系统跑在ceph上时,就会发现严重的卡顿现象) 排查: 1.通过dstat未发现有明显的瓶颈 (dstat -t ...

  2. page、pageContext、servletContext的区别

    ServletContext是容器上下文,指当前的一个web应用的上下文 JSP网页本身,page对象是当前页面转换后的Servlet类的实例.从转换后的Servlet类的代码中,可以看到这种关系:O ...

  3. 很震撼的HTML5视频播放器,电影院的感觉

    效果很震撼!有电影院的感觉了.呵呵. 看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData 点击这里查看效果 代码: var canvas = docum ...

  4. FindBugs缺陷库

    1.possible null pointer dereference 解释:某字段可能为空 修复:对应字段使用前判空 2.normal confidence 解释:私有成员变量没有初始化 修复:初始 ...

  5. IOS 多线程之GCD

    参考:http://www.cnblogs.com/wendingding/p/3806821.html <<Objective-C基础教程>> 第二版 一 简介 GCD 全称 ...

  6. HTML行内元素、块状元素、行内块状元素的区别

    HTML可以将元素分类方式分为行内元素.块状元素和行内块状元素三种.首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换: (1)display:inline;转换为行内 ...

  7. [Go] golang连接redis测试

    go-redis的使用1.下载代码到GOPATH环境变量指定的目录比如我的是进入目录D:\golang\code\src\github.com\go-redis , 执行git clone https ...

  8. 第一个 java 程序

    java程序的运行机制 JVM实现了跨平台 JDK > JRE > JVM java Development Kit(JDK)包含:JRE,以及增加编译器和调试器等用于程序开发的文件 Ja ...

  9. 隐藏响应的server,X-Powered-By

    隐藏X-Powered-By 修改 php.ini 文件 设置 expose_php = Off apache 隐藏 server 修改httpd.conf 设置 ServerSignature Of ...

  10. reids非关系性数据库

     1.Redis环境配置 下载安装地址: https://github.com/MicrosoftArchive/redis/releases 解压文件到指定的目录,D:\ChromeCoreDown ...