js添加元素节点文本节点-优快云博客

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.one {
   width: 400px;
   height: 150px;
   border: 1px solid #000;
   margin: 0 auto;
   margin-bottom: 20px;
}
td {
   width: 100px;
}
.two {
   width: 400px;
   height: 300px;
   border: 1px solid #000;
   margin: 0 auto;
}
.putong {
   padding-left: 50px;
   padding-top: 20px;
}
.anniu {
   padding-top: 20px;
   padding-left: 118px;
}
input[type=button] {
   background-color: #09C;
   width: 50px;
   height: 30px;
}
input[type=reset] {
   background-color: #09C;
   width: 50px;
   height: 30px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){

//获取table
var myid=document.getElementById('four');

//动态触发事件
myid.οnclick=function(){

//获取table 按钮属性 id

var myt =document.getElementById('mytable');

//创建新的元素tr
var tr=document.createElement('tr');

//给table添加子节点tr
mytable.appendChild(tr);

//创建td 元素分别为td0 td1 td2 td3 分为给每个td赋值在里边输入文本将输入的文本赋值给每个td

在将4个td元素给tr 就是给table 新加了一行一行里面有四列当出发按钮动态事件时自动xinjiayihang
var td0=document.createElement('td');
   var td1=document.createElement('td');
   var x=document.getElementById('one').value;
   var xtext=document.createTextNode(x);
   td1.appendChild(xtext);
var td2=document.createElement('td');
   var y=document.getElementById('two').value;
   var ytext=document.createTextNode(y);
   td2.appendChild(ytext);
   var td3=document.createElement('td');
   var z=document.getElementsByTagName('input');
   for(var i=0;i<z.length;i++){
       if(z[i].checked){
           var a=z[i].value;
       }
   }
   var ztext=document.createTextNode(a);
   td3.appendChild(ztext);
console.log(tr);
   tr.appendChild(td0);
   tr.appendChild(td1);
   tr.appendChild(td2);
   tr.appendChild(td3);
   }
}

//获取文本框的值在控制台输出

//全选删除按钮
function one(as){
   var two=document.getElementsByName('three');
   for(var i=0;i<two.length;i++){
       two[i].checked=as.checked;
       }
   }
   </script>
</head>
<body>
<div class="one">
<form>
<table border="1" id="mytable">
<tr>
<td><input type="checkbox" name="checkall" οnclick="one(this)"/>
全选</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td><input type="checkbox" name="three" id="chk" /></td>
<td>张三</td>
<td>11</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="three"/></td>
<td>李四</td>
<td>12</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox" name="three"/></td>
<td>王五</td>
<td>14</td>
<td>男</td>
</tr>
</table>
</form>
</div>
<div class="two">
<form>
<p class="putong">用户名：
<input type="text" id="one" name="yonghu"/>
</p>
<p class="putong">年  龄：
<input type="text" id="two" name="mima"/>
</p>
<p class="putong">性  别：
<input type="radio" id="three" name="sex" value="男"/>
男
<input type="radio" id="three" name="sex" value="女"/>
女 </p>
<p class="anniu">
<input type="button" id="four" border="0" value="登录" οnblur="op()"/>
  
<input type="reset" id="four" value="重置" />
</p>
</form>
</div>
</body>
</html>