javascript实现表格动态增加

javascript实现表格动态增加

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>javascript实现表格动态增加</title>

<script>
 function addline() {
  var table1=document.getElementById("tb1");
  var row1=document.createElement("tr");
  var td1=document.createElement("td");
  var td2=document.createElement("td");
  var td3=document.createElement("td");
  var id1=document.getElementById("id1").value;
  var name1=document.getElementById("name1").value;
  var age1=document.getElementById("age1").value;
  var txt1=document.createTextNode(id1);
  var txt2=document.createTextNode(name1);
  var txt3=document.createTextNode(age1);
  td1.appendChild(txt1);
  td2.appendChild(txt2);
  td3.appendChild(txt3);
  row1.appendChild(td1);
  row1.appendChild(td2);
  row1.appendChild(td3);
  table1.appendChild(row1);
 }
 
</script>
<body id="bd">
 <table id="tb1" border="1">
  <tr>
   <td>ID</td>
   <td>NAME</td>
   <td>AGE</td>
  </tr>
 </table>
 <input type="text" id="id1" />
 <input type="text" id="name1" />
 <input type="text" id="age1" />
 <br/>
 <input type="button" value="PRESS" onclick="return addline();"/>
</body>
</html>

你可能感兴趣的:(javascript实现表格动态增加)