js实现漂亮的table表格_js好看的table,jstable资源-CSDN下载

共6个文件

jpg：1个

gif：1个

css：1个

需积分: 41 193 浏览量 2018-07-26 16:26:04 上传评论收藏 67KB ZIP 举报

在网页开发中，表格（Table）是展示数据的重要方式之一，尤其在前端界面设计中，一个美观、功能齐全的表格可以提升用户体验。本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建一个漂亮且实用的table表格。 **一、HTML基础表格结构** 我们需要在HTML文档中创建基本的表格结构。一个简单的表格由`<table>`标签定义，`<tr>`标签表示行，`<th>`标签表示表头，`<td>`标签表示单元格： ```html <table> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody> <tr> <td>数据1</td> <td>数据2</td> <td>数据3</td> </tr>  </tbody> </table> ``` **二、CSS美化表格** 接下来，我们使用CSS来美化表格。可以通过设置表格边框、背景色、文字样式等属性来达到理想的效果： ```css table { border-collapse: collapse; /* 合并单元格边框 */ width: 100%; /* 设置表格宽度 */ } th, td { padding: 8px; /* 单元格内边距 */ text-align: left; /* 文字左对齐 */ border: 1px solid #ddd; /* 边框 */ } th { background-color: #f2f2f2; /* 表头背景色 */ font-weight: bold; /* 加粗字体 */ } ``` **三、JavaScript增强表格功能** 1. **动态生成表格**：利用JavaScript，我们可以根据数据动态生成表格。例如，假设我们有一个JSON数组，我们可以遍历数组并创建表格： ```javascript let data = [ { name: '张三', age: 25, city: '北京' }, // 更多数据... ]; let table = document.createElement('table'); let thead = document.createElement('thead'); let tbody = document.createElement('tbody'); // 创建表头 let thRow = document.createElement('tr'); ['姓名', '年龄', '城市'].forEach(label => { let th = document.createElement('th'); th.textContent = label; thRow.appendChild(th); }); thead.appendChild(thRow); // 创建表格内容 data.forEach(item => { let tr = document.createElement('tr'); Object.keys(item).forEach(key => { let td = document.createElement('td'); td.textContent = item[key]; tr.appendChild(td); }); tbody.appendChild(tr); }); table.appendChild(thead); table.appendChild(tbody); document.body.appendChild(table); ``` 2. **交互式表格**：JavaScript可以增加表格的交互性，如排序、筛选、编辑等功能。例如，我们可以添加点击表头进行排序的事件监听器： ```javascript function sortTable(columnIndex) { let rows = Array.from(table.rows).slice(1); // 不包括表头 rows.sort((a, b) => { return a.cells[columnIndex].textContent.localeCompare(b.cells[columnIndex].textContent); }); rows.forEach(row => table.tBodies[0].appendChild(row)); } // 绑定点击事件 document.querySelectorAll('th').forEach((th, index) => { th.addEventListener('click', () => sortTable(index)); }); ``` 3. **响应式设计**：为了适应不同设备的显示，我们可以使用JavaScript结合CSS媒体查询实现表格的响应式布局。通过以上步骤，我们可以创建一个既美观又具有交互性的表格。实际应用中，还可以根据需求进一步扩展，比如添加分页、拖放排序、单元格点击事件等高级功能。在"JS实现漂亮的表格table特效代码"这个压缩包文件中，你可以找到具体的实现代码，通过学习和理解这些代码，相信你会对使用JavaScript和CSS创建前端表格有更深入的了解。

资源推荐

资源详情

资源评论

收起资源包目录

JS实现漂亮的表格table特效代码.zip （6个子文件）

JS实现漂亮的表格table特效代码

index.html 6KB

demo.jpg 88KB

tablecloth

tablecloth.js 6KB

tr_back.gif 105B

_notes

dwsync.xml 182B

tablecloth.css 1011B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Welcome to Tablecloth - www.update8.com</title>  <link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="tablecloth/tablecloth.js"></script>  <style> body { margin:0; padding:0; background:#f1f1f1; font:70% Arial, Helvetica, sans-serif; color:#555; line-height:150%; text-align:left; } a { text-decoration:none; color:#057fac; } a:hover { text-decoration:none; color:#999; } h1 { font-size:140%; margin:0 20px; line-height:80px; } h2 { font-size:120%; } #container { margin:0 auto; width:680px; background:#fff; padding-bottom:20px; } #content { margin:0 20px; } p.sig { margin:0 auto; width:680px; padding:1em 0; } form { margin:1em 0; padding:.2em 20px; background:#eee; } </style> </head> <body> <div id="container"> <h1>Tablecloth: Example</h1> <div id="content">  <h2>Table with top headings</h2> <table cellspacing="0" cellpadding="0"> <tr> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> <table cellspacing="0" cellpadding="0"> <tr> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> <th>Title</th> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> <h2>Table with side headings</h2> <table cellspacing="0" cellpadding="0"> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> <h2>Table with top and side headings</h2> <table cellspacing="0" cellpadding="0"> <tr> <td> </td> <th>Title</th> <th>Title</th> <th>Title</th> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> <tr> <th>Title</th> <td>Data</td> <td>Data</td> <td>Data</td> </tr> </table> </div> </div> <div style="text-align:Center;"> <p><strong><a href="http://www.update8.com/effects">技术教程网整理</a></strong> </p> <p>转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p> </div> </body> </html>

评论收藏

内容反馈