<!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>
浙公网安备 33010602011771号