一、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 width: 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>\n" +
129 " <td>"+id+"</td>\n" +
130 " <td>"+name+"</td>\n" +
131 " <td>"+gender+"</td>\n" +
132 " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
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>
