码迷,mamicode.com
首页 > 其他好文 > 详细

基于jexcel插件做的具有Excel的table

时间:2020-01-10 18:29:47      阅读:123      评论:0      收藏:0      [点我收藏+]

标签:har   按钮   link   oda   meta   dal   spl   row   插件   

技术图片

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

标签:har   按钮   link   oda   meta   dal   spl   row   插件   

原文地址:https://www.cnblogs.com/zlgblog/p/12177456.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!