<!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>