JavaScript实现完整表格创建示例
在HTML和JavaScript中创建一个完整的表格是常见的前端开发任务,特别是在动态网页或需要交互元素的情况下。给定的代码片段展示了如何使用JavaScript在页面上动态生成一个表格。首先,我们来看一下提供的HTML和JavaScript代码。 HTML部分: ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>无标题文档</title> </head> <body> <table id="myTable" cellpadding="0" cellspacing="0" border="2" style="font-size:12px;width:100%;height:70%;text-align:center;"> <!-- 表格结构在此处 --> </table> <script type="text/javascript" src="yourjavascriptfile.js"></script> </body> </html> ``` 这里定义了一个`<table>`元素,id为`myTable`,设置了边框、单元格间距和内边距等样式。在`<body>`部分,我们期待有一个外部JavaScript文件(假设名为`yourjavascriptfile.js`)来添加表格内容。 JavaScript部分: ```javascript function addTable() { var z = document.getElementById('myTable'); var y = '<table border="1" bordercolor="#CCCCCC" cellspacing="0px" cellpadding="1"><tr><th>房型</th><th>产品</th><th>型号</th><th>数量</th></tr><tr><td>111</td><td>222</td><td>333</td><td>444</td></tr></table>'; z.innerHTML = y; // 将字符串y插入到myTable元素中 // 另外,这里还可以通过数组或其他数据结构动态生成表格行 } ``` `addTable()`函数是关键部分,它获取`myTable`元素,并将其`innerHTML`属性设置为一个包含静态表格结构的字符串。这个表格有两列标题("房型"、"产品"、"型号"和"数量")和一行数据("111"、"222"、"333" 和 "444")。如果需要,可以将这些硬编码的值替换为动态生成的数据。 要使这个功能生效,你需要在HTML文件中引用`addTable`函数,通常是在`<head>`标签之外引入JavaScript文件的地方。然后,在某个触发事件(例如用户点击按钮或页面加载完成后)调用`addTable()`。 总结: 本示例演示了如何使用JavaScript动态创建表格,包括设置表格的基本结构(如边框、单元格大小等)以及如何插入静态内容。通过修改JavaScript代码中的数据源,你可以实现不同场景下的表格填充,比如从数据库查询结果、表单提交数据或其他数据结构。这对于构建可扩展的Web应用非常有用。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script type="text/javascript">
function addTable(){
var z = document.getElementById('myTable');
var y = document.getElementById('myTable').innerHTML = "<table border='1' bordercolor='#CCCCCC' cellspacing='0px' cellpadding='1'><tr><th>房型</th><th>产品</th><th>型号</th><th>数量</th></tr><tr><td>111</td><td>222</td><td>333</td><td>444</td></tr></table>";
z.appendChild(y);
}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="2" style="font-size: 12px; width: 100%; height: 70%; text-align:center">
<tr>
<th width="10%"scope="col" style=" background-color:c0c0c0;">设计要求</th>
<th width="10%"scope="col" style=" background-color:c0c0c0;">品牌</th>
<th width="10%"scope="col" style=" background-color:c0c0c0;">场所功能</th>
<th width="10%"scope="col" style=" background-color:c0c0c0;">房间</th>
<th width="10%"scope="col" style=" background-color:c0c0c0;">大厅</th>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
<td>111</td>
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 0
- 资源: 7
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦