js_注册案例


 <!DOCTYPE html>
 <html>
  
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 label{
 /*以块状显示*/
 display: block;
 margin: 10px;
 }
 table{
 border: 1px solid;
 width: 350px;
 }
 /*隔行换色*/
 tr:nth-child(odd){
 background-color: royalblue;
 }
 tr:nth-child(even){
 background-color: #FF6347;
 }
 </style>
 <!--innerHTML:获取标签体内容,,,通过这种方式获取出来以后,,,打印会把标签一起获取出来-->
 <!--innerText:获取标签体内容,,,,,,,,不会把标签一起获取出来-->
 <script type="text/javascript">
 //点击注册按钮,,,,把注册的信息添加到下面的表格中
 var tr;
 var td;
 function regiest () {
 //1.创建一个行的元素
 tr = document.createElement("tr");
 //2.获取到每个输入框的元素----为了一会取出元素中的值
 var tds = document.getElementsByTagName("input");
 //需要数据的只有3个,,,,
 //alert(tds.length);---4
 //3.循环遍历,,,这个数组,,,,把input元素的值,,取出来,,赋值到每个td上
 for (var i = 0; i < tds.length-1; i++) {
 //3.1根据取出的元素的数量来创建多少个td
 td = document.createElement("td");
 //3.2把取出的input值,,赋值给td上
 td.innerHTML = tds[i].value;
 //3.3把td添加到tr上
 tr.appendChild(td);
 }
 //4.单独创建一列元素,,用来放按钮
 td = document.createElement("td");
 //5.创建一个按钮的元素
 var td_btn = document.createElement("button");
 td_btn.innerHTML="删除";
 //6.需要把按钮添加到td上
 td.appendChild(td_btn);
 //7.把td添加到tr上
 tr.appendChild(td);
 //8.需要把整行(tr),添加到table
 document.getElementById("tb").appendChild(tr);
 //9.设置按钮的事件
 td_btn.onclick = function () {
 //从table表中删除tr元素------this:代表当前的元素
 document.getElementById("tb").removeChild(this.parentElement.parentElement);
 }
 }
 </script>
 </head>
  
 <body>
 <form>
 <fieldset id="">
 <legend>用户注册页面</legend>
 <label>
 用户名:<input type="text" />
 </label>
 <label>
 年龄:<input type="number" />
 </label>
 <label>
 生日:<input type="date" />
 </label>
 <input type="button" onclick="regiest()" value="注册"/>
 </fieldset>
 </form>
 <br />
 <br />
 <br />
 <table id="tb">
 <tr style="background-color: gray;">
 <th>用户名</th>
 <th>年龄</th>
 <th>生日</th>
 <th>操作</th>
 </tr>
 </table>
 </body>
  
 </html>

阅读更多
想对作者说点什么? 我来说一句

js_日期控件

2011年11月15日 63KB 下载

js_操作select_下拉框

2012年04月09日 69KB 下载

js_变量调试_dump

2012年05月30日 29KB 下载

街头霸王_JS设计

2016年10月23日 1.29MB 下载

没有更多推荐了,返回首页

不良信息举报

js_注册案例

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭