共 1 篇文章

标签:js中如何加载html代码

html如何导出一个表格数据-国外主机测评 - 国外VPS,国外服务器,国外云服务器,测评及优惠码

html如何导出一个表格数据

要导出一个表格数据,可以使用HTML的 <table>标签创建一个表格,然后使用JavaScript和相关库(如jQuery)将表格数据导出到文件,以下是一个简单的示例:,1、创建一个HTML文件,添加一个表格和一个按钮,用于触发导出操作:,2、接下来,创建一个名为 exportTableData.js的JavaScript文件,编写导出表格数据的代码:,这个示例中,我们首先获取表格元素,然后遍历表格的每一行和每一列,将数据存储在一个二维数组中,接着,我们将二维数组转换为CSV格式的字符串,并创建一个隐藏的 <a>标签,将其 href属性设置为CSV字符串的URL编码,并将其 download属性设置为下载文件的名称,我们将 <a>标签添加到页面中,触发点击事件以开始下载,然后将其从页面中移除。, ,<!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF8″> <meta name=”viewport” content=”width=devicewidth, initialscale=1.0″> <title>导出表格数据</title> <script src=”https://code.jquery.com/jquery3.6.0.min.js”></script> </head> <body> <h1>表格数据</h1> <table id=”myTable” border=”1″> <tr> <th>姓名</th> <th>年龄</th> <th>城市</th> </tr> <tr> <td>张三</td> <td>25</td> <td>北京</td> </tr> <tr> <td>李四</td> <td>30</td> <td>上海</td> </tr> </table> <button id=”exportBtn”>导出表格数据</button> <script src=”exportTableData.js”></script> </body> </html>,$(document).ready(function () { $(“#exportBtn”).click(function () { var table = document.getElementById(“myTable”); var rows = table.getElementsByTagName(“tr”); var data = []; for (var i = 0; i < rows.length; i++) { var row = [], cols = rows[i].querySelectorAll(“td, th”); for (var j = 0; j < cols.length; j++) { row.push(cols[j].innerText); } data.push(row); } var csvContent = “data:text/csv;charset=utf8,” + data.map(e => e.join(“,”)).join(” “); var encodedUri = encodeURI(csvContent); var link = document.createElement(“a”); link.setAttribute(“href”, encodedUri); link.setAttribute(“download”, “table_data.csv”); document.body.appendChild(link);...

技术分享