下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家，也给大家做个参考。
<!DOCTYPE html>
<html>
<head>
<title>register</title>
<Meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<Meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<Meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<Meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="register.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jslib/jquery-1.6.min.js"></script>
<script>
function edit(){
$('span').css('display','block');
$('.revise').css('display','block');
$("#edit").css("display","none");
$("#removeedit").css("display","block");
}
function removeedit(){
$('span').css('display','none');
$('.revise').css('display','none');
$("#edit").css("display","block");
$("#removeedit").css("display","none");
}
function add(){
$("tbody").append($('<tr><td>' + $("#name").val() +'</td><td>'+$("#sex").val()+'</td><td>'+$("#phone").val()+'</td><td><span>删除</span></td><td><p id="revise" class="revise">修改</p></td><td><p id ="keep">保存</p></td></tr>'));
}
$(function(){
$("#list").delegate("td span","click",function(e){
$(this).parents("tr").remove();
})
})
$(function(){ //让input为可编辑状态
$("#list").delegate("td #revise",function(a){
$(this).parents("tr").find("input").removeAttr("disabled","disabled");
$(this).css("display","none");
$(this).parents("tr").find("#keep").css("display","block");
})
$("#list").delegate("td #revise",function(a){
$(this).parents("tr").find("select").removeAttr("disabled","disabled");
})
$("#list").delegate("td #keep",function(a){
$(this).parents("tr").find("input").attr("disabled","true");
$(this).css('display','none');
})
$("#list").delegate("td #keep",function(a){
$(this).parents("tr").find("select").attr("disabled","true");
})
})
</script>
</head>
<body>
<div class="content">
<table id ="list" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>手机号</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="on" value="hello" disabled="true"/></td>
<td>
<select disabled="true">
<option>男</option>
<option>女</option>
</select>
</td>
<td><input type="text" class="on" value="18329137530" disabled="true"/></td>
<td><span>删除</span></td>
<td><p id="revise" class="revise">修改</p></td>
<td><p id ="keep" class="keep">保存</p></td>
</tr>
<tr>
<td><input class="on" type="text" value="hello" disabled="true"/></td>
<td>
<select disabled="true">
<option>男</option>
<option>女</option>
</select>
</td>
<td><input type="text" class="on" value="18329137530" disabled="true"/></td>
<td><span>删除</span></td>
<td><p id="revise" class="revise">修改</p></td>
<td><p id ="keep" class="keep">保存</p></td>
</tr>
<tr>
<td><input type="text" class="on" value="hello" disabled="true"/></td>
<td>
<select disabled="true">
<option>男</option>
<option>女</option>
</select>
</td>
<td><input type="text" class="on" value="18329137530" disabled="true"/></td>
<td><span>删除</span></td>
<td><p id="revise" class="revise">修改</p></td>
<td><p id ="keep" class="keep">保存</p></td>
</tr>
</tbody>
</table>
<button onclick="document.getElementById('add').style.display='block'">添加</button></br>
<button id="edit" onclick="edit()">编辑</button>
<button id="removeedit" class = "removeedit" onclick="removeedit()">退出编辑</button>
</div>
<div class="add" id="add">
姓名：<input id="name" type="text"/ value=""></br>
性别: <select id="sex">
<option>男</option>
<option>女</option>
</select></br>
电话: <input id = "phone" type="text"/></br>
<button id = "cancel">取消</button>
<button id = "confirm" onclick="add(),document.getElementById('add').style.display='none'">确定</button>
</div>
</body>
</html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
原文链接：https://www.f2er.com/html/457437.html