js动态创建表格

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dxmfans/p/9434861.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript动态创建HTML表格的方法，并通过具体示例展示了如何将键值对数据转换为表格形式，适用于网页前端开发场景。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<script type="text/javascript">
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
//根据键值对创建表格
onload = function () {
document.getElementById('btn').onclick = function () {

//创建一个表格
var tbObj = document.createElement('table');
tbObj.border = '1'; //边框
//根据键值对的个数创建行
for (var item in dic) {

//创建行
var trObj = document.createElement('tr');
//创建单元格
var tdObj1 = document.createElement('td');
if (typeof (tdObj1.innerText) == 'string') {//检测
tdObj1.innerText = item; //显示文本
} else {
tdObj1.textContent = item;
}

//创建单元格
var tdObj2 = document.createElement('td');
tdObj2.innerHTML = '<a href="' + dic[item] + '">' + item + '</a>';
//单元格添加到行中
trObj.appendChild(tdObj1);
trObj.appendChild(tdObj2);

//行添加到表中
tbObj.appendChild(trObj);
}
//把表格添加到body中
document.body.appendChild(tbObj);
};
};
</script>
</head>
<body>
<input type="button" value="创建表格" id="btn"/>
</body>

</html>

兼容写法