概述
<!DOCTYPE html> #这是html部分
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link rel="stylesheet" href="css.css">
<script src="js.js"></script>
<body>
<br>
<button id="Button">添加一个信息</button>
<br>
<div>
<table border="1" cellspacing="0">
<tr main="Main">
<th class="main">姓名</th>
<th class="main">性别</th>
<th class="main">年龄</th>
<th class="main">年级</th>
<th class="main">爱好</th>
<th class="main">自我介绍</th>
<th class="main">操作</th>
</tr>
<tr class="Main">
<td class="main">
黄某
</td>
<td class="main">
女
</td>
<td class="main">
18
</td>
<td class="main">
三年级
</td>
<td class="main">
吃，玩
</td>
<td>
我喜欢编写js
</td>
<td class="main">
<button>修改</button>
<button>删除</button>
</td>
</tr>
<tr class="Main">
<td class="main">
黄某2
</td>
<td class="main">
男
</td>
<td class="main">
19
</td>
<td class="main">
二年级
</td>
<td class="main">
吃，玩
</td>
<td class="main">
我喜欢编写js
</td>
<td class="main">
<button>修改</button>
<button>删除</button>
</td>
</tr>
<div id="showTable"></div>
</table>
</div>
<br>
<div id="show">
</div>
</body>
</html>window.onload = function (){
# 这是js部分
document.getElementById("Button").onclick = function (){
document.getElementById("show").innerHTML = '<table cellspacing="1" border="1">' + '<tr>'
+ '<td id="name">姓名：</td>' +
'<td ><input type="text"></td>'+
'</tr>'+
'<tr>' +
'<td >性别：</td>' +
'<td ><input type="radio" >男 <input type="radio">女</td>'+
'</tr>'+
'<tr>' +
'<td>年龄：</td>'+
'<td><input type="text"></td>'+
'</tr>'+
'<tr>' +
'<td>爱好：</td>'+
'<td><input type="checkbox">吃 <input type="checkbox">喝 <input type="checkbox">玩 <input type="checkbox">乐</td>'+
'</tr>'+
'<tr>' +
'<td>自我介绍：</td>'+
'<td><textarea name="" id="" cols="30" rows="10"></textarea></td>'+
'</tr>'+
'<tr>' +
'<td colspan="2" align="center"><button>重置</button> <button id="Button2" value="提交">提交</button></td>'
+'</tr>'
+ '</table>';
}
}.main{
padding: 1em;
}
.Button{
margin-bottom:10px ;
margin-top: 10px;
}
.adding_{
margin-right: 10px !important;
margin-left:10px !important;
}
最后
以上就是犹豫背包为你收集整理的javascript中点击按钮生成表格的全部内容，希望文章能够帮你解决javascript中点击按钮生成表格所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复