用js 动态进行创建列表，点击按钮时，动态创建一个两行三列的表格

最新推荐文章于 2026-03-12 01:38:38 发布

原创最新推荐文章于 2026-03-12 01:38:38 发布 · 7.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

收录于

js 专栏收录该内容

10 篇文章

订阅专栏

当点击按钮时，该示例使用JavaScript动态创建一个包含两行三列的表格，表格内容为键值对，键作为文字显示，值作为链接。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js练习五</title>
<script type="text/javascript">
var dict = {
'百度':'http://www.baidu.com',
'新浪':'http://www.sina.com.cn',
'谷歌':'http://www.g.cn'
};
window.onload = function () {
document.getElementById('btn').onclick = function () {
//动态创建表格
var tableWebsiteList = document.createElement('table');
tableWebsiteList.border = "1";
//1.1遍历数据动态建行
for (var key in dict) {
var trObject = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = key;
var td2 = document.createElement('td');
td2.innerHTML = '<a href="' + dict[key] + '">' + key + '</a>';
trObject.appendChild(td1);
trObject.appendChild(td2);
tableWebsiteList.appendChild(trObject);
}
//把表格加到body中
document.body.appendChild(tableWebsiteList);
};
};
</script>
</head>
<body>
<input type="button" name="button" value="OK" id="btn">
</body>
</html>