js对table执行增-删-改
【摘要】 <html> <head> <title>作业</title><script language="javascript" type="text/javascript"> /*页面加载完成*/ window.onload = function(){ var etable = "<table border = '1' id='myTable'>"+ "<tr align = '...
-
<html>
-
-
<head>
-
-
<title>作业</title>
-
<script language="javascript" type="text/javascript">
-
-
/*页面加载完成*/
-
window.onload = function(){
-
var etable = "<table border = '1' id='myTable'>"+
-
"<tr align = 'center'> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>爱好</th> <th>操作</th></tr>"+
-
"<tr> <td οnclick='updStu(this)' name='付政委'>付政委</td>"+
-
" <td οnclick='updStu(this)' name='男'>男</td>"+
-
" <td οnclick='updStu(this)' name='24'>24</td>"+
-
" <td οnclick='updStu(this)' name='编程、看电影'>编程、看电影</td> "+
-
"<td><span οnclick='delStu(this)' style='cursor:pointer; color=red'>删除</span>"+
-
"</td></tr>"+
-
-
"</table><hr/>"+
-
"增加新用户<br/>"+
-
"姓名：<input type='text' id='stuName'/><br/>"+
-
"性别：<lable><input type='radio' id='stuSex' name='stuSex' value='男' checked = 'checked'/>男</lable>"+
-
" <lable><input type='radio' id='stuSex' name='stuSex' value='女'/>女</lable><br/>"+
-
"年龄：<select id='stuAge'>"+
-
" </select><br/>"+
-
"爱好：<label><input type='checkbox' value='野游' name='stuhobby' id='stuhobby'>野游</label> "+
-
" <label><input type='checkbox' value='逛街' name='stuhobb' id='stuhobby'>逛街</label>"+
-
" <label><input type='checkbox' value='交友' name='stuhobby' id='stuhobby'>交友</label>"+
-
" <label><input type='checkbox' value='其他' name='stuhobby' id='stuhobby'>其他</label><hr/>"+
-
"<input type='button' value='新增用户' id='addStu'/>"
-
;
-
document.body.innerHTML = etable;
-
-
-
/*向年龄中插入元素*/
-
for(var i = 10; i<=100; i++){
-
var eOption = document.createElement("option");
-
eOption.value = i;
-
eOption.text = i+"岁";
-
$("stuAge").add(eOption);
-
}
-
-
/*提取用户信息，并增加到列表*/
-
$("addStu").onclick = function(){
-
-
-
/*提取用户名*/
-
var stu_name = $("stuName").value;
-
-
/*提取性别*/
-
var stu_sexs = document.getElementsByName("stuSex"),stu_sex = "";
-
for(var sid = 0,slen= stu_sexs.length; sid < slen; sid ++){
-
if(stu_sexs[sid].checked){
-
stu_sex = stu_sexs[sid].value;
-
}
-
}
-
-
/*获得年龄*/
-
var stu_age = $("stuAge");
-
stu_age = stu_age.options[stu_age.selectedIndex].value;
-
-
/*获得爱好*/
-
var stu_hobbys = document.getElementsByName("stuhobby"),stu_hobby="";
-
-
-
for(var shid = 0,shlen = stu_hobbys.length; shid < shlen; shid ++){
-
if(stu_hobbys[shid].checked){
-
stu_hobby += stu_hobbys[shid].value +"、";
-
}
-
}
-
-
/*把信息写入表格*/
-
var trow = $("myTable").insertRow($("myTable").rows.length);
-
//根据当前插入到的长度，改变表格背景色
-
if(($("myTable").rows.length)%2==1){
-
trow.style.backgroundColor="pink";
-
}
-
-
var tcell_0 = trow.insertCell(0);
-
var tcell_1 = trow.insertCell(1);
-
var tcell_2 = trow.insertCell(2);
-
var tcell_3 = trow.insertCell(3);
-
var tcell_4 = trow.insertCell(4);
-
-
tcell_0.innerHTML = stu_name;
-
tcell_1.innerHTML = stu_sex;
-
tcell_2.innerHTML = stu_age;
-
tcell_3.innerHTML = stu_hobby;
-
tcell_4.innerHTML = "<span οnclick='delStu(this)' style='cursor:pointer; color=red'>删除</span>";
-
-
/*添加事件*/
-
tcell_0.name = stu_name;
-
tcell_0.onclick = updateUser;
-
-
tcell_1.name = stu_sex;
-
tcell_1.onclick = updateUser;
-
-
tcell_2.name = stu_age;
-
tcell_2.onclick = updateUser;
-
-
tcell_3.name = stu_hobby;
-
tcell_3.onclick = updateUser;
-
-
/*定义事件*/
-
function updateUser(){
-
var userName = "";
-
userName = this.name;
-
-
this.innerHTML = "<input type='text' id='updF'/>";
-
$("updF").focus();
-
$("updF").value = userName;
-
$("updF").onmousedown = function(){
-
-
if($("updF").value.length > 0){
-
this.parentNode.innerHTML = $("updF").value;
-
}else{
-
this.parentNode.innerHTML = userName;
-
}
-
-
}
-
-
}
-
}
-
-
}
-
/*修改表格信息*/
-
function updStu(obj){
-
var userName = "";
-
userName = obj.name;
-
obj.innerHTML = "<input type='text' id='updF'/>";
-
$("updF").focus();
-
$("updF").value = userName;
-
$("updF").onmousedown = function(){
-
if($("updF").value.length > 0){
-
obj.innerHTML = $("updF").value;
-
}else{
-
obj.innerHTML = userName;
-
}
-
-
}
-
}
-
-
/*删除控制*/
-
function delStu(obj){
-
/*删除提示框*/
-
var pddel = window.confirm("确定删除？");
-
if(pddel){
-
var tr=obj.parentNode.parentNode;
-
var tbody = tr.parentNode;
-
tbody.removeChild(tr);
-
}
-
}
-
/*刀了符号，用于调用获得dom*/
-
function $(eid){
-
return document.getElementById(eid);
-
}
-
</script>
-
</head>
-
<body>
-
</body>
-
</html>
文章来源: bugstack.blog.csdn.net，作者：小傅哥，版权归原作者所有，如需转载，请联系作者。
原文链接：bugstack.blog.csdn.net/article/details/7892926
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）