<html>
<head>
<script type="text/javascript">
function show(){
//切换添加表单
var display=document.getElementById("add");
if(display.style.display=="block"){
display.style.display="none";
}else{
display.style.display="block";
}
}
function add(){
var mytab=document.getElementById("table");
//获取用户信息
var no=parseInt(document.getElementById("index").value);
var name=document.getElementById("name").value;
var iname=document.getElementById("iname").value;
//插入表格
var tabRow;
for(var i=1;i<mytab.rows.length;i++){
var num=parseInt(mytab.rows[i].cells[0].innerText);
//alert(index+""+i );
//如果当前的表单中编号和输入的编号有重复提示用户，并返回不添加
if(num==no){
alert("编号重复");
return false;
}
//输入的编号小于当前遍历的某个编号是，插入当前位置
if(num>no){
tabRow=mytab.insertRow(i);//如果已有的编号大于输入编号，插入到当前行
tabRow.insertCell(0).innerHTML=no;
tabRow.insertCell(1).innerHTML=name;
tabRow.insertCell(2).innerHTML=iname;
tabRow.insertCell(3).innerHTML="<a href='#' onclick=del("
+no+")>删除</a>||<a onclick=alter("+no+") href='#'>修改</a>";
return;
}
}
//要插入的行
tabRow=mytab.insertRow(mytab.rows.length);
//插入行的列
tabRow.insertCell(0).innerHTML=no;
tabRow.insertCell(1).innerHTML=name;
tabRow.insertCell(2).innerHTML=iname;
tabRow.insertCell(3).innerHTML="<a href='#' onclick=del("
+no+")>删除</a>||<a onclick=alter("+no+") href='#'>修改</a>";
}
function del(no){
var mytab=document.getElementById("table");
for(var i=1;i<mytab.rows.length;i++){//遍历每一行取出编号
var num=parseInt(mytab.rows[i].cells[0].innerText);
if(num==no){//如果遍历的编号等于输入的编号，就删除当前行
mytab.deleteRow(i);
}
}
}
function alter(no){
//提示用户输入要修改的列数
var a=window.prompt("请输入要修改的列数");
a--;
//如果输入的列数等于第一列，那目前提示用户，不能修改编号
if(a==0){
alert("不能修改英雄的编号");
return;
}
var mytab=document.getElementById("table");
for(var i=1;i<mytab.rows.length;i++){//遍历每一行
var num=parseInt(mytab.rows[i].cells[0].innerText);//取出每一行的编号
if(num==no){//如果遍历的编号等于函数传进来的编号，修改该行
if(a<mytab.rows[i].cells.length-1){
var cellText=mytab.rows[i].cells[a].innerText;
mytab.rows[i].cells[a].innerHTML="<input onblur=blur1(this,"+i+","+a+") type='text' value="
+cellText+" style='width:64px' />";
}
}
}
}
function blur1(obj,i,a){
document.getElementById("table").rows[i].cells[a].innerText=obj.value;
}
</script>
</head>
<body>
<table id="table" border="1" style="align:center;width:300px;">
<tr align="center"><td>编号</td><td>名字</td><td>外号</td><td>操作</td></tr>
<!-- <tr ><td>1</td><td>宋江</td><td>及时雨</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr>
<tr ><td>2</td><td>吴用</td><td>吴大哥</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr>
<tr ><td>8</td><td>吴用</td><td>吴大哥</td><td><a href="#">删除</a>||<a href="#">修改</a></td></tr> -->
</table>
<button onclick="show()">添加/隐藏</button>
<table id="add" style="display:none">
<caption style="font-size:26px;">添加英雄人物</caption>
<tr><td>编号:<input type="text" id="index"name="index"/></td></tr>
<tr><td>姓名:<input type="text" id="name" name="name"/></td></tr>
<tr><td>外号:<input type="text" id="iname" name="iname"/></td></tr>
<tr><td><input type="submit" value="添加英雄" onclick="add()"/></td></tr>
</table>
</body>
</html>
浙公网安备 33010602011771号