1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 8 9 </style> 10 </head> 11 <body> 12 <div align="center" > 13 姓名:<input type="text" name="stuName" id="stuName" value="姓名" onfocus="ffocus()"/> 14 年龄:<input type="text" name="age" id="age" value="年龄" onfocus="ffocus1()"/> 15 <br /><br /> 16 <input type="button" value="注册" onclick="register()"/> 17 <!-- 18 作者：1767757232@qq.com 19 时间：2017-10-22 20 描述： 21 22 <input type="button" value="显示" onclick="show()" /> 23 --> 24 <input type="button" value="清空" onclick="cclear()"/> 25 <div id="tip"></div> 26 <hr color="aqua"/> 27 <br /> 28 <table id="tab" frame="border" width="30%" borderclorlight="aqua" border="1"> 29 <tr><th>姓名</th><th>年龄</th></tr> 30 31 </table> 32 <div id="show"></div> 33 <div id="show1"></div> 34 <div id="show2"></div> 35 36 </div> 37 </body> 38 <script type="text/javascript"> 39 var stuArr=new Array(3); 40 var i=0; 41 function register(){ 42 var stuName=document.getElementById("stuName").value; 43 var age=document.getElementById("age").value; 44 45 var student={stuName:stuName,age:age}; 46 stuArr[i]=student; 47 document.getElementById("tab").innerHTML=document.getElementById("tab").innerHTML+"<tr><td>"+stuArr[i].stuName+"</td><td>"+stuArr[i].age+"</td></tr>"; 48 i++; 49 document.getElementById("tip").innerHTML="注册成功"; 50 51 } 52 53 function ffocus(){ 54 document.getElementById("stuName").value=""; 55 document.getElementById("tip").innerHTML=""; 56 } 57 function ffocus1(){ 58 document.getElementById("age").value=""; 59 document.getElementById("tip").innerHTML=""; 60 } 61 function cclear(){ 62 // stuArr.splice(0,0); 63 stuArr.splice(0,stuArr.length); 64 65 document.getElementById("tab").innerHTML="<tr><th>姓名</th><th>年龄</th></tr> "; 66 67 68 document.getElementById("tip").innerHTML="清空成功"; 69 70 } 71 </script> 72 </html>