<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>