码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript实例

时间:2020-04-30 11:38:23      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:text   循环嵌套   tle   ace   oct   链接   乘法表   动态   设置   

一、99乘法表

二、动态表格

 


 

一、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) +"&nbsp;&nbsp;&nbsp;");
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>

 

JavaScript实例

标签:text   循环嵌套   tle   ace   oct   链接   乘法表   动态   设置   

原文地址:https://www.cnblogs.com/aaaazzzz/p/12807410.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!