<!DOCTYPE html> <meta charset="utf-8" /> <html> <head> <title></title> <style type="text/css"> tab
<!DOCTYPEhtml><metacharset="utf-8"/><html><head><title></title><styletype="text/css">...
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<title></title>
<style type="text/css">
table{border-collapse:collapse;}
th,td{
border:1px solid #ccc;
padding:4px 7px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var otab=document.getElementById("tab1");
var oxh=document.getElementById("XH");
var oName=document.getElementById("name");
var oAge=document.getElementById("age");
var obt=document.getElementById("btn1");
obt.onClick=function(){
var oTr=document.createElement("tr");
var oTd=dcoument.createElement("td");
oTd.innerHTML=oxh.value;
oTr.appendChild(oTd);
var oTd=dcoument.createElement("td");
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);
var oTd=dcoument.createElement("td");
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);
otab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
<form name="my_form">
学号<input id="XH" type="text" />
姓名<input id="name" type="text" />
年龄<input id="age" type="text" />
<input type="button" value="添加" id="btn1" />
</form>
<table id="tab1">
<thead>
<tr>
<th>学号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>12008127</td>
<td>苏驰</td>
<td>20</td>
</tr>
<tr>
<td>12008126</td>
<td>彭赞</td>
<td>21</td>
</tr>
<tr>
<td>12008125</td>
<td>李庭洋</td>
<td>19</td>
</tr>
<tr>
<td>12008124</td>
<td>王震</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html> 展开
<meta charset="utf-8" />
<html>
<head>
<title></title>
<style type="text/css">
table{border-collapse:collapse;}
th,td{
border:1px solid #ccc;
padding:4px 7px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
var otab=document.getElementById("tab1");
var oxh=document.getElementById("XH");
var oName=document.getElementById("name");
var oAge=document.getElementById("age");
var obt=document.getElementById("btn1");
obt.onClick=function(){
var oTr=document.createElement("tr");
var oTd=dcoument.createElement("td");
oTd.innerHTML=oxh.value;
oTr.appendChild(oTd);
var oTd=dcoument.createElement("td");
oTd.innerHTML=oName.value;
oTr.appendChild(oTd);
var oTd=dcoument.createElement("td");
oTd.innerHTML=oAge.value;
oTr.appendChild(oTd);
otab.tBodies[0].appendChild(oTr);
};
};
</script>
</head>
<body>
<form name="my_form">
学号<input id="XH" type="text" />
姓名<input id="name" type="text" />
年龄<input id="age" type="text" />
<input type="button" value="添加" id="btn1" />
</form>
<table id="tab1">
<thead>
<tr>
<th>学号</th><th>姓名</th><th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>12008127</td>
<td>苏驰</td>
<td>20</td>
</tr>
<tr>
<td>12008126</td>
<td>彭赞</td>
<td>21</td>
</tr>
<tr>
<td>12008125</td>
<td>李庭洋</td>
<td>19</td>
</tr>
<tr>
<td>12008124</td>
<td>王震</td>
<td>22</td>
</tr>
</tbody>
</table>
</body>
</html> 展开
3个回答
展开全部
你是要找“动态添加html元素”吗？给个示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 动态添加节点 </TITLE>
<script language="javascript">
//动态添加表单元素
function addform(){
var txt1 = document.createTextNode("username");
var int1= document.createElement("input");
int1.type = "text";
int1.name = "name";
int1.value = "username";
var br1 = document.createElement("<br/>");
var txt2 = document.createTextNode("password");
var int2 = document.createElement("input");
int2.setAttribute("type","password");
int2.setAttribute("name","psw");
int2.setAttribute("value","password");
var br2 = document.createElement("<br/>");
var int3= document.createElement("input");
int3.type = "button";
int3.value = "提交";
int3.attachEvent("onclick",submit);
var int4= document.createElement("input");
int4.type = "button";
int4.value = "重置";
int4.attachEvent("onclick",reset);
var br3 = document.createElement("<br/>");
var oFragment = document.createDocumentFragment();
oFragment.appendChild(txt1);
oFragment.appendChild(int1);
oFragment.appendChild(br1);
oFragment.appendChild(txt2);
oFragment.appendChild(int2);
oFragment.appendChild(br2);
oFragment.appendChild(int3);
oFragment.appendChild(int4);
oFragment.appendChild(br3);
document.show.appendChild(oFragment);
}
</script>
</HEAD>
<BODY>
<button onclick="addform()" >动态添加表单元素</button>
<br/><br/>
<form name="show" style="background-color:#cccccc; width:280px; height:100px;"></form>
</BODY>
</HTML>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
