一 程序要求:
1 表格可以全选,反选和取消选择
2 表格进入编辑状态时,一旦选中某行,该行也会立即进入编辑状态
3 所有被勾选的行在进入编辑状态后,都可以重新输入值
4 输入的值在退出编辑状态后,显示在表格中
二 页面样式截图
三 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.s1{background-color: #8b514d;color: #cccccc}
.c1{height: 50px;line-height: 50px;}
.using{background-color: green;}
</style>
</head>
<body>
<div class="c1">
<input type="button" value="全选" class="iall"/>
<input type="button" value="取消" class="icansle"/>
<input type="button" value="反选" class="irever"/>
<span class="s1">点这里编辑</span>
</div>
<div>
<table border="1px">
<thead>
<tr>
<th>选择</th>
<th>名称</th>
<th>端口</th>
<th>状态</th>
</tr>
</thead>
<tbody class="t1">
<tr>
<td><input type="checkbox"/></td>
<td>ss</td>
<td>80</td>
<td>在线</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>aa</td>
<td>82</td>
<td>在线</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>sss</td>
<td>87</td>
<td>离线</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>www</td>
<td>22</td>
<td>离线</td>
</tr>
</tbody>
</table>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.iall').click(function () {
$('.t1 :checkbox').prop('checked',true);
});
$('.icansle').click(function () {
$('.t1 :checkbox').prop('checked',false);
});
$('.irever').click(function () {
$('.t1 :checkbox').each(function () {
var a = $(this).prop("checked")?false:true;
$(this).prop("checked",a);
})
});
$('.s1').click(function () {
var a1 = $('.t1 :text');
if (a1.length > 0){
$(this).removeClass('using');
a1.each(function () {
var b1 = $(this).val();
var c1 = $(this).parent().siblings().eq(2).children().eq(0).children().eq(1)[0].innerText;
console.log(b1);
console.log(c1);
$(this).parent().siblings().eq(2)[0].innerHTML = c1;
$(this).parent()[0].innerHTML = b1;
// $(this).remove();
// $(this).parent().siblings().eq(2).children().eq(0).remove();
})
}else {
$(this).addClass('using');
$('.t1 :checkbox').each(function () {
var a = $(this).parent().siblings().first()[0].innerText;
var c = $(this).parent().siblings().eq(2)[0].innerText;
if (c == '在线'){var d = '离线'}else {var d = '在线'};
if ($(this).prop('checked')){
$(this).parent().siblings().first()[0].innerHTML = "<input class='using1' type='text'/>";
$(this).parent().siblings().first().find('input').val(a);
$(this).parent().siblings().eq(2)[0].innerHTML = "<select>\n" +
"<optgroup label=''></optgroup>\n" +
"<option>"+c+"</option>\n" +
"<option>"+d+"</option>\n" +
"</select>";
}
});}});
$(' :checkbox').click(function () {
if ($(this).prop('checked') == false){
if ($(this).parent().siblings().eq(0).children().hasClass('using1')){
var a = $(this).parent().siblings().eq(0).children().eq(0).val();
$(this).parent().siblings().eq(0)[0].innerText = a;
$(this).parent().siblings().eq(0).children().eq(0).remove();
var b = $(this).parent().siblings().eq(2).children().eq(0).children().eq(1).val();
$(this).parent().siblings().eq(2)[0].innerText = b;
$(this).parent().siblings().eq(2).children().eq(0).remove();
}
}else {if ($('.s1').hasClass('using')){
var a = $(this).parent().siblings().first()[0].innerText;
var c = $(this).parent().siblings().eq(2)[0].innerText;
if (c == '在线'){var d = '离线'}else {var d = '在线'};
if ($(this).prop('checked')){
$(this).parent().siblings().first()[0].innerHTML = "<input class='using1' type='text'/>";
$(this).parent().siblings().first().find('input').val(a);
$(this).parent().siblings().eq(2)[0].innerHTML = "<select>\n" +
"<optgroup label=''></optgroup>\n" +
"<option>"+c+"</option>\n" +
"<option>"+d+"</option>\n" +
"</select>";
}}
}
})
</script>
</body>
</html>