如何使用Jquery 将excel表导入 并能显示在<table>中

如何使用Jquery 将excel表导入 并能显示在<table>中,第1张

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="xlsx.core.min.js"></script>

<script>

window.onload=function(){

$('#excel-file').change(function(e) {

var files = e.target.files

var fileReader = new FileReader()

fileReader.onload = function(ev) {

try {

var data = ev.target.result,

workbook = XLSX.read(data, {

type: 'binary'

}), // 以二进制流方式读取得到整份excel表格对象

persons = [] // 存储获取到的数据

} catch (e) {

console.log('文件类型不正确')

return

}

// 表格的表格范围,可用于判断表头是否数量是否正确

var fromTo = ''

// 遍历每张表读取

for (var sheet in workbook.Sheets) {

if (workbook.Sheets.hasOwnProperty(sheet)) {

fromTo = workbook.Sheets[sheet]['!ref']

console.log(fromTo)

persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))

// break // 如果只取第一张表,就取消注释这行

}

}

console.log(persons)

//将persons赋值给要展示的表格数组里即可展示在界面

}

// 以二进制方式打开文件

fileReader.readAsBinaryString(files[0])

})

}

</script>

</head>

<body>

<input type="file" id="excel-file">

</body>

</html>

还有就是存在数据库里再拿出来显示。

你可以在《物证材料信息的表格》外面套一个div,获取这个div的innerHTML,加入到下面即可;

只设置name,不要加id了;后台通过name获取数组。

后台循环数组添加即可

//假设有

<table id="mytable">

<tr></tr>

</table>

//jquery代码

//给表格第一行追加一列

$("#mytable tr:eq(0)").append("<td></td>")


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7954397.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存