<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='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;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>