js动态创建表格
<!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>
兼容写法
<script type="text/javascript">
var dic = { "百度": "http://www.baidu.com", "传智播客": "http://www.itcast.cn", "谷歌": "http://www.google.com" };
onload = function () {
document.getElementById('btnCreate').onclick = function () {
//创建表格
var tbObj = document.createElement('table');
tbObj.border = '1';
//创建行和列
for (var key in dic) {
//根据表创建行
var trObj = tbObj.insertRow(-1);
//根据行创建列
var tdObj1 = trObj.insertCell(-1);
tdObj1.innerText = key;
var tdObj2 = trObj.insertCell(-1);
tdObj2.innerHTML = '<a href="' + dic[key] + '">' + key + '</a>';
}
//添加到body中
document.body.appendChild(tbObj);
};
};
最新文章
- ASP.NET MVC 从零开始 - 请求处理
- angular ng-if scope权限问题
- 实现Redis的主从复制配置
- oGrid 介绍如何从 server 取的资料
- 安装sql server managerment studio报错"The instance id is required but it is missing"
- CRM PrincipalObjectAccess(POA)
- U - 神、上帝以及老天爷(第二季水）
- Android 应用接入广点通统计API 方案
- 设计模式总结1--observer pattern
- 【转】增强 scite 编辑器的代码提示功能
- ASP.NET——RequiredFieldValidator控制和ValidationSummary控制
- html5的navigator调用手机震动
- 线段树 poj 3468
- Android设置item的行间距，以及去掉分割线方法
- 我的AI之路
- 点击按钮如何改变当前窗口的url
- 【python35.2--图形用户界面EasyGui】
- 跨域（四）——document.domain
- Mysql 编译安装并使用自定义用户启动
- oj