一、99乘法表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>99乘法表</title> 6 <style> 7 td{ 8 border: 1px solid; 9 } 10 11 </style> 12 13 <script> 14 document.write("<table align='center'>"); 15 //1.完成基本的for循环嵌套，展示乘法表 16 for (var i = 1; i <= 9 ; i++) { 17 document.write("<tr>"); 18 for (var j = 1; j <=i ; j++) { 19 document.write("<td>"); 20 //输出 1 * 1 = 1 21 document.write(i + " * " + j + " = " + ( i*j) +" "); 22 document.write("</td>"); 23 } 24 /*//输出换行 25 document.write("<br>");*/ 26 document.write("</tr>"); 27 } 28 //2.完成表格嵌套 29 document.write("</table>"); 30 </script> 31 </head> 32 <body> 33 34 </body> 35 </html>
二.动态表格
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <head> 7 <meta charset="UTF-8"> 8 <title>动态表格</title> 9 10 <style> 11 table{ 12 border: 1px solid; 13 margin: auto; 14 500px; 15 } 16 17 td,th{ 18 text-align: center; 19 border: 1px solid; 20 } 21 div{ 22 text-align: center; 23 margin: 50px; 24 } 25 </style> 26 27 </head> 28 <body> 29 30 <div> 31 <input type="text" id="id" placeholder="请输入编号"> 32 <input type="text" id="name" placeholder="请输入姓名"> 33 <input type="text" id="gender" placeholder="请输入性别"> 34 <input type="button" value="添加" id="btn_add"> 35 </div> 36 37 38 <table> 39 <caption>学生信息表</caption> 40 <tr> 41 <th>编号</th> 42 <th>姓名</th> 43 <th>性别</th> 44 <th>操作</th> 45 </tr> 46 47 <tr> 48 <td>1</td> 49 <td>令狐冲</td> 50 <td>男</td> 51 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> 52 </tr> 53 54 <tr> 55 <td>2</td> 56 <td>任我行</td> 57 <td>男</td> 58 <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> 59 </tr> 60 61 <tr> 62 <td>3</td> 63 <td>岳不群</td> 64 <td>?</td> 65 <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td> 66 </tr> 67 68 69 </table> 70 71 72 <script> 73 /* 74 分析： 75 1.添加： 76 1. 给添加按钮绑定单击事件 77 2. 获取文本框的内容 78 3. 创建td，设置td的文本为文本框的内容。 79 4. 创建tr 80 5. 将td添加到tr中 81 6. 获取table，将tr添加到table中 82 2.删除： 83 1.确定点击的是哪一个超链接 84 <a href="javascript:void(0);" onclick="delTr(this);" >删除</a> 85 2.怎么删除？ 86 removeChild():通过父节点删除子节点 87 88 */ 89 document.getElementById("btn_add").onclick = function(){ 90 var id = document.getElementById("id").value; 91 var name = document.getElementById("name").value; 92 var gender = document.getElementById("gender").value; 93 94 // //创建td 95 // var td_id = document.createElement("td"); 96 // var txt_id = document.createElement(id); 97 // td_id.appendChild(txt_id); 98 // 99 // var td_name = document.createElement("td"); 100 // var txt_name = document.createElement(name); 101 // td_name.appendChild(txt_name); 102 // 103 // var td_gender = document.createElement("td"); 104 // var txt_gender = document.createElement(gender); 105 // td_gender.appendChild(txt_gender); 106 // 107 // //a标签的td 108 // var td_a = document.createElement("td"); 109 // var el_a = document.createElement("a"); 110 // ele_a.setAttribute("href","javascript:void(0);") 111 // ele_a.setAttribute("onclick","delTr(this);"); 112 // var text_a = document.createTextNode("删除"); 113 // ele_a.appendChild(text_a); 114 // td_a.appendChild(ele_a); 115 // 116 // //创建tr 117 // var tr = document.createElement("tr"); 118 // //5.添加td到tr中 119 // tr.appendChild(td_id); 120 // tr.appendChild(td_name); 121 // tr.appendChild(td_gender); 122 // tr.appendChild(td_a); 123 124 //6.获取table 125 var table = document.getElementsByTagName("table")[0]; 126 127 //追加一行 128 table.innerHTML += "<tr> " + 129 " <td>"+id+"</td> " + 130 " <td>"+name+"</td> " + 131 " <td>"+gender+"</td> " + 132 " <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td> " + 133 " </tr>"; 134 } 135 136 //删除方法 137 function delTr(obj){ 138 var table = obj.parentNode.parentNode.parentNode; 139 var tr = obj.parentNode.parentNode; 140 table.removeChild(tr); 141 } 142 143 </script> 144 145 </body> 146 </html>