基于jexcel插件做的具有Excel的table
Posted zlgblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于jexcel插件做的具有Excel的table相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="./jExcel/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="./jExcel/css/jquery.jexcel.css" type="text/css" />
<link rel="stylesheet" href="./tables.css">
</head>
<body>
<!--顶部说明-->
<div class="table-top">
<h2>jexcel表格区域</h2>
<button onclick="handleShowModal()">创建表格</button>
</div>
<!--内容区域-->
<div class="table-bot">
<div id="table-modal">
<h3>创建表格</h3>
<p>
<input id="table-row-number" type="number"> 行
</p>
<p>
<input id="table-col-number" type="number"> 列
</p>
<div>
<button onclick="handleCancelModal()">取消</button>
<button onclick="handleOKModal()" type="button">确认</button>
</div>
</div>
<div id="mytable"></div>
</div>
<script>
//点击创建表格按钮的事件
function handleShowModal(){
$("#table-row-number").val("");
$("#table-col-number").val("");
$("#table-modal").css("display" , "block");
}
//创建表格modal的取消事件
function handleCancelModal(){
$("#table-modal").css("display" , "none")
}
//创建表格modal的确认事件
function handleOKModal(){
var row = $("#table-row-number").val();
var col = $("#table-col-number").val();
$("#table-modal").css("display" , "none");
var rowData = [];
var data = [];
for (var i = 0; i< col ;i++){ rowData.push("")}
for (var i = 0; i< row ;i++){ data.push(rowData) }
$('#mytable').jexcel({ data:data, pagination:25});
}
</script>
</body>
</html>以上是关于基于jexcel插件做的具有Excel的table的主要内容，如果未能解决你的问题，请参考以下文章
基于yaf框架和uploadify插件，做的一个导入excel文件，查看并保存数据的功能
我为什么要花大力气从头研发智表ZCELL（一个仿EXCEL的前端插件）
js-xlsx和file-saver插件前端html的table导出数据到excel的表格增加表格标题行
h5 移动端怎么导出excel,PC端jquery.table2excel.js插件可以实现，移动端就无法实现了。求答案