<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="plugins/colpick/css/colpick.css">
    <link rel="stylesheet" href="plugins/tabs/css/tabstyle.css">
    <link rel="stylesheet" href="static/css/index.css">


    <script src="plugins/jquery.min.js"></script>
    <script src="plugins/layer-v3.1.1/layer/layer.js"></script>
    <link rel="stylesheet"
          href="file:///Users/homelink/Desktop/work/Excel/plugins/layer-v3.1.1/layer/theme/default/layer.css?v=3.1.1"
          id="layuicss-layer">
    <script src="plugins/vue.js"></script>
    <script src="plugins/tabs/js/tab.js"></script>
    <script src="plugins/js-xlsx/xlsx.js"></script>
    <script src="plugins/ColorPicker/jquery.colorpicker.js"></script>
    <script src="plugins/colpick/js/colpick.js"></script>
    <script src="static/js/index.js"></script>
    <style>


        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
            font-size: 14px;
        }

        p, h1, h2, h3, h4, h5 {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        input {
            border: solid 1px #aaa;
            height: 18px;
            width: 80px;
            padding: 2px;
            font-size: 12px;
        }

        table {
            border-collapse: collapse;
            border: solid 1px #aaa;
            font-size: 14px;
        }

        td, th {
            padding: 0;
        }

        img {
            display: block;
        }

        #vm {
            height: 100%;
        }

        .head {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: column;
        }

        .head .menu {
            width: 100%;
            display: flex;
            background-color: #E3E3E5;
            padding: 5px 0 0 5px;
            box-sizing: border-box;
        }

        .head .menu .menu-item {
            font-size: 12px;
            padding: 6px 12px;
            cursor: pointer;
        }

        .head .menu .menu-item.active {
            background: #fff;
            color: #65AD3E;
            font-weight: 600;
        }

        /* 工具  */
        .head .tool {
            width: 100%;
            padding: 3px 5px;
            box-sizing: border-box;
            flex: 1;
            color: #555;
        }

        .tool-box {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            width: 100%;
            height: 100%;
        }

        #formula, #data, #instrument, #system {
            display: none;
        }

        /*工具item*/
        .tool-box .tool-item {
            cursor: pointer;
        }

        .tool-box .tool-item .tool-list {
            position: absolute;
            background-color: #fff;
            padding: 3px;
            border: solid 1px #aaa;
            box-shadow: 0 2px 3px #555;
            z-index: 100;
        }

        .tool-box .tool-item .tool-list .tool-list-item:hover {
            cursor: pointer;
            background-color: #CCE8CF;
        }

        .tool-box .tool-item i.fa-caret-down {
            cursor: pointer;
            text-align: center;
        }

        .tool-box .tool-item i.fa-caret-down:hover {
            background-color: #CCE8CF;
        }

        /* 工具  文件模块 */
        .tool-item.file {
            height: 100%;
            width: 130px;
            display: flex;
            /*flex-direction: column;*/
            justify-content: center;
            align-items: center;
            color: #555;
            position: relative;
            border-right: solid 1px #ddd;
        }

        .tool-item.file .icon {
            display: flex;
            font-size: 12px;
            align-items: center;
            justify-content: space-around;
        }

        .tool-item.file .icon:hover {
            background-color: #CCE8CF;
        }

        .tool-item.file .fa-folder-open {
            font-size: 26px;
            text-align: center;
            background-color: #fff;
        }

        .tool-item.file .tool-list {
            position: absolute;
            top: 50px;
            width: 60px;
        }

        .tool-item.file .right {
            display: flex;
            flex-direction: column;
            margin-left: 10px;
        }

        .tool-item.file .right i {
            color: #7EA5EE;
        }

        .tool-item.file .right .common:hover {
            background-color: #CCE8CF;
        }

        /* 预览*/
        .tool-item.preview {
            display: flex;
            /*flex-direction: column;*/
            align-items: center;
            height: 100%;
            padding: 0 10px;
            border-right: solid 1px #ddd;
        }

        .tool-item.preview .con {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2px 8px;
            font-size: 12px;
        }

        /*.tool-item.preview .con .text{
            font-size: 14px;
        }*/
        .tool-item.preview .con:hover {
            background-color: #CCE8CF;
        }

        .tool-item.preview i {
            font-size: 30px;
            color: #7EA5EE;
        }

        /* 工具 复制剪切粘贴板 */
        .tool-item.plate {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 5px;
            font-size: 10px;

        }

        .tool-item.plate > button {
            padding: 2px;
            background-color: #fff;
            border: none;
            font-size: 12px;
        }

        .tool-item.plate > button:hover {
            background-color: #CCE8CF;
        }

        .tool-item.plate i {
            color: #7EA5EE;
        }

        /* 工具 格式刷 */
        .tool-item.format {
            display: flex;
            align-items: center;
            margin-left: 5px;
            padding: 0 3px;
            border-right: solid 1px #ddd;
        }

        .tool-item.format .brush {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 5px;
        }

        .tool-item.format .brush:hover {
            background-color: #CCE8CF;
        }

        .tool-item.format .fa-paint-brush {
            color: #CEA6F3;
            font-size: 20px;
        }

        /* 工具 文本字体字号选择器 */
        .tool-item.word {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 3px;
            border-right: solid 1px #ddd;
        }

        .tool-item.word .input {
            display: flex;
        }

        .tool-item.word .input .down {
            margin-left: -13px;
            width: 12px;
            height: 23px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tool-item.word .input .family {
            display: flex;
            position: relative;
            height: 100%;
        }

        .tool-item.word .input .family .tool-list {
            top: 25px;
            width: 100px;
        }

        .tool-item.word .input .size {
            display: flex;
            align-items: center;
            position: relative;
            height: 100%;
        }

        .tool-item.word .input .size input {
            width: 60px;
        }

        .tool-item.word .input .size .fa-plus-square, .tool-item.word .input .size .fa-minus-square {
            font-size: 20px;
            margin-left: 3px;
            color: #7EA5EE;
        }

        .tool-item.word .input .size .tool-list {
            position: absolute;
            top: 23px;
            width: 50px;
        }

        .tool-item.word .quick {
            display: flex;
            margin-top: 6px;
        }

        .tool-item.word .quick > div {
            display: flex;
            margin-right: 6px;
            height: 20px;
        }

        .tool-item.word .quick > div > i {
            width: 100%;
            height: 20px;
            padding: 0 3px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tool-item.word .quick > div > i.active {
            background-color: #8ECB94;
        }

        .tool-item.word .quick > div:hover {
            background-color: #CCE8CF;
        }

        .tool-item.word .quick .border {
            top: 20px;
        }

        /* 布局工具   */
        .tool-item.flex {
            margin-left: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 5px;
            border-right: solid 1px #ddd;
        }

        .tool-item.flex .vertical {
            display: flex;
        }

        .tool-item.flex .vertical > div {
            font-size: 16px;
            color: #777;
            min-width: 16px;
            height: 20px;
            width: 24px;
        }

        .tool-item.flex .vertical > div > i {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tool-item.flex .vertical > div > i:hover {
            background-color: #CCE8CF;
        }

        .tool-item.flex .vertical > div > i.active {
            background-color: #99D39F;
        }

        .tool-item.flex .horizontal {
            display: flex;
        }

        .tool-item.flex .horizontal > div {
            font-size: 16px;
            color: #777;
            min-width: 16px;
            height: 20px;
            width: 24px;
        }

        .tool-item.flex .horizontal > div > i {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .tool-item.flex .horizontal > div > i:hover {
            background-color: #CCE8CF;
        }

        .tool-item.flex .horizontal > div > i.active {
            background-color: #99D39F;
        }

        /* 合并单元格  */
        .tool-item.mergeCell {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            font-size: 10px;
            position: relative;
        }

        .tool-item.mergeCell .columns {
            font-size: 25px;
            color: #77AE59;
            width: 100%;
            text-align: center;
        }

        .tool-item.mergeCell .columns:hover, .tool-item.mergeCell .icon:hover {
            background-color: #CCE8CF;
        }

        .tool-item.mergeCell .tool-list {
            top: 55px;
        }

        /* 插入单元格  */
        .tool-item.insertCell {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            font-size: 10px;
            position: relative;
        }

        .tool-item.insertCell .insert {
            font-size: 25px;
            color: #77AE59;
            width: 100%;
            text-align: center;
        }

        .tool-item.insertCell .insert:hover, .tool-item.insertCell .icon:hover {
            background-color: #CCE8CF;
        }

        .tool-item.insertCell .tool-list {
            top: 55px;
            left: 0;
            width: 100px;
        }

        /* 删除单元格  */
        .tool-item.unsertCell {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            font-size: 10px;
            position: relative;
            padding-right: 5px;
            border-right: solid 1px #ddd;
        }

        .tool-item.unsertCell .unsert {
            font-size: 25px;
            color: #77AE59;
            width: 100%;
            text-align: center;
        }

        .tool-item.unsertCell .insert:hover, .tool-item.unsertCell .icon:hover {
            background-color: #CCE8CF;
        }

        .tool-item.unsertCell .tool-list {
            top: 55px;
            left: 0;
            width: 100px;
        }

        /* 常用函数  */
        .tool-item.function {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            font-size: 10px;
            position: relative;
        }

        .tool-item.function .formula {
            font-size: 25px;
            color: #7EA5EE;
            width: 100%;
            text-align: center;
        }

        .tool-item.function .insert:hover, .tool-item.function .icon:hover {
            background-color: #CCE8CF;
        }

        .tool-item.function .tool-list {
            top: 55px;
            left: 0;
            width: 100px;
        }

        /*  函数公式  */
        /* 算术运算函数  */
        #formula .tool-item {
            display: flex;
            /*flex-direction: column;*/
            justify-content: center;
            align-items: center;
            padding: 0 5px;
            font-size: 10px;
            position: relative;
        }

        #formula .tool-item:not(:last-child) {
            border-right: solid 1px #ddd;
        }

        #formula .tool-item .right {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 5px;
        }

        #formula .tool-item .right i {
            color: #008000;
        }

        #formula .tool-item .formula {
            font-size: 25px;
            color: #7EA5EE;
            width: 100%;
            text-align: center;
        }

        #formula .tool-item .insert:hover, #formula .tool-item .icon:hover {
            background-color: #CCE8CF;
        }

        #formula .tool-item .tool-list {
            top: 55px;
            left: 0;
            width: 100px;
        }

        #data .tool-item {
            display: flex;
            /*flex-direction: column;*/
            justify-content: center;
            align-items: center;
            padding: 0 5px;
            font-size: 10px;
            position: relative;
        }

        #data .tool-item:not(:last-child) {
            border-right: solid 1px #ddd;
        }

        #data .tool-item .left .top {
            font-size: 25px;
            color: #7EA5EE;
            width: 100%;
            text-align: center;
        }

        #data .tool-item .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 10px;
        }

        /*tab  */
        #page-tab {
            height: 30px;
            border-top: solid 1px #ddd;
            border-bottom: solid 1px #ddd;
        }

        #page-tab #menu-list a {
            background-color: #f9f9f9;
            color: #666;
        }

        #page-tab #menu-list a.active {
            background-color: #E2EDDA;
            color: #666;
            border-bottom: solid 2px #81B369;
            box-sizing: border-box;
        }

        #page-tab #menu-list a.active:hover {
            color: #666;
        }

        #page-tab #menu-list a.active .menu-close {
            color: #666;
        }

        .content {
            padding: 3px;
            width: 100%;
            height: calc(100% - 200px);
            box-sizing: border-box;
        }

        #table-head th, #table-left td, #table-body td {
            min-width: 100px;
            height: 30px;
            border: solid 1px #ccc;
        }

        #table-left table, #table-left td {
            border-right: none;
        }

        .content .main-table {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .content .main-table .table-head {
            overflow: hidden;
        }

        .content .main-table .table-left-and-body {
            height: 100%;
            display: flex;
        }

        .content .main-table .table-left {
            overflow: hidden;
        }

        .content .main-table .table-body {
            width: calc(100% - 110px);
            overflow: auto;
        }

        .content .main-table .table-body td .cell.active {
            box-sizing: border-box;
            background-color: #CCE8CF;
            border: solid 1px #5BA532;
        }

        #table-body td {
            overflow: hidden;
        }

        #table-body td .cell {
            width: 100%;
            height: 100%;
            line-height: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            border: none;
            outline: none;
            resize: none;
            text-align: center;
        }

        .main-table .table-head th, .main-table .table-left td {
            background-color: #F0F0F0;
        }

        .content .main-table .table-head th {
            background-color: #F0F0F0;
        }

        #selectDiv {
            position: absolute;
            width: 0px;
            height: 0px;
            font-size: 0px;
            margin: 0px;
            padding: 0px;
            border: 1px dashed rgb(0, 153, 255);
            background-color: rgb(195, 213, 237);
            z-index: 1000;
            opacity: 0.6;
            display: none
        }


    </style>
</head>
<body>
<div id="tab-null">
    <a></a>
</div>
<div id="vm">
    <div class="head">
        <div class="menu">
            <div data-con="begin" class="menu-item active"><span><i class="fa fa-star"></i></span>
                开始
            </div>
            <div data-con="formula" class="menu-item"><span><i class="fa fa-tags"></i></span>
                公式
            </div>
            <div data-con="data" class="menu-item"><i class="fa fa-database"></i>
                数据
            </div>
            <div data-con="instrument" class="menu-item"><i class="fa fa-paperclip"></i>
                工具
            </div>
            <div data-con="system" class="menu-item"><i class="fa fa-cog"></i>
                系统
            </div>
        </div>
        <div class="tool">
            <div id="begin" class="tool-box" style="display: flex;">
                <div class="tool-item file">
                    <div class="left"><i class="fa fa-folder-open"></i>
                        <div class="icon"><span>文件</span> <i class="fa fa-caret-down"></i></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li data-family="SimSun" class="tool-list-item">新建</li>
                            <li data-family="SimSun" class="tool-list-item">
                                本地打开
                                <input id="openFile" type="file" accept="application/vnd.ms-excel" hidden="hidden"></li>
                            <li data-family="SimSun" class="tool-list-item">本地保存</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common save-file-online"><i aria-hidden="true" class="fa fa-file-text-o"></i>
                            打开
                        </div>
                        <div class="common save-file-online"><i aria-hidden="true" class="fa fa-floppy-o"></i>
                            保存
                        </div>
                    </div>
                </div>
                <div class="tool-item preview">
                    <div class="con"><i aria-hidden="true" class="fa fa-eye"></i>
                        <div class="text">
                            预览
                        </div>
                    </div>
                </div>
                <div class="tool-item plate">
                    <button class="copy"><i class="fa fa-files-o"></i> <span>复制</span></button>
                    <button class="cut"><i class="fa fa-scissors"></i> <span>剪切</span></button>
                    <div class="paste"><i class="fa fa-clipboard"></i> <span>粘贴</span></div>
                </div>
                <div class="tool-item format">
                    <div class="brush"><i class="fa fa-paint-brush"></i> <span>格式刷</span></div>
                </div>
                <div class="tool-item word">
                    <div class="input">
                        <div class="family"><input value="宋体"> <i class="fa fa-caret-down down"></i>
                            <div hidden="hidden" class="tool-list" style="display: none;">
                                <li data-family="SimSun" class="tool-list-item">宋体</li>
                                <li data-family="SimHei" class="tool-list-item">黑体</li>
                                <li data-family="Microsoft Yahei" class="tool-list-item">微软雅黑</li>
                            </div>
                        </div>
                        <div class="size"><input value="12"> <i class="fa fa-caret-down down"></i> <i
                                class="fa fa-plus-square"></i> <i class="fa fa-minus-square"></i>
                            <div hidden="hidden" class="tool-list" style="display: none;">
                                <li class="tool-list-item">6</li>
                                <li class="tool-list-item">8</li>
                                <li class="tool-list-item">10</li>
                                <li class="tool-list-item">12</li>
                                <li class="tool-list-item">14</li>
                                <li class="tool-list-item">16</li>
                                <li class="tool-list-item">18</li>
                                <li class="tool-list-item">22</li>
                            </div>
                        </div>
                    </div>
                    <div class="quick">
                        <div title="加粗" class="bold"><i class="fa fa-bold"></i></div>
                        <div title="斜体" class="italic"><i class="fa fa-italic"></i></div>
                        <div title="下划线" class="under-line"><i class="fa fa-underline"></i></div>
                        <div id="font-color" title="颜色" class="color"><i class="fa fa-font"></i> <i
                                class="fa fa-caret-down"></i></div>
                        <div id="bg-color" title="背景色" class="bg-color"><i class="fa fa-shower"></i> <i
                                class="fa fa-caret-down"></i></div>
                        <div title="边框" class="border"><i class="fa fa-table"></i> <i class="fa fa-caret-down"></i>
                            <div hidden="hidden" class="tool-list" style="display: none;">
                                <li class="tool-list-item">取消边框</li>
                                <li class="tool-list-item">添加边框</li>
                                <li class="tool-list-item">左边框</li>
                                <li class="tool-list-item">右边框</li>
                                <li class="tool-list-item">上边框</li>
                                <li class="tool-list-item">下边框</li>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tool-item flex">
                    <div class="vertical">
                        <div title="靠上" class="top"><i class="fa fa-sort-asc"></i></div>
                        <div title="居中" class="middle"><i class="fa fa-sort"></i></div>
                        <div title="靠下" class="bottom"><i class="fa fa-sort-desc"></i></div>
                        <div title="减少缩进量" class="outdent"><i class="fa fa-outdent"></i></div>
                        <div title="添加缩进量" class="indent"><i class="fa fa-indent"></i></div>
                    </div>
                    <div class="horizontal">
                        <div title="靠左" class="left"><i class="fa fa-align-left"></i></div>
                        <div title="居中" class="center"><i class="fa fa-align-center"></i></div>
                        <div title="靠右" class="right"><i class="fa fa-align-right"></i></div>
                        <div title="两边布局" class="between"><i class="fa fa-align-justify"></i></div>
                        <div title="平均分布" class="around"><i class="fa fa-exchange"></i></div>
                    </div>
                </div>
                <div class="tool-item mergeCell">
                    <div class="columns"><i class="fa fa-columns"></i></div>
                    <div class="icon"><span>合并/拆分单元格</span> <i class="fa fa-caret-down"></i></div>
                    <div hidden="hidden" class="tool-list" style="display: none;">
                        <li class="tool-list-item">合并单元格</li>
                        <li class="tool-list-item">拆分单元格</li>
                    </div>
                </div>
                <div class="tool-item insertCell">
                    <div class="insert"><i class="fa fa-sign-in"></i></div>
                    <div class="icon"><span>插入单元格</span> <i class="fa fa-caret-down"></i></div>
                    <div hidden="hidden" class="tool-list" style="display: none;">
                        <li class="tool-list-item">活动单元格上移</li>
                        <li class="tool-list-item">活动单元格左移</li>
                        <li class="tool-list-item">添加整行</li>
                        <li class="tool-list-item">添加整列</li>
                    </div>
                </div>
                <div class="tool-item unsertCell">
                    <div class="unsert"><i class="fa fa-sign-out"></i></div>
                    <div class="icon"><span>删除单元格</span> <i class="fa fa-caret-down"></i></div>
                    <div hidden="hidden" class="tool-list" style="display: none;">
                        <li class="tool-list-item">下方单元格上移</li>
                        <li class="tool-list-item">右方单元格左移</li>
                        <li class="tool-list-item">删除整行</li>
                        <li class="tool-list-item">删除整列</li>
                    </div>
                </div>
                <div class="tool-item function">
                    <div class="formula"><i class="fa fa-header"></i></div>
                    <div class="icon"><span>函数</span></div>
                    <div hidden="hidden" class="tool-list" style="display: none;">
                        <li class="tool-list-item">求和</li>
                        <li class="tool-list-item">平均值</li>
                        <li class="tool-list-item">最大值</li>
                        <li class="tool-list-item">最小值</li>
                    </div>
                </div>
            </div>
            <div id="formula" class="tool-box" style="display: none;">
                <div class="tool-item count">
                    <div class="left">
                        <div class="formula"><i class="fa fa-header"></i></div>
                        <div class="icon"><span>运算函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">求和</li>
                            <li class="tool-list-item">最大值</li>
                            <li class="tool-list-item">最小值</li>
                            <li class="tool-list-item">平均值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            求和函数
                        </div>
                        <div class="common max-function"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            最大值
                        </div>
                        <div class="common min-function"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            最小值
                        </div>
                    </div>
                </div>
                <div class="tool-item time">
                    <div class="left">
                        <div class="formula"><i class="fa fa-calendar-o"></i></div>
                        <div class="icon"><span>时间函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">获取当前时间</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            获取当前时间
                        </div>
                    </div>
                </div>
                <div class="tool-item check-table">
                    <div class="left">
                        <div class="formula"><i class="fa fa-table"></i></div>
                        <div class="icon"><span>查表函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">二维表查值</li>
                            <li class="tool-list-item">三维表查值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            二维表查值
                        </div>
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            三维表查值
                        </div>
                    </div>
                </div>
                <div class="tool-item check-table">
                    <div class="left">
                        <div class="formula"><i class="fa fa-database"></i></div>
                        <div class="icon"><span>数据库函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">时段日旬月最大</li>
                            <li class="tool-list-item">时段日旬月最小</li>
                            <li class="tool-list-item">时段日旬月平均值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            时段日旬月最大
                        </div>
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            时段日旬月最小
                        </div>
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            时段日旬月平均值
                        </div>
                    </div>
                </div>
                <div class="tool-item term">
                    <div class="left">
                        <div class="formula"><i class="fa fa-deaf"></i></div>
                        <div class="icon"><span>条件函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">根据条件返回数据值</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            根据条件返回数据值
                        </div>
                    </div>
                </div>
                <div class="tool-item term">
                    <div class="left">
                        <div class="formula"><i class="fa fa-tint"></i></div>
                        <div class="icon"><span>水务计算函数</span></div>
                        <div hidden="hidden" class="tool-list" style="display: none;">
                            <li class="tool-list-item">水库水量平衡计算</li>
                        </div>
                    </div>
                    <div class="right">
                        <div class="common sum-function"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            水库水量平衡计算
                        </div>
                    </div>
                </div>
            </div>
            <div id="data" hidden="hidden" class="tool-box" style="display: none;">
                <div class="tool-item attr-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-paperclip"></i></div>
                        <div class="icon"><span>属性绑定</span></div>
                    </div>
                    <div class="right">
                        <div class="common sishuiwei"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            死水位
                        </div>
                        <div class="common xunxianshuiwei"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            汛限水位
                        </div>
                        <div class="common shejishuiwei"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            设计水位
                        </div>
                    </div>
                </div>
                <div class="tool-item value-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-gg"></i></div>
                        <div class="icon"><span>值绑定</span></div>
                    </div>
                    <div class="right">
                        <div class="common rukuliuliang"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            入库流量
                        </div>
                        <div class="common chukuliuliang"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            出库流量
                        </div>
                        <div class="common qishuiliuliang"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            弃水流量
                        </div>
                    </div>
                </div>
                <div class="tool-item timer-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-clock-o"></i></div>
                        <div class="icon"><span>时间绑定</span></div>
                    </div>
                    <div class="right">
                        <div class="common rukuliuliang"><i aria-hidden="true" class="fa fa-handshake-o"></i>
                            入库流量
                        </div>
                        <div class="common chukuliuliang"><i aria-hidden="true" class="fa fa-maxcdn"></i>
                            出库流量
                        </div>
                        <div class="common qishuiliuliang"><i aria-hidden="true" class="fa fa-dot-circle-o"></i>
                            弃水流量
                        </div>
                    </div>
                </div>
                <div class="tool-item data-bind">
                    <div class="left">
                        <div class="top"><i aria-hidden="true" class="fa fa-cubes"></i></div>
                        <div class="icon"><span>导入数据</span></div>
                    </div>
                    <div class="left"></div>
                </div>
            </div>
            <div id="instrument" hidden="hidden" class="tool-box" style="display: none;"></div>
            <div id="system" hidden="hidden" class="tool-box" style="display: none;"></div>
        </div>
    </div>
    <div id="page-tab">
        <div class="lef_top_icon"></div>
        <div id="page-prev">&lt;&lt;</div>
        <div id="page-tab-box">
            <nav id="page-tab-content">
                <div id="menu-list"><a href="javascript:void(0);" data-url="pages/index.html" data-value="首页" class="">
                    <div class="menu-name">首页</div>
                </a><a href="javascript:void(0);" data-url="pages/index.html" data-value="新建文件" class="active">
                    <div class="menu-name">新建文件</div>
                    <i class="menu-close fa fa-times-circle"></i></a></div>
            </nav>
        </div>
        <div id="page-next">&gt;&gt;</div>
        <div class="right_top_icon"></div>
    </div>
    <div class="content">
        <div class="info"></div>
        <div class="main-table">
            <div id="table-head" class="table-head">
                <table>
                    <tbody>
                    <tr>
                        <th></th>
                        <th class="top-head">A</th>
                        <th class="top-head">B</th>
                        <th class="top-head">C</th>
                        <th class="top-head">D</th>
                        <th class="top-head">E</th>
                        <th class="top-head">F</th>
                        <th class="top-head">G</th>
                        <th class="top-head">H</th>
                        <th class="top-head">I</th>
                        <th class="top-head">J</th>
                        <th class="top-head">K</th>
                        <th class="top-head">L</th>
                        <th class="top-head">M</th>
                        <th class="top-head">N</th>
                        <th class="top-head">O</th>
                        <th class="top-head">P</th>
                        <th class="top-head">Q</th>
                        <th class="top-head">R</th>
                        <th class="top-head">S</th>
                        <th class="top-head">T</th>
                        <th class="top-head">U</th>
                        <th class="top-head">V</th>
                        <th class="top-head">W</th>
                        <th class="top-head">X</th>
                        <th class="top-head">Y</th>
                        <th class="top-head">Z</th>
                        <th class="top-head">[</th>
                        <th class="top-head">\</th>
                        <th class="top-head">]</th>
                        <th class="top-head">^</th>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="table-left-and-body">
                <div id="table-left" class="table-left">
                    <table>
                        <tbody>
                        <tr>
                            <td class="left-index">1</td>
                        </tr>
                        <tr>
                            <td class="left-index">2</td>
                        </tr>
                        <tr>
                            <td class="left-index">3</td>
                        </tr>
                        <tr>
                            <td class="left-index">4</td>
                        </tr>
                        <tr>
                            <td class="left-index">5</td>
                        </tr>
                        <tr>
                            <td class="left-index">6</td>
                        </tr>
                        <tr>
                            <td class="left-index">7</td>
                        </tr>
                        <tr>
                            <td class="left-index">8</td>
                        </tr>
                        <tr>
                            <td class="left-index">9</td>
                        </tr>
                        <tr>
                            <td class="left-index">10</td>
                        </tr>
                        <tr>
                            <td class="left-index">11</td>
                        </tr>
                        <tr>
                            <td class="left-index">12</td>
                        </tr>
                        <tr>
                            <td class="left-index">13</td>
                        </tr>
                        <tr>
                            <td class="left-index">14</td>
                        </tr>
                        <tr>
                            <td class="left-index">15</td>
                        </tr>
                        <tr>
                            <td class="left-index">16</td>
                        </tr>
                        <tr>
                            <td class="left-index">17</td>
                        </tr>
                        <tr>
                            <td class="left-index">18</td>
                        </tr>
                        <tr>
                            <td class="left-index">19</td>
                        </tr>
                        <tr>
                            <td class="left-index">20</td>
                        </tr>
                        <tr>
                            <td class="left-index">21</td>
                        </tr>
                        <tr>
                            <td class="left-index">22</td>
                        </tr>
                        <tr>
                            <td class="left-index">23</td>
                        </tr>
                        <tr>
                            <td class="left-index">24</td>
                        </tr>
                        <tr>
                            <td class="left-index">25</td>
                        </tr>
                        <tr>
                            <td class="left-index">26</td>
                        </tr>
                        <tr>
                            <td class="left-index">27</td>
                        </tr>
                        <tr>
                            <td class="left-index">28</td>
                        </tr>
                        <tr>
                            <td class="left-index">29</td>
                        </tr>
                        <tr>
                            <td class="left-index">30</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="table-body" class="table-body">
                    <table>
                        <tbody>
                        <tr>
                            <td id="row1-col1" class="cell-td"><input data-row="1" data-col="1" class="cell active">
                            </td>
                            <td id="row1-col2" class="cell-td"><input data-row="1" data-col="2" class="cell"></td>
                            <td id="row1-col3" class="cell-td"><input data-row="1" data-col="3" class="cell"></td>
                            <td id="row1-col4" class="cell-td"><input data-row="1" data-col="4" class="cell"></td>
                            <td id="row1-col5" class="cell-td"><input data-row="1" data-col="5" class="cell"></td>
                            <td id="row1-col6" class="cell-td"><input data-row="1" data-col="6" class="cell"></td>
                            <td id="row1-col7" class="cell-td"><input data-row="1" data-col="7" class="cell"></td>
                            <td id="row1-col8" class="cell-td"><input data-row="1" data-col="8" class="cell"></td>
                            <td id="row1-col9" class="cell-td"><input data-row="1" data-col="9" class="cell"></td>
                            <td id="row1-col10" class="cell-td"><input data-row="1" data-col="10" class="cell"></td>
                            <td id="row1-col11" class="cell-td"><input data-row="1" data-col="11" class="cell"></td>
                            <td id="row1-col12" class="cell-td"><input data-row="1" data-col="12" class="cell"></td>
                            <td id="row1-col13" class="cell-td"><input data-row="1" data-col="13" class="cell"></td>
                            <td id="row1-col14" class="cell-td"><input data-row="1" data-col="14" class="cell"></td>
                            <td id="row1-col15" class="cell-td"><input data-row="1" data-col="15" class="cell"></td>
                            <td id="row1-col16" class="cell-td"><input data-row="1" data-col="16" class="cell"></td>
                            <td id="row1-col17" class="cell-td"><input data-row="1" data-col="17" class="cell"></td>
                            <td id="row1-col18" class="cell-td"><input data-row="1" data-col="18" class="cell"></td>
                            <td id="row1-col19" class="cell-td"><input data-row="1" data-col="19" class="cell"></td>
                            <td id="row1-col20" class="cell-td"><input data-row="1" data-col="20" class="cell"></td>
                            <td id="row1-col21" class="cell-td"><input data-row="1" data-col="21" class="cell"></td>
                            <td id="row1-col22" class="cell-td"><input data-row="1" data-col="22" class="cell"></td>
                            <td id="row1-col23" class="cell-td"><input data-row="1" data-col="23" class="cell"></td>
                            <td id="row1-col24" class="cell-td"><input data-row="1" data-col="24" class="cell"></td>
                            <td id="row1-col25" class="cell-td"><input data-row="1" data-col="25" class="cell"></td>
                            <td id="row1-col26" class="cell-td"><input data-row="1" data-col="26" class="cell"></td>
                            <td id="row1-col27" class="cell-td"><input data-row="1" data-col="27" class="cell"></td>
                            <td id="row1-col28" class="cell-td"><input data-row="1" data-col="28" class="cell"></td>
                            <td id="row1-col29" class="cell-td"><input data-row="1" data-col="29" class="cell"></td>
                            <td id="row1-col30" class="cell-td"><input data-row="1" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row2-col1" class="cell-td"><input data-row="2" data-col="1" class="cell"></td>
                            <td id="row2-col2" class="cell-td"><input data-row="2" data-col="2" class="cell"></td>
                            <td id="row2-col3" class="cell-td"><input data-row="2" data-col="3" class="cell"></td>
                            <td id="row2-col4" class="cell-td"><input data-row="2" data-col="4" class="cell"></td>
                            <td id="row2-col5" class="cell-td"><input data-row="2" data-col="5" class="cell"></td>
                            <td id="row2-col6" class="cell-td"><input data-row="2" data-col="6" class="cell"></td>
                            <td id="row2-col7" class="cell-td"><input data-row="2" data-col="7" class="cell"></td>
                            <td id="row2-col8" class="cell-td"><input data-row="2" data-col="8" class="cell"></td>
                            <td id="row2-col9" class="cell-td"><input data-row="2" data-col="9" class="cell"></td>
                            <td id="row2-col10" class="cell-td"><input data-row="2" data-col="10" class="cell"></td>
                            <td id="row2-col11" class="cell-td"><input data-row="2" data-col="11" class="cell"></td>
                            <td id="row2-col12" class="cell-td"><input data-row="2" data-col="12" class="cell"></td>
                            <td id="row2-col13" class="cell-td"><input data-row="2" data-col="13" class="cell"></td>
                            <td id="row2-col14" class="cell-td"><input data-row="2" data-col="14" class="cell"></td>
                            <td id="row2-col15" class="cell-td"><input data-row="2" data-col="15" class="cell"></td>
                            <td id="row2-col16" class="cell-td"><input data-row="2" data-col="16" class="cell"></td>
                            <td id="row2-col17" class="cell-td"><input data-row="2" data-col="17" class="cell"></td>
                            <td id="row2-col18" class="cell-td"><input data-row="2" data-col="18" class="cell"></td>
                            <td id="row2-col19" class="cell-td"><input data-row="2" data-col="19" class="cell"></td>
                            <td id="row2-col20" class="cell-td"><input data-row="2" data-col="20" class="cell"></td>
                            <td id="row2-col21" class="cell-td"><input data-row="2" data-col="21" class="cell"></td>
                            <td id="row2-col22" class="cell-td"><input data-row="2" data-col="22" class="cell"></td>
                            <td id="row2-col23" class="cell-td"><input data-row="2" data-col="23" class="cell"></td>
                            <td id="row2-col24" class="cell-td"><input data-row="2" data-col="24" class="cell"></td>
                            <td id="row2-col25" class="cell-td"><input data-row="2" data-col="25" class="cell"></td>
                            <td id="row2-col26" class="cell-td"><input data-row="2" data-col="26" class="cell"></td>
                            <td id="row2-col27" class="cell-td"><input data-row="2" data-col="27" class="cell"></td>
                            <td id="row2-col28" class="cell-td"><input data-row="2" data-col="28" class="cell"></td>
                            <td id="row2-col29" class="cell-td"><input data-row="2" data-col="29" class="cell"></td>
                            <td id="row2-col30" class="cell-td"><input data-row="2" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row3-col1" class="cell-td"><input data-row="3" data-col="1" class="cell"></td>
                            <td id="row3-col2" class="cell-td"><input data-row="3" data-col="2" class="cell"></td>
                            <td id="row3-col3" class="cell-td"><input data-row="3" data-col="3" class="cell"></td>
                            <td id="row3-col4" class="cell-td"><input data-row="3" data-col="4" class="cell"></td>
                            <td id="row3-col5" class="cell-td"><input data-row="3" data-col="5" class="cell"></td>
                            <td id="row3-col6" class="cell-td"><input data-row="3" data-col="6" class="cell"></td>
                            <td id="row3-col7" class="cell-td"><input data-row="3" data-col="7" class="cell"></td>
                            <td id="row3-col8" class="cell-td"><input data-row="3" data-col="8" class="cell"></td>
                            <td id="row3-col9" class="cell-td"><input data-row="3" data-col="9" class="cell"></td>
                            <td id="row3-col10" class="cell-td"><input data-row="3" data-col="10" class="cell"></td>
                            <td id="row3-col11" class="cell-td"><input data-row="3" data-col="11" class="cell"></td>
                            <td id="row3-col12" class="cell-td"><input data-row="3" data-col="12" class="cell"></td>
                            <td id="row3-col13" class="cell-td"><input data-row="3" data-col="13" class="cell"></td>
                            <td id="row3-col14" class="cell-td"><input data-row="3" data-col="14" class="cell"></td>
                            <td id="row3-col15" class="cell-td"><input data-row="3" data-col="15" class="cell"></td>
                            <td id="row3-col16" class="cell-td"><input data-row="3" data-col="16" class="cell"></td>
                            <td id="row3-col17" class="cell-td"><input data-row="3" data-col="17" class="cell"></td>
                            <td id="row3-col18" class="cell-td"><input data-row="3" data-col="18" class="cell"></td>
                            <td id="row3-col19" class="cell-td"><input data-row="3" data-col="19" class="cell"></td>
                            <td id="row3-col20" class="cell-td"><input data-row="3" data-col="20" class="cell"></td>
                            <td id="row3-col21" class="cell-td"><input data-row="3" data-col="21" class="cell"></td>
                            <td id="row3-col22" class="cell-td"><input data-row="3" data-col="22" class="cell"></td>
                            <td id="row3-col23" class="cell-td"><input data-row="3" data-col="23" class="cell"></td>
                            <td id="row3-col24" class="cell-td"><input data-row="3" data-col="24" class="cell"></td>
                            <td id="row3-col25" class="cell-td"><input data-row="3" data-col="25" class="cell"></td>
                            <td id="row3-col26" class="cell-td"><input data-row="3" data-col="26" class="cell"></td>
                            <td id="row3-col27" class="cell-td"><input data-row="3" data-col="27" class="cell"></td>
                            <td id="row3-col28" class="cell-td"><input data-row="3" data-col="28" class="cell"></td>
                            <td id="row3-col29" class="cell-td"><input data-row="3" data-col="29" class="cell"></td>
                            <td id="row3-col30" class="cell-td"><input data-row="3" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row4-col1" class="cell-td"><input data-row="4" data-col="1" class="cell"></td>
                            <td id="row4-col2" class="cell-td"><input data-row="4" data-col="2" class="cell"></td>
                            <td id="row4-col3" class="cell-td"><input data-row="4" data-col="3" class="cell"></td>
                            <td id="row4-col4" class="cell-td"><input data-row="4" data-col="4" class="cell"></td>
                            <td id="row4-col5" class="cell-td"><input data-row="4" data-col="5" class="cell"></td>
                            <td id="row4-col6" class="cell-td"><input data-row="4" data-col="6" class="cell"></td>
                            <td id="row4-col7" class="cell-td"><input data-row="4" data-col="7" class="cell"></td>
                            <td id="row4-col8" class="cell-td"><input data-row="4" data-col="8" class="cell"></td>
                            <td id="row4-col9" class="cell-td"><input data-row="4" data-col="9" class="cell"></td>
                            <td id="row4-col10" class="cell-td"><input data-row="4" data-col="10" class="cell"></td>
                            <td id="row4-col11" class="cell-td"><input data-row="4" data-col="11" class="cell"></td>
                            <td id="row4-col12" class="cell-td"><input data-row="4" data-col="12" class="cell"></td>
                            <td id="row4-col13" class="cell-td"><input data-row="4" data-col="13" class="cell"></td>
                            <td id="row4-col14" class="cell-td"><input data-row="4" data-col="14" class="cell"></td>
                            <td id="row4-col15" class="cell-td"><input data-row="4" data-col="15" class="cell"></td>
                            <td id="row4-col16" class="cell-td"><input data-row="4" data-col="16" class="cell"></td>
                            <td id="row4-col17" class="cell-td"><input data-row="4" data-col="17" class="cell"></td>
                            <td id="row4-col18" class="cell-td"><input data-row="4" data-col="18" class="cell"></td>
                            <td id="row4-col19" class="cell-td"><input data-row="4" data-col="19" class="cell"></td>
                            <td id="row4-col20" class="cell-td"><input data-row="4" data-col="20" class="cell"></td>
                            <td id="row4-col21" class="cell-td"><input data-row="4" data-col="21" class="cell"></td>
                            <td id="row4-col22" class="cell-td"><input data-row="4" data-col="22" class="cell"></td>
                            <td id="row4-col23" class="cell-td"><input data-row="4" data-col="23" class="cell"></td>
                            <td id="row4-col24" class="cell-td"><input data-row="4" data-col="24" class="cell"></td>
                            <td id="row4-col25" class="cell-td"><input data-row="4" data-col="25" class="cell"></td>
                            <td id="row4-col26" class="cell-td"><input data-row="4" data-col="26" class="cell"></td>
                            <td id="row4-col27" class="cell-td"><input data-row="4" data-col="27" class="cell"></td>
                            <td id="row4-col28" class="cell-td"><input data-row="4" data-col="28" class="cell"></td>
                            <td id="row4-col29" class="cell-td"><input data-row="4" data-col="29" class="cell"></td>
                            <td id="row4-col30" class="cell-td"><input data-row="4" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row5-col1" class="cell-td"><input data-row="5" data-col="1" class="cell"></td>
                            <td id="row5-col2" class="cell-td"><input data-row="5" data-col="2" class="cell"></td>
                            <td id="row5-col3" class="cell-td"><input data-row="5" data-col="3" class="cell"></td>
                            <td id="row5-col4" class="cell-td"><input data-row="5" data-col="4" class="cell"></td>
                            <td id="row5-col5" class="cell-td"><input data-row="5" data-col="5" class="cell"></td>
                            <td id="row5-col6" class="cell-td"><input data-row="5" data-col="6" class="cell"></td>
                            <td id="row5-col7" class="cell-td"><input data-row="5" data-col="7" class="cell"></td>
                            <td id="row5-col8" class="cell-td"><input data-row="5" data-col="8" class="cell"></td>
                            <td id="row5-col9" class="cell-td"><input data-row="5" data-col="9" class="cell"></td>
                            <td id="row5-col10" class="cell-td"><input data-row="5" data-col="10" class="cell"></td>
                            <td id="row5-col11" class="cell-td"><input data-row="5" data-col="11" class="cell"></td>
                            <td id="row5-col12" class="cell-td"><input data-row="5" data-col="12" class="cell"></td>
                            <td id="row5-col13" class="cell-td"><input data-row="5" data-col="13" class="cell"></td>
                            <td id="row5-col14" class="cell-td"><input data-row="5" data-col="14" class="cell"></td>
                            <td id="row5-col15" class="cell-td"><input data-row="5" data-col="15" class="cell"></td>
                            <td id="row5-col16" class="cell-td"><input data-row="5" data-col="16" class="cell"></td>
                            <td id="row5-col17" class="cell-td"><input data-row="5" data-col="17" class="cell"></td>
                            <td id="row5-col18" class="cell-td"><input data-row="5" data-col="18" class="cell"></td>
                            <td id="row5-col19" class="cell-td"><input data-row="5" data-col="19" class="cell"></td>
                            <td id="row5-col20" class="cell-td"><input data-row="5" data-col="20" class="cell"></td>
                            <td id="row5-col21" class="cell-td"><input data-row="5" data-col="21" class="cell"></td>
                            <td id="row5-col22" class="cell-td"><input data-row="5" data-col="22" class="cell"></td>
                            <td id="row5-col23" class="cell-td"><input data-row="5" data-col="23" class="cell"></td>
                            <td id="row5-col24" class="cell-td"><input data-row="5" data-col="24" class="cell"></td>
                            <td id="row5-col25" class="cell-td"><input data-row="5" data-col="25" class="cell"></td>
                            <td id="row5-col26" class="cell-td"><input data-row="5" data-col="26" class="cell"></td>
                            <td id="row5-col27" class="cell-td"><input data-row="5" data-col="27" class="cell"></td>
                            <td id="row5-col28" class="cell-td"><input data-row="5" data-col="28" class="cell"></td>
                            <td id="row5-col29" class="cell-td"><input data-row="5" data-col="29" class="cell"></td>
                            <td id="row5-col30" class="cell-td"><input data-row="5" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row6-col1" class="cell-td"><input data-row="6" data-col="1" class="cell"></td>
                            <td id="row6-col2" class="cell-td"><input data-row="6" data-col="2" class="cell"></td>
                            <td id="row6-col3" class="cell-td"><input data-row="6" data-col="3" class="cell"></td>
                            <td id="row6-col4" class="cell-td"><input data-row="6" data-col="4" class="cell"></td>
                            <td id="row6-col5" class="cell-td"><input data-row="6" data-col="5" class="cell"></td>
                            <td id="row6-col6" class="cell-td"><input data-row="6" data-col="6" class="cell"></td>
                            <td id="row6-col7" class="cell-td"><input data-row="6" data-col="7" class="cell"></td>
                            <td id="row6-col8" class="cell-td"><input data-row="6" data-col="8" class="cell"></td>
                            <td id="row6-col9" class="cell-td"><input data-row="6" data-col="9" class="cell"></td>
                            <td id="row6-col10" class="cell-td"><input data-row="6" data-col="10" class="cell"></td>
                            <td id="row6-col11" class="cell-td"><input data-row="6" data-col="11" class="cell"></td>
                            <td id="row6-col12" class="cell-td"><input data-row="6" data-col="12" class="cell"></td>
                            <td id="row6-col13" class="cell-td"><input data-row="6" data-col="13" class="cell"></td>
                            <td id="row6-col14" class="cell-td"><input data-row="6" data-col="14" class="cell"></td>
                            <td id="row6-col15" class="cell-td"><input data-row="6" data-col="15" class="cell"></td>
                            <td id="row6-col16" class="cell-td"><input data-row="6" data-col="16" class="cell"></td>
                            <td id="row6-col17" class="cell-td"><input data-row="6" data-col="17" class="cell"></td>
                            <td id="row6-col18" class="cell-td"><input data-row="6" data-col="18" class="cell"></td>
                            <td id="row6-col19" class="cell-td"><input data-row="6" data-col="19" class="cell"></td>
                            <td id="row6-col20" class="cell-td"><input data-row="6" data-col="20" class="cell"></td>
                            <td id="row6-col21" class="cell-td"><input data-row="6" data-col="21" class="cell"></td>
                            <td id="row6-col22" class="cell-td"><input data-row="6" data-col="22" class="cell"></td>
                            <td id="row6-col23" class="cell-td"><input data-row="6" data-col="23" class="cell"></td>
                            <td id="row6-col24" class="cell-td"><input data-row="6" data-col="24" class="cell"></td>
                            <td id="row6-col25" class="cell-td"><input data-row="6" data-col="25" class="cell"></td>
                            <td id="row6-col26" class="cell-td"><input data-row="6" data-col="26" class="cell"></td>
                            <td id="row6-col27" class="cell-td"><input data-row="6" data-col="27" class="cell"></td>
                            <td id="row6-col28" class="cell-td"><input data-row="6" data-col="28" class="cell"></td>
                            <td id="row6-col29" class="cell-td"><input data-row="6" data-col="29" class="cell"></td>
                            <td id="row6-col30" class="cell-td"><input data-row="6" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row7-col1" class="cell-td"><input data-row="7" data-col="1" class="cell"></td>
                            <td id="row7-col2" class="cell-td"><input data-row="7" data-col="2" class="cell"></td>
                            <td id="row7-col3" class="cell-td"><input data-row="7" data-col="3" class="cell"></td>
                            <td id="row7-col4" class="cell-td"><input data-row="7" data-col="4" class="cell"></td>
                            <td id="row7-col5" class="cell-td"><input data-row="7" data-col="5" class="cell"></td>
                            <td id="row7-col6" class="cell-td"><input data-row="7" data-col="6" class="cell"></td>
                            <td id="row7-col7" class="cell-td"><input data-row="7" data-col="7" class="cell"></td>
                            <td id="row7-col8" class="cell-td"><input data-row="7" data-col="8" class="cell"></td>
                            <td id="row7-col9" class="cell-td"><input data-row="7" data-col="9" class="cell"></td>
                            <td id="row7-col10" class="cell-td"><input data-row="7" data-col="10" class="cell"></td>
                            <td id="row7-col11" class="cell-td"><input data-row="7" data-col="11" class="cell"></td>
                            <td id="row7-col12" class="cell-td"><input data-row="7" data-col="12" class="cell"></td>
                            <td id="row7-col13" class="cell-td"><input data-row="7" data-col="13" class="cell"></td>
                            <td id="row7-col14" class="cell-td"><input data-row="7" data-col="14" class="cell"></td>
                            <td id="row7-col15" class="cell-td"><input data-row="7" data-col="15" class="cell"></td>
                            <td id="row7-col16" class="cell-td"><input data-row="7" data-col="16" class="cell"></td>
                            <td id="row7-col17" class="cell-td"><input data-row="7" data-col="17" class="cell"></td>
                            <td id="row7-col18" class="cell-td"><input data-row="7" data-col="18" class="cell"></td>
                            <td id="row7-col19" class="cell-td"><input data-row="7" data-col="19" class="cell"></td>
                            <td id="row7-col20" class="cell-td"><input data-row="7" data-col="20" class="cell"></td>
                            <td id="row7-col21" class="cell-td"><input data-row="7" data-col="21" class="cell"></td>
                            <td id="row7-col22" class="cell-td"><input data-row="7" data-col="22" class="cell"></td>
                            <td id="row7-col23" class="cell-td"><input data-row="7" data-col="23" class="cell"></td>
                            <td id="row7-col24" class="cell-td"><input data-row="7" data-col="24" class="cell"></td>
                            <td id="row7-col25" class="cell-td"><input data-row="7" data-col="25" class="cell"></td>
                            <td id="row7-col26" class="cell-td"><input data-row="7" data-col="26" class="cell"></td>
                            <td id="row7-col27" class="cell-td"><input data-row="7" data-col="27" class="cell"></td>
                            <td id="row7-col28" class="cell-td"><input data-row="7" data-col="28" class="cell"></td>
                            <td id="row7-col29" class="cell-td"><input data-row="7" data-col="29" class="cell"></td>
                            <td id="row7-col30" class="cell-td"><input data-row="7" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row8-col1" class="cell-td"><input data-row="8" data-col="1" class="cell"></td>
                            <td id="row8-col2" class="cell-td"><input data-row="8" data-col="2" class="cell"></td>
                            <td id="row8-col3" class="cell-td"><input data-row="8" data-col="3" class="cell"></td>
                            <td id="row8-col4" class="cell-td"><input data-row="8" data-col="4" class="cell"></td>
                            <td id="row8-col5" class="cell-td"><input data-row="8" data-col="5" class="cell"></td>
                            <td id="row8-col6" class="cell-td"><input data-row="8" data-col="6" class="cell"></td>
                            <td id="row8-col7" class="cell-td"><input data-row="8" data-col="7" class="cell"></td>
                            <td id="row8-col8" class="cell-td"><input data-row="8" data-col="8" class="cell"></td>
                            <td id="row8-col9" class="cell-td"><input data-row="8" data-col="9" class="cell"></td>
                            <td id="row8-col10" class="cell-td"><input data-row="8" data-col="10" class="cell"></td>
                            <td id="row8-col11" class="cell-td"><input data-row="8" data-col="11" class="cell"></td>
                            <td id="row8-col12" class="cell-td"><input data-row="8" data-col="12" class="cell"></td>
                            <td id="row8-col13" class="cell-td"><input data-row="8" data-col="13" class="cell"></td>
                            <td id="row8-col14" class="cell-td"><input data-row="8" data-col="14" class="cell"></td>
                            <td id="row8-col15" class="cell-td"><input data-row="8" data-col="15" class="cell"></td>
                            <td id="row8-col16" class="cell-td"><input data-row="8" data-col="16" class="cell"></td>
                            <td id="row8-col17" class="cell-td"><input data-row="8" data-col="17" class="cell"></td>
                            <td id="row8-col18" class="cell-td"><input data-row="8" data-col="18" class="cell"></td>
                            <td id="row8-col19" class="cell-td"><input data-row="8" data-col="19" class="cell"></td>
                            <td id="row8-col20" class="cell-td"><input data-row="8" data-col="20" class="cell"></td>
                            <td id="row8-col21" class="cell-td"><input data-row="8" data-col="21" class="cell"></td>
                            <td id="row8-col22" class="cell-td"><input data-row="8" data-col="22" class="cell"></td>
                            <td id="row8-col23" class="cell-td"><input data-row="8" data-col="23" class="cell"></td>
                            <td id="row8-col24" class="cell-td"><input data-row="8" data-col="24" class="cell"></td>
                            <td id="row8-col25" class="cell-td"><input data-row="8" data-col="25" class="cell"></td>
                            <td id="row8-col26" class="cell-td"><input data-row="8" data-col="26" class="cell"></td>
                            <td id="row8-col27" class="cell-td"><input data-row="8" data-col="27" class="cell"></td>
                            <td id="row8-col28" class="cell-td"><input data-row="8" data-col="28" class="cell"></td>
                            <td id="row8-col29" class="cell-td"><input data-row="8" data-col="29" class="cell"></td>
                            <td id="row8-col30" class="cell-td"><input data-row="8" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row9-col1" class="cell-td"><input data-row="9" data-col="1" class="cell"></td>
                            <td id="row9-col2" class="cell-td"><input data-row="9" data-col="2" class="cell"></td>
                            <td id="row9-col3" class="cell-td"><input data-row="9" data-col="3" class="cell"></td>
                            <td id="row9-col4" class="cell-td"><input data-row="9" data-col="4" class="cell"></td>
                            <td id="row9-col5" class="cell-td"><input data-row="9" data-col="5" class="cell"></td>
                            <td id="row9-col6" class="cell-td"><input data-row="9" data-col="6" class="cell"></td>
                            <td id="row9-col7" class="cell-td"><input data-row="9" data-col="7" class="cell"></td>
                            <td id="row9-col8" class="cell-td"><input data-row="9" data-col="8" class="cell"></td>
                            <td id="row9-col9" class="cell-td"><input data-row="9" data-col="9" class="cell"></td>
                            <td id="row9-col10" class="cell-td"><input data-row="9" data-col="10" class="cell"></td>
                            <td id="row9-col11" class="cell-td"><input data-row="9" data-col="11" class="cell"></td>
                            <td id="row9-col12" class="cell-td"><input data-row="9" data-col="12" class="cell"></td>
                            <td id="row9-col13" class="cell-td"><input data-row="9" data-col="13" class="cell"></td>
                            <td id="row9-col14" class="cell-td"><input data-row="9" data-col="14" class="cell"></td>
                            <td id="row9-col15" class="cell-td"><input data-row="9" data-col="15" class="cell"></td>
                            <td id="row9-col16" class="cell-td"><input data-row="9" data-col="16" class="cell"></td>
                            <td id="row9-col17" class="cell-td"><input data-row="9" data-col="17" class="cell"></td>
                            <td id="row9-col18" class="cell-td"><input data-row="9" data-col="18" class="cell"></td>
                            <td id="row9-col19" class="cell-td"><input data-row="9" data-col="19" class="cell"></td>
                            <td id="row9-col20" class="cell-td"><input data-row="9" data-col="20" class="cell"></td>
                            <td id="row9-col21" class="cell-td"><input data-row="9" data-col="21" class="cell"></td>
                            <td id="row9-col22" class="cell-td"><input data-row="9" data-col="22" class="cell"></td>
                            <td id="row9-col23" class="cell-td"><input data-row="9" data-col="23" class="cell"></td>
                            <td id="row9-col24" class="cell-td"><input data-row="9" data-col="24" class="cell"></td>
                            <td id="row9-col25" class="cell-td"><input data-row="9" data-col="25" class="cell"></td>
                            <td id="row9-col26" class="cell-td"><input data-row="9" data-col="26" class="cell"></td>
                            <td id="row9-col27" class="cell-td"><input data-row="9" data-col="27" class="cell"></td>
                            <td id="row9-col28" class="cell-td"><input data-row="9" data-col="28" class="cell"></td>
                            <td id="row9-col29" class="cell-td"><input data-row="9" data-col="29" class="cell"></td>
                            <td id="row9-col30" class="cell-td"><input data-row="9" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row10-col1" class="cell-td"><input data-row="10" data-col="1" class="cell"></td>
                            <td id="row10-col2" class="cell-td"><input data-row="10" data-col="2" class="cell"></td>
                            <td id="row10-col3" class="cell-td"><input data-row="10" data-col="3" class="cell"></td>
                            <td id="row10-col4" class="cell-td"><input data-row="10" data-col="4" class="cell"></td>
                            <td id="row10-col5" class="cell-td"><input data-row="10" data-col="5" class="cell"></td>
                            <td id="row10-col6" class="cell-td"><input data-row="10" data-col="6" class="cell"></td>
                            <td id="row10-col7" class="cell-td"><input data-row="10" data-col="7" class="cell"></td>
                            <td id="row10-col8" class="cell-td"><input data-row="10" data-col="8" class="cell"></td>
                            <td id="row10-col9" class="cell-td"><input data-row="10" data-col="9" class="cell"></td>
                            <td id="row10-col10" class="cell-td"><input data-row="10" data-col="10" class="cell"></td>
                            <td id="row10-col11" class="cell-td"><input data-row="10" data-col="11" class="cell"></td>
                            <td id="row10-col12" class="cell-td"><input data-row="10" data-col="12" class="cell"></td>
                            <td id="row10-col13" class="cell-td"><input data-row="10" data-col="13" class="cell"></td>
                            <td id="row10-col14" class="cell-td"><input data-row="10" data-col="14" class="cell"></td>
                            <td id="row10-col15" class="cell-td"><input data-row="10" data-col="15" class="cell"></td>
                            <td id="row10-col16" class="cell-td"><input data-row="10" data-col="16" class="cell"></td>
                            <td id="row10-col17" class="cell-td"><input data-row="10" data-col="17" class="cell"></td>
                            <td id="row10-col18" class="cell-td"><input data-row="10" data-col="18" class="cell"></td>
                            <td id="row10-col19" class="cell-td"><input data-row="10" data-col="19" class="cell"></td>
                            <td id="row10-col20" class="cell-td"><input data-row="10" data-col="20" class="cell"></td>
                            <td id="row10-col21" class="cell-td"><input data-row="10" data-col="21" class="cell"></td>
                            <td id="row10-col22" class="cell-td"><input data-row="10" data-col="22" class="cell"></td>
                            <td id="row10-col23" class="cell-td"><input data-row="10" data-col="23" class="cell"></td>
                            <td id="row10-col24" class="cell-td"><input data-row="10" data-col="24" class="cell"></td>
                            <td id="row10-col25" class="cell-td"><input data-row="10" data-col="25" class="cell"></td>
                            <td id="row10-col26" class="cell-td"><input data-row="10" data-col="26" class="cell"></td>
                            <td id="row10-col27" class="cell-td"><input data-row="10" data-col="27" class="cell"></td>
                            <td id="row10-col28" class="cell-td"><input data-row="10" data-col="28" class="cell"></td>
                            <td id="row10-col29" class="cell-td"><input data-row="10" data-col="29" class="cell"></td>
                            <td id="row10-col30" class="cell-td"><input data-row="10" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row11-col1" class="cell-td"><input data-row="11" data-col="1" class="cell"></td>
                            <td id="row11-col2" class="cell-td"><input data-row="11" data-col="2" class="cell"></td>
                            <td id="row11-col3" class="cell-td"><input data-row="11" data-col="3" class="cell"></td>
                            <td id="row11-col4" class="cell-td"><input data-row="11" data-col="4" class="cell"></td>
                            <td id="row11-col5" class="cell-td"><input data-row="11" data-col="5" class="cell"></td>
                            <td id="row11-col6" class="cell-td"><input data-row="11" data-col="6" class="cell"></td>
                            <td id="row11-col7" class="cell-td"><input data-row="11" data-col="7" class="cell"></td>
                            <td id="row11-col8" class="cell-td"><input data-row="11" data-col="8" class="cell"></td>
                            <td id="row11-col9" class="cell-td"><input data-row="11" data-col="9" class="cell"></td>
                            <td id="row11-col10" class="cell-td"><input data-row="11" data-col="10" class="cell"></td>
                            <td id="row11-col11" class="cell-td"><input data-row="11" data-col="11" class="cell"></td>
                            <td id="row11-col12" class="cell-td"><input data-row="11" data-col="12" class="cell"></td>
                            <td id="row11-col13" class="cell-td"><input data-row="11" data-col="13" class="cell"></td>
                            <td id="row11-col14" class="cell-td"><input data-row="11" data-col="14" class="cell"></td>
                            <td id="row11-col15" class="cell-td"><input data-row="11" data-col="15" class="cell"></td>
                            <td id="row11-col16" class="cell-td"><input data-row="11" data-col="16" class="cell"></td>
                            <td id="row11-col17" class="cell-td"><input data-row="11" data-col="17" class="cell"></td>
                            <td id="row11-col18" class="cell-td"><input data-row="11" data-col="18" class="cell"></td>
                            <td id="row11-col19" class="cell-td"><input data-row="11" data-col="19" class="cell"></td>
                            <td id="row11-col20" class="cell-td"><input data-row="11" data-col="20" class="cell"></td>
                            <td id="row11-col21" class="cell-td"><input data-row="11" data-col="21" class="cell"></td>
                            <td id="row11-col22" class="cell-td"><input data-row="11" data-col="22" class="cell"></td>
                            <td id="row11-col23" class="cell-td"><input data-row="11" data-col="23" class="cell"></td>
                            <td id="row11-col24" class="cell-td"><input data-row="11" data-col="24" class="cell"></td>
                            <td id="row11-col25" class="cell-td"><input data-row="11" data-col="25" class="cell"></td>
                            <td id="row11-col26" class="cell-td"><input data-row="11" data-col="26" class="cell"></td>
                            <td id="row11-col27" class="cell-td"><input data-row="11" data-col="27" class="cell"></td>
                            <td id="row11-col28" class="cell-td"><input data-row="11" data-col="28" class="cell"></td>
                            <td id="row11-col29" class="cell-td"><input data-row="11" data-col="29" class="cell"></td>
                            <td id="row11-col30" class="cell-td"><input data-row="11" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row12-col1" class="cell-td"><input data-row="12" data-col="1" class="cell"></td>
                            <td id="row12-col2" class="cell-td"><input data-row="12" data-col="2" class="cell"></td>
                            <td id="row12-col3" class="cell-td"><input data-row="12" data-col="3" class="cell"></td>
                            <td id="row12-col4" class="cell-td"><input data-row="12" data-col="4" class="cell"></td>
                            <td id="row12-col5" class="cell-td"><input data-row="12" data-col="5" class="cell"></td>
                            <td id="row12-col6" class="cell-td"><input data-row="12" data-col="6" class="cell"></td>
                            <td id="row12-col7" class="cell-td"><input data-row="12" data-col="7" class="cell"></td>
                            <td id="row12-col8" class="cell-td"><input data-row="12" data-col="8" class="cell"></td>
                            <td id="row12-col9" class="cell-td"><input data-row="12" data-col="9" class="cell"></td>
                            <td id="row12-col10" class="cell-td"><input data-row="12" data-col="10" class="cell"></td>
                            <td id="row12-col11" class="cell-td"><input data-row="12" data-col="11" class="cell"></td>
                            <td id="row12-col12" class="cell-td"><input data-row="12" data-col="12" class="cell"></td>
                            <td id="row12-col13" class="cell-td"><input data-row="12" data-col="13" class="cell"></td>
                            <td id="row12-col14" class="cell-td"><input data-row="12" data-col="14" class="cell"></td>
                            <td id="row12-col15" class="cell-td"><input data-row="12" data-col="15" class="cell"></td>
                            <td id="row12-col16" class="cell-td"><input data-row="12" data-col="16" class="cell"></td>
                            <td id="row12-col17" class="cell-td"><input data-row="12" data-col="17" class="cell"></td>
                            <td id="row12-col18" class="cell-td"><input data-row="12" data-col="18" class="cell"></td>
                            <td id="row12-col19" class="cell-td"><input data-row="12" data-col="19" class="cell"></td>
                            <td id="row12-col20" class="cell-td"><input data-row="12" data-col="20" class="cell"></td>
                            <td id="row12-col21" class="cell-td"><input data-row="12" data-col="21" class="cell"></td>
                            <td id="row12-col22" class="cell-td"><input data-row="12" data-col="22" class="cell"></td>
                            <td id="row12-col23" class="cell-td"><input data-row="12" data-col="23" class="cell"></td>
                            <td id="row12-col24" class="cell-td"><input data-row="12" data-col="24" class="cell"></td>
                            <td id="row12-col25" class="cell-td"><input data-row="12" data-col="25" class="cell"></td>
                            <td id="row12-col26" class="cell-td"><input data-row="12" data-col="26" class="cell"></td>
                            <td id="row12-col27" class="cell-td"><input data-row="12" data-col="27" class="cell"></td>
                            <td id="row12-col28" class="cell-td"><input data-row="12" data-col="28" class="cell"></td>
                            <td id="row12-col29" class="cell-td"><input data-row="12" data-col="29" class="cell"></td>
                            <td id="row12-col30" class="cell-td"><input data-row="12" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row13-col1" class="cell-td"><input data-row="13" data-col="1" class="cell"></td>
                            <td id="row13-col2" class="cell-td"><input data-row="13" data-col="2" class="cell"></td>
                            <td id="row13-col3" class="cell-td"><input data-row="13" data-col="3" class="cell"></td>
                            <td id="row13-col4" class="cell-td"><input data-row="13" data-col="4" class="cell"></td>
                            <td id="row13-col5" class="cell-td"><input data-row="13" data-col="5" class="cell"></td>
                            <td id="row13-col6" class="cell-td"><input data-row="13" data-col="6" class="cell"></td>
                            <td id="row13-col7" class="cell-td"><input data-row="13" data-col="7" class="cell"></td>
                            <td id="row13-col8" class="cell-td"><input data-row="13" data-col="8" class="cell"></td>
                            <td id="row13-col9" class="cell-td"><input data-row="13" data-col="9" class="cell"></td>
                            <td id="row13-col10" class="cell-td"><input data-row="13" data-col="10" class="cell"></td>
                            <td id="row13-col11" class="cell-td"><input data-row="13" data-col="11" class="cell"></td>
                            <td id="row13-col12" class="cell-td"><input data-row="13" data-col="12" class="cell"></td>
                            <td id="row13-col13" class="cell-td"><input data-row="13" data-col="13" class="cell"></td>
                            <td id="row13-col14" class="cell-td"><input data-row="13" data-col="14" class="cell"></td>
                            <td id="row13-col15" class="cell-td"><input data-row="13" data-col="15" class="cell"></td>
                            <td id="row13-col16" class="cell-td"><input data-row="13" data-col="16" class="cell"></td>
                            <td id="row13-col17" class="cell-td"><input data-row="13" data-col="17" class="cell"></td>
                            <td id="row13-col18" class="cell-td"><input data-row="13" data-col="18" class="cell"></td>
                            <td id="row13-col19" class="cell-td"><input data-row="13" data-col="19" class="cell"></td>
                            <td id="row13-col20" class="cell-td"><input data-row="13" data-col="20" class="cell"></td>
                            <td id="row13-col21" class="cell-td"><input data-row="13" data-col="21" class="cell"></td>
                            <td id="row13-col22" class="cell-td"><input data-row="13" data-col="22" class="cell"></td>
                            <td id="row13-col23" class="cell-td"><input data-row="13" data-col="23" class="cell"></td>
                            <td id="row13-col24" class="cell-td"><input data-row="13" data-col="24" class="cell"></td>
                            <td id="row13-col25" class="cell-td"><input data-row="13" data-col="25" class="cell"></td>
                            <td id="row13-col26" class="cell-td"><input data-row="13" data-col="26" class="cell"></td>
                            <td id="row13-col27" class="cell-td"><input data-row="13" data-col="27" class="cell"></td>
                            <td id="row13-col28" class="cell-td"><input data-row="13" data-col="28" class="cell"></td>
                            <td id="row13-col29" class="cell-td"><input data-row="13" data-col="29" class="cell"></td>
                            <td id="row13-col30" class="cell-td"><input data-row="13" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row14-col1" class="cell-td"><input data-row="14" data-col="1" class="cell"></td>
                            <td id="row14-col2" class="cell-td"><input data-row="14" data-col="2" class="cell"></td>
                            <td id="row14-col3" class="cell-td"><input data-row="14" data-col="3" class="cell"></td>
                            <td id="row14-col4" class="cell-td"><input data-row="14" data-col="4" class="cell"></td>
                            <td id="row14-col5" class="cell-td"><input data-row="14" data-col="5" class="cell"></td>
                            <td id="row14-col6" class="cell-td"><input data-row="14" data-col="6" class="cell"></td>
                            <td id="row14-col7" class="cell-td"><input data-row="14" data-col="7" class="cell"></td>
                            <td id="row14-col8" class="cell-td"><input data-row="14" data-col="8" class="cell"></td>
                            <td id="row14-col9" class="cell-td"><input data-row="14" data-col="9" class="cell"></td>
                            <td id="row14-col10" class="cell-td"><input data-row="14" data-col="10" class="cell"></td>
                            <td id="row14-col11" class="cell-td"><input data-row="14" data-col="11" class="cell"></td>
                            <td id="row14-col12" class="cell-td"><input data-row="14" data-col="12" class="cell"></td>
                            <td id="row14-col13" class="cell-td"><input data-row="14" data-col="13" class="cell"></td>
                            <td id="row14-col14" class="cell-td"><input data-row="14" data-col="14" class="cell"></td>
                            <td id="row14-col15" class="cell-td"><input data-row="14" data-col="15" class="cell"></td>
                            <td id="row14-col16" class="cell-td"><input data-row="14" data-col="16" class="cell"></td>
                            <td id="row14-col17" class="cell-td"><input data-row="14" data-col="17" class="cell"></td>
                            <td id="row14-col18" class="cell-td"><input data-row="14" data-col="18" class="cell"></td>
                            <td id="row14-col19" class="cell-td"><input data-row="14" data-col="19" class="cell"></td>
                            <td id="row14-col20" class="cell-td"><input data-row="14" data-col="20" class="cell"></td>
                            <td id="row14-col21" class="cell-td"><input data-row="14" data-col="21" class="cell"></td>
                            <td id="row14-col22" class="cell-td"><input data-row="14" data-col="22" class="cell"></td>
                            <td id="row14-col23" class="cell-td"><input data-row="14" data-col="23" class="cell"></td>
                            <td id="row14-col24" class="cell-td"><input data-row="14" data-col="24" class="cell"></td>
                            <td id="row14-col25" class="cell-td"><input data-row="14" data-col="25" class="cell"></td>
                            <td id="row14-col26" class="cell-td"><input data-row="14" data-col="26" class="cell"></td>
                            <td id="row14-col27" class="cell-td"><input data-row="14" data-col="27" class="cell"></td>
                            <td id="row14-col28" class="cell-td"><input data-row="14" data-col="28" class="cell"></td>
                            <td id="row14-col29" class="cell-td"><input data-row="14" data-col="29" class="cell"></td>
                            <td id="row14-col30" class="cell-td"><input data-row="14" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row15-col1" class="cell-td"><input data-row="15" data-col="1" class="cell"></td>
                            <td id="row15-col2" class="cell-td"><input data-row="15" data-col="2" class="cell"></td>
                            <td id="row15-col3" class="cell-td"><input data-row="15" data-col="3" class="cell"></td>
                            <td id="row15-col4" class="cell-td"><input data-row="15" data-col="4" class="cell"></td>
                            <td id="row15-col5" class="cell-td"><input data-row="15" data-col="5" class="cell"></td>
                            <td id="row15-col6" class="cell-td"><input data-row="15" data-col="6" class="cell"></td>
                            <td id="row15-col7" class="cell-td"><input data-row="15" data-col="7" class="cell"></td>
                            <td id="row15-col8" class="cell-td"><input data-row="15" data-col="8" class="cell"></td>
                            <td id="row15-col9" class="cell-td"><input data-row="15" data-col="9" class="cell"></td>
                            <td id="row15-col10" class="cell-td"><input data-row="15" data-col="10" class="cell"></td>
                            <td id="row15-col11" class="cell-td"><input data-row="15" data-col="11" class="cell"></td>
                            <td id="row15-col12" class="cell-td"><input data-row="15" data-col="12" class="cell"></td>
                            <td id="row15-col13" class="cell-td"><input data-row="15" data-col="13" class="cell"></td>
                            <td id="row15-col14" class="cell-td"><input data-row="15" data-col="14" class="cell"></td>
                            <td id="row15-col15" class="cell-td"><input data-row="15" data-col="15" class="cell"></td>
                            <td id="row15-col16" class="cell-td"><input data-row="15" data-col="16" class="cell"></td>
                            <td id="row15-col17" class="cell-td"><input data-row="15" data-col="17" class="cell"></td>
                            <td id="row15-col18" class="cell-td"><input data-row="15" data-col="18" class="cell"></td>
                            <td id="row15-col19" class="cell-td"><input data-row="15" data-col="19" class="cell"></td>
                            <td id="row15-col20" class="cell-td"><input data-row="15" data-col="20" class="cell"></td>
                            <td id="row15-col21" class="cell-td"><input data-row="15" data-col="21" class="cell"></td>
                            <td id="row15-col22" class="cell-td"><input data-row="15" data-col="22" class="cell"></td>
                            <td id="row15-col23" class="cell-td"><input data-row="15" data-col="23" class="cell"></td>
                            <td id="row15-col24" class="cell-td"><input data-row="15" data-col="24" class="cell"></td>
                            <td id="row15-col25" class="cell-td"><input data-row="15" data-col="25" class="cell"></td>
                            <td id="row15-col26" class="cell-td"><input data-row="15" data-col="26" class="cell"></td>
                            <td id="row15-col27" class="cell-td"><input data-row="15" data-col="27" class="cell"></td>
                            <td id="row15-col28" class="cell-td"><input data-row="15" data-col="28" class="cell"></td>
                            <td id="row15-col29" class="cell-td"><input data-row="15" data-col="29" class="cell"></td>
                            <td id="row15-col30" class="cell-td"><input data-row="15" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row16-col1" class="cell-td"><input data-row="16" data-col="1" class="cell"></td>
                            <td id="row16-col2" class="cell-td"><input data-row="16" data-col="2" class="cell"></td>
                            <td id="row16-col3" class="cell-td"><input data-row="16" data-col="3" class="cell"></td>
                            <td id="row16-col4" class="cell-td"><input data-row="16" data-col="4" class="cell"></td>
                            <td id="row16-col5" class="cell-td"><input data-row="16" data-col="5" class="cell"></td>
                            <td id="row16-col6" class="cell-td"><input data-row="16" data-col="6" class="cell"></td>
                            <td id="row16-col7" class="cell-td"><input data-row="16" data-col="7" class="cell"></td>
                            <td id="row16-col8" class="cell-td"><input data-row="16" data-col="8" class="cell"></td>
                            <td id="row16-col9" class="cell-td"><input data-row="16" data-col="9" class="cell"></td>
                            <td id="row16-col10" class="cell-td"><input data-row="16" data-col="10" class="cell"></td>
                            <td id="row16-col11" class="cell-td"><input data-row="16" data-col="11" class="cell"></td>
                            <td id="row16-col12" class="cell-td"><input data-row="16" data-col="12" class="cell"></td>
                            <td id="row16-col13" class="cell-td"><input data-row="16" data-col="13" class="cell"></td>
                            <td id="row16-col14" class="cell-td"><input data-row="16" data-col="14" class="cell"></td>
                            <td id="row16-col15" class="cell-td"><input data-row="16" data-col="15" class="cell"></td>
                            <td id="row16-col16" class="cell-td"><input data-row="16" data-col="16" class="cell"></td>
                            <td id="row16-col17" class="cell-td"><input data-row="16" data-col="17" class="cell"></td>
                            <td id="row16-col18" class="cell-td"><input data-row="16" data-col="18" class="cell"></td>
                            <td id="row16-col19" class="cell-td"><input data-row="16" data-col="19" class="cell"></td>
                            <td id="row16-col20" class="cell-td"><input data-row="16" data-col="20" class="cell"></td>
                            <td id="row16-col21" class="cell-td"><input data-row="16" data-col="21" class="cell"></td>
                            <td id="row16-col22" class="cell-td"><input data-row="16" data-col="22" class="cell"></td>
                            <td id="row16-col23" class="cell-td"><input data-row="16" data-col="23" class="cell"></td>
                            <td id="row16-col24" class="cell-td"><input data-row="16" data-col="24" class="cell"></td>
                            <td id="row16-col25" class="cell-td"><input data-row="16" data-col="25" class="cell"></td>
                            <td id="row16-col26" class="cell-td"><input data-row="16" data-col="26" class="cell"></td>
                            <td id="row16-col27" class="cell-td"><input data-row="16" data-col="27" class="cell"></td>
                            <td id="row16-col28" class="cell-td"><input data-row="16" data-col="28" class="cell"></td>
                            <td id="row16-col29" class="cell-td"><input data-row="16" data-col="29" class="cell"></td>
                            <td id="row16-col30" class="cell-td"><input data-row="16" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row17-col1" class="cell-td"><input data-row="17" data-col="1" class="cell"></td>
                            <td id="row17-col2" class="cell-td"><input data-row="17" data-col="2" class="cell"></td>
                            <td id="row17-col3" class="cell-td"><input data-row="17" data-col="3" class="cell"></td>
                            <td id="row17-col4" class="cell-td"><input data-row="17" data-col="4" class="cell"></td>
                            <td id="row17-col5" class="cell-td"><input data-row="17" data-col="5" class="cell"></td>
                            <td id="row17-col6" class="cell-td"><input data-row="17" data-col="6" class="cell"></td>
                            <td id="row17-col7" class="cell-td"><input data-row="17" data-col="7" class="cell"></td>
                            <td id="row17-col8" class="cell-td"><input data-row="17" data-col="8" class="cell"></td>
                            <td id="row17-col9" class="cell-td"><input data-row="17" data-col="9" class="cell"></td>
                            <td id="row17-col10" class="cell-td"><input data-row="17" data-col="10" class="cell"></td>
                            <td id="row17-col11" class="cell-td"><input data-row="17" data-col="11" class="cell"></td>
                            <td id="row17-col12" class="cell-td"><input data-row="17" data-col="12" class="cell"></td>
                            <td id="row17-col13" class="cell-td"><input data-row="17" data-col="13" class="cell"></td>
                            <td id="row17-col14" class="cell-td"><input data-row="17" data-col="14" class="cell"></td>
                            <td id="row17-col15" class="cell-td"><input data-row="17" data-col="15" class="cell"></td>
                            <td id="row17-col16" class="cell-td"><input data-row="17" data-col="16" class="cell"></td>
                            <td id="row17-col17" class="cell-td"><input data-row="17" data-col="17" class="cell"></td>
                            <td id="row17-col18" class="cell-td"><input data-row="17" data-col="18" class="cell"></td>
                            <td id="row17-col19" class="cell-td"><input data-row="17" data-col="19" class="cell"></td>
                            <td id="row17-col20" class="cell-td"><input data-row="17" data-col="20" class="cell"></td>
                            <td id="row17-col21" class="cell-td"><input data-row="17" data-col="21" class="cell"></td>
                            <td id="row17-col22" class="cell-td"><input data-row="17" data-col="22" class="cell"></td>
                            <td id="row17-col23" class="cell-td"><input data-row="17" data-col="23" class="cell"></td>
                            <td id="row17-col24" class="cell-td"><input data-row="17" data-col="24" class="cell"></td>
                            <td id="row17-col25" class="cell-td"><input data-row="17" data-col="25" class="cell"></td>
                            <td id="row17-col26" class="cell-td"><input data-row="17" data-col="26" class="cell"></td>
                            <td id="row17-col27" class="cell-td"><input data-row="17" data-col="27" class="cell"></td>
                            <td id="row17-col28" class="cell-td"><input data-row="17" data-col="28" class="cell"></td>
                            <td id="row17-col29" class="cell-td"><input data-row="17" data-col="29" class="cell"></td>
                            <td id="row17-col30" class="cell-td"><input data-row="17" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row18-col1" class="cell-td"><input data-row="18" data-col="1" class="cell"></td>
                            <td id="row18-col2" class="cell-td"><input data-row="18" data-col="2" class="cell"></td>
                            <td id="row18-col3" class="cell-td"><input data-row="18" data-col="3" class="cell"></td>
                            <td id="row18-col4" class="cell-td"><input data-row="18" data-col="4" class="cell"></td>
                            <td id="row18-col5" class="cell-td"><input data-row="18" data-col="5" class="cell"></td>
                            <td id="row18-col6" class="cell-td"><input data-row="18" data-col="6" class="cell"></td>
                            <td id="row18-col7" class="cell-td"><input data-row="18" data-col="7" class="cell"></td>
                            <td id="row18-col8" class="cell-td"><input data-row="18" data-col="8" class="cell"></td>
                            <td id="row18-col9" class="cell-td"><input data-row="18" data-col="9" class="cell"></td>
                            <td id="row18-col10" class="cell-td"><input data-row="18" data-col="10" class="cell"></td>
                            <td id="row18-col11" class="cell-td"><input data-row="18" data-col="11" class="cell"></td>
                            <td id="row18-col12" class="cell-td"><input data-row="18" data-col="12" class="cell"></td>
                            <td id="row18-col13" class="cell-td"><input data-row="18" data-col="13" class="cell"></td>
                            <td id="row18-col14" class="cell-td"><input data-row="18" data-col="14" class="cell"></td>
                            <td id="row18-col15" class="cell-td"><input data-row="18" data-col="15" class="cell"></td>
                            <td id="row18-col16" class="cell-td"><input data-row="18" data-col="16" class="cell"></td>
                            <td id="row18-col17" class="cell-td"><input data-row="18" data-col="17" class="cell"></td>
                            <td id="row18-col18" class="cell-td"><input data-row="18" data-col="18" class="cell"></td>
                            <td id="row18-col19" class="cell-td"><input data-row="18" data-col="19" class="cell"></td>
                            <td id="row18-col20" class="cell-td"><input data-row="18" data-col="20" class="cell"></td>
                            <td id="row18-col21" class="cell-td"><input data-row="18" data-col="21" class="cell"></td>
                            <td id="row18-col22" class="cell-td"><input data-row="18" data-col="22" class="cell"></td>
                            <td id="row18-col23" class="cell-td"><input data-row="18" data-col="23" class="cell"></td>
                            <td id="row18-col24" class="cell-td"><input data-row="18" data-col="24" class="cell"></td>
                            <td id="row18-col25" class="cell-td"><input data-row="18" data-col="25" class="cell"></td>
                            <td id="row18-col26" class="cell-td"><input data-row="18" data-col="26" class="cell"></td>
                            <td id="row18-col27" class="cell-td"><input data-row="18" data-col="27" class="cell"></td>
                            <td id="row18-col28" class="cell-td"><input data-row="18" data-col="28" class="cell"></td>
                            <td id="row18-col29" class="cell-td"><input data-row="18" data-col="29" class="cell"></td>
                            <td id="row18-col30" class="cell-td"><input data-row="18" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row19-col1" class="cell-td"><input data-row="19" data-col="1" class="cell"></td>
                            <td id="row19-col2" class="cell-td"><input data-row="19" data-col="2" class="cell"></td>
                            <td id="row19-col3" class="cell-td"><input data-row="19" data-col="3" class="cell"></td>
                            <td id="row19-col4" class="cell-td"><input data-row="19" data-col="4" class="cell"></td>
                            <td id="row19-col5" class="cell-td"><input data-row="19" data-col="5" class="cell"></td>
                            <td id="row19-col6" class="cell-td"><input data-row="19" data-col="6" class="cell"></td>
                            <td id="row19-col7" class="cell-td"><input data-row="19" data-col="7" class="cell"></td>
                            <td id="row19-col8" class="cell-td"><input data-row="19" data-col="8" class="cell"></td>
                            <td id="row19-col9" class="cell-td"><input data-row="19" data-col="9" class="cell"></td>
                            <td id="row19-col10" class="cell-td"><input data-row="19" data-col="10" class="cell"></td>
                            <td id="row19-col11" class="cell-td"><input data-row="19" data-col="11" class="cell"></td>
                            <td id="row19-col12" class="cell-td"><input data-row="19" data-col="12" class="cell"></td>
                            <td id="row19-col13" class="cell-td"><input data-row="19" data-col="13" class="cell"></td>
                            <td id="row19-col14" class="cell-td"><input data-row="19" data-col="14" class="cell"></td>
                            <td id="row19-col15" class="cell-td"><input data-row="19" data-col="15" class="cell"></td>
                            <td id="row19-col16" class="cell-td"><input data-row="19" data-col="16" class="cell"></td>
                            <td id="row19-col17" class="cell-td"><input data-row="19" data-col="17" class="cell"></td>
                            <td id="row19-col18" class="cell-td"><input data-row="19" data-col="18" class="cell"></td>
                            <td id="row19-col19" class="cell-td"><input data-row="19" data-col="19" class="cell"></td>
                            <td id="row19-col20" class="cell-td"><input data-row="19" data-col="20" class="cell"></td>
                            <td id="row19-col21" class="cell-td"><input data-row="19" data-col="21" class="cell"></td>
                            <td id="row19-col22" class="cell-td"><input data-row="19" data-col="22" class="cell"></td>
                            <td id="row19-col23" class="cell-td"><input data-row="19" data-col="23" class="cell"></td>
                            <td id="row19-col24" class="cell-td"><input data-row="19" data-col="24" class="cell"></td>
                            <td id="row19-col25" class="cell-td"><input data-row="19" data-col="25" class="cell"></td>
                            <td id="row19-col26" class="cell-td"><input data-row="19" data-col="26" class="cell"></td>
                            <td id="row19-col27" class="cell-td"><input data-row="19" data-col="27" class="cell"></td>
                            <td id="row19-col28" class="cell-td"><input data-row="19" data-col="28" class="cell"></td>
                            <td id="row19-col29" class="cell-td"><input data-row="19" data-col="29" class="cell"></td>
                            <td id="row19-col30" class="cell-td"><input data-row="19" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row20-col1" class="cell-td"><input data-row="20" data-col="1" class="cell"></td>
                            <td id="row20-col2" class="cell-td"><input data-row="20" data-col="2" class="cell"></td>
                            <td id="row20-col3" class="cell-td"><input data-row="20" data-col="3" class="cell"></td>
                            <td id="row20-col4" class="cell-td"><input data-row="20" data-col="4" class="cell"></td>
                            <td id="row20-col5" class="cell-td"><input data-row="20" data-col="5" class="cell"></td>
                            <td id="row20-col6" class="cell-td"><input data-row="20" data-col="6" class="cell"></td>
                            <td id="row20-col7" class="cell-td"><input data-row="20" data-col="7" class="cell"></td>
                            <td id="row20-col8" class="cell-td"><input data-row="20" data-col="8" class="cell"></td>
                            <td id="row20-col9" class="cell-td"><input data-row="20" data-col="9" class="cell"></td>
                            <td id="row20-col10" class="cell-td"><input data-row="20" data-col="10" class="cell"></td>
                            <td id="row20-col11" class="cell-td"><input data-row="20" data-col="11" class="cell"></td>
                            <td id="row20-col12" class="cell-td"><input data-row="20" data-col="12" class="cell"></td>
                            <td id="row20-col13" class="cell-td"><input data-row="20" data-col="13" class="cell"></td>
                            <td id="row20-col14" class="cell-td"><input data-row="20" data-col="14" class="cell"></td>
                            <td id="row20-col15" class="cell-td"><input data-row="20" data-col="15" class="cell"></td>
                            <td id="row20-col16" class="cell-td"><input data-row="20" data-col="16" class="cell"></td>
                            <td id="row20-col17" class="cell-td"><input data-row="20" data-col="17" class="cell"></td>
                            <td id="row20-col18" class="cell-td"><input data-row="20" data-col="18" class="cell"></td>
                            <td id="row20-col19" class="cell-td"><input data-row="20" data-col="19" class="cell"></td>
                            <td id="row20-col20" class="cell-td"><input data-row="20" data-col="20" class="cell"></td>
                            <td id="row20-col21" class="cell-td"><input data-row="20" data-col="21" class="cell"></td>
                            <td id="row20-col22" class="cell-td"><input data-row="20" data-col="22" class="cell"></td>
                            <td id="row20-col23" class="cell-td"><input data-row="20" data-col="23" class="cell"></td>
                            <td id="row20-col24" class="cell-td"><input data-row="20" data-col="24" class="cell"></td>
                            <td id="row20-col25" class="cell-td"><input data-row="20" data-col="25" class="cell"></td>
                            <td id="row20-col26" class="cell-td"><input data-row="20" data-col="26" class="cell"></td>
                            <td id="row20-col27" class="cell-td"><input data-row="20" data-col="27" class="cell"></td>
                            <td id="row20-col28" class="cell-td"><input data-row="20" data-col="28" class="cell"></td>
                            <td id="row20-col29" class="cell-td"><input data-row="20" data-col="29" class="cell"></td>
                            <td id="row20-col30" class="cell-td"><input data-row="20" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row21-col1" class="cell-td"><input data-row="21" data-col="1" class="cell"></td>
                            <td id="row21-col2" class="cell-td"><input data-row="21" data-col="2" class="cell"></td>
                            <td id="row21-col3" class="cell-td"><input data-row="21" data-col="3" class="cell"></td>
                            <td id="row21-col4" class="cell-td"><input data-row="21" data-col="4" class="cell"></td>
                            <td id="row21-col5" class="cell-td"><input data-row="21" data-col="5" class="cell"></td>
                            <td id="row21-col6" class="cell-td"><input data-row="21" data-col="6" class="cell"></td>
                            <td id="row21-col7" class="cell-td"><input data-row="21" data-col="7" class="cell"></td>
                            <td id="row21-col8" class="cell-td"><input data-row="21" data-col="8" class="cell"></td>
                            <td id="row21-col9" class="cell-td"><input data-row="21" data-col="9" class="cell"></td>
                            <td id="row21-col10" class="cell-td"><input data-row="21" data-col="10" class="cell"></td>
                            <td id="row21-col11" class="cell-td"><input data-row="21" data-col="11" class="cell"></td>
                            <td id="row21-col12" class="cell-td"><input data-row="21" data-col="12" class="cell"></td>
                            <td id="row21-col13" class="cell-td"><input data-row="21" data-col="13" class="cell"></td>
                            <td id="row21-col14" class="cell-td"><input data-row="21" data-col="14" class="cell"></td>
                            <td id="row21-col15" class="cell-td"><input data-row="21" data-col="15" class="cell"></td>
                            <td id="row21-col16" class="cell-td"><input data-row="21" data-col="16" class="cell"></td>
                            <td id="row21-col17" class="cell-td"><input data-row="21" data-col="17" class="cell"></td>
                            <td id="row21-col18" class="cell-td"><input data-row="21" data-col="18" class="cell"></td>
                            <td id="row21-col19" class="cell-td"><input data-row="21" data-col="19" class="cell"></td>
                            <td id="row21-col20" class="cell-td"><input data-row="21" data-col="20" class="cell"></td>
                            <td id="row21-col21" class="cell-td"><input data-row="21" data-col="21" class="cell"></td>
                            <td id="row21-col22" class="cell-td"><input data-row="21" data-col="22" class="cell"></td>
                            <td id="row21-col23" class="cell-td"><input data-row="21" data-col="23" class="cell"></td>
                            <td id="row21-col24" class="cell-td"><input data-row="21" data-col="24" class="cell"></td>
                            <td id="row21-col25" class="cell-td"><input data-row="21" data-col="25" class="cell"></td>
                            <td id="row21-col26" class="cell-td"><input data-row="21" data-col="26" class="cell"></td>
                            <td id="row21-col27" class="cell-td"><input data-row="21" data-col="27" class="cell"></td>
                            <td id="row21-col28" class="cell-td"><input data-row="21" data-col="28" class="cell"></td>
                            <td id="row21-col29" class="cell-td"><input data-row="21" data-col="29" class="cell"></td>
                            <td id="row21-col30" class="cell-td"><input data-row="21" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row22-col1" class="cell-td"><input data-row="22" data-col="1" class="cell"></td>
                            <td id="row22-col2" class="cell-td"><input data-row="22" data-col="2" class="cell"></td>
                            <td id="row22-col3" class="cell-td"><input data-row="22" data-col="3" class="cell"></td>
                            <td id="row22-col4" class="cell-td"><input data-row="22" data-col="4" class="cell"></td>
                            <td id="row22-col5" class="cell-td"><input data-row="22" data-col="5" class="cell"></td>
                            <td id="row22-col6" class="cell-td"><input data-row="22" data-col="6" class="cell"></td>
                            <td id="row22-col7" class="cell-td"><input data-row="22" data-col="7" class="cell"></td>
                            <td id="row22-col8" class="cell-td"><input data-row="22" data-col="8" class="cell"></td>
                            <td id="row22-col9" class="cell-td"><input data-row="22" data-col="9" class="cell"></td>
                            <td id="row22-col10" class="cell-td"><input data-row="22" data-col="10" class="cell"></td>
                            <td id="row22-col11" class="cell-td"><input data-row="22" data-col="11" class="cell"></td>
                            <td id="row22-col12" class="cell-td"><input data-row="22" data-col="12" class="cell"></td>
                            <td id="row22-col13" class="cell-td"><input data-row="22" data-col="13" class="cell"></td>
                            <td id="row22-col14" class="cell-td"><input data-row="22" data-col="14" class="cell"></td>
                            <td id="row22-col15" class="cell-td"><input data-row="22" data-col="15" class="cell"></td>
                            <td id="row22-col16" class="cell-td"><input data-row="22" data-col="16" class="cell"></td>
                            <td id="row22-col17" class="cell-td"><input data-row="22" data-col="17" class="cell"></td>
                            <td id="row22-col18" class="cell-td"><input data-row="22" data-col="18" class="cell"></td>
                            <td id="row22-col19" class="cell-td"><input data-row="22" data-col="19" class="cell"></td>
                            <td id="row22-col20" class="cell-td"><input data-row="22" data-col="20" class="cell"></td>
                            <td id="row22-col21" class="cell-td"><input data-row="22" data-col="21" class="cell"></td>
                            <td id="row22-col22" class="cell-td"><input data-row="22" data-col="22" class="cell"></td>
                            <td id="row22-col23" class="cell-td"><input data-row="22" data-col="23" class="cell"></td>
                            <td id="row22-col24" class="cell-td"><input data-row="22" data-col="24" class="cell"></td>
                            <td id="row22-col25" class="cell-td"><input data-row="22" data-col="25" class="cell"></td>
                            <td id="row22-col26" class="cell-td"><input data-row="22" data-col="26" class="cell"></td>
                            <td id="row22-col27" class="cell-td"><input data-row="22" data-col="27" class="cell"></td>
                            <td id="row22-col28" class="cell-td"><input data-row="22" data-col="28" class="cell"></td>
                            <td id="row22-col29" class="cell-td"><input data-row="22" data-col="29" class="cell"></td>
                            <td id="row22-col30" class="cell-td"><input data-row="22" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row23-col1" class="cell-td"><input data-row="23" data-col="1" class="cell"></td>
                            <td id="row23-col2" class="cell-td"><input data-row="23" data-col="2" class="cell"></td>
                            <td id="row23-col3" class="cell-td"><input data-row="23" data-col="3" class="cell"></td>
                            <td id="row23-col4" class="cell-td"><input data-row="23" data-col="4" class="cell"></td>
                            <td id="row23-col5" class="cell-td"><input data-row="23" data-col="5" class="cell"></td>
                            <td id="row23-col6" class="cell-td"><input data-row="23" data-col="6" class="cell"></td>
                            <td id="row23-col7" class="cell-td"><input data-row="23" data-col="7" class="cell"></td>
                            <td id="row23-col8" class="cell-td"><input data-row="23" data-col="8" class="cell"></td>
                            <td id="row23-col9" class="cell-td"><input data-row="23" data-col="9" class="cell"></td>
                            <td id="row23-col10" class="cell-td"><input data-row="23" data-col="10" class="cell"></td>
                            <td id="row23-col11" class="cell-td"><input data-row="23" data-col="11" class="cell"></td>
                            <td id="row23-col12" class="cell-td"><input data-row="23" data-col="12" class="cell"></td>
                            <td id="row23-col13" class="cell-td"><input data-row="23" data-col="13" class="cell"></td>
                            <td id="row23-col14" class="cell-td"><input data-row="23" data-col="14" class="cell"></td>
                            <td id="row23-col15" class="cell-td"><input data-row="23" data-col="15" class="cell"></td>
                            <td id="row23-col16" class="cell-td"><input data-row="23" data-col="16" class="cell"></td>
                            <td id="row23-col17" class="cell-td"><input data-row="23" data-col="17" class="cell"></td>
                            <td id="row23-col18" class="cell-td"><input data-row="23" data-col="18" class="cell"></td>
                            <td id="row23-col19" class="cell-td"><input data-row="23" data-col="19" class="cell"></td>
                            <td id="row23-col20" class="cell-td"><input data-row="23" data-col="20" class="cell"></td>
                            <td id="row23-col21" class="cell-td"><input data-row="23" data-col="21" class="cell"></td>
                            <td id="row23-col22" class="cell-td"><input data-row="23" data-col="22" class="cell"></td>
                            <td id="row23-col23" class="cell-td"><input data-row="23" data-col="23" class="cell"></td>
                            <td id="row23-col24" class="cell-td"><input data-row="23" data-col="24" class="cell"></td>
                            <td id="row23-col25" class="cell-td"><input data-row="23" data-col="25" class="cell"></td>
                            <td id="row23-col26" class="cell-td"><input data-row="23" data-col="26" class="cell"></td>
                            <td id="row23-col27" class="cell-td"><input data-row="23" data-col="27" class="cell"></td>
                            <td id="row23-col28" class="cell-td"><input data-row="23" data-col="28" class="cell"></td>
                            <td id="row23-col29" class="cell-td"><input data-row="23" data-col="29" class="cell"></td>
                            <td id="row23-col30" class="cell-td"><input data-row="23" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row24-col1" class="cell-td"><input data-row="24" data-col="1" class="cell"></td>
                            <td id="row24-col2" class="cell-td"><input data-row="24" data-col="2" class="cell"></td>
                            <td id="row24-col3" class="cell-td"><input data-row="24" data-col="3" class="cell"></td>
                            <td id="row24-col4" class="cell-td"><input data-row="24" data-col="4" class="cell"></td>
                            <td id="row24-col5" class="cell-td"><input data-row="24" data-col="5" class="cell"></td>
                            <td id="row24-col6" class="cell-td"><input data-row="24" data-col="6" class="cell"></td>
                            <td id="row24-col7" class="cell-td"><input data-row="24" data-col="7" class="cell"></td>
                            <td id="row24-col8" class="cell-td"><input data-row="24" data-col="8" class="cell"></td>
                            <td id="row24-col9" class="cell-td"><input data-row="24" data-col="9" class="cell"></td>
                            <td id="row24-col10" class="cell-td"><input data-row="24" data-col="10" class="cell"></td>
                            <td id="row24-col11" class="cell-td"><input data-row="24" data-col="11" class="cell"></td>
                            <td id="row24-col12" class="cell-td"><input data-row="24" data-col="12" class="cell"></td>
                            <td id="row24-col13" class="cell-td"><input data-row="24" data-col="13" class="cell"></td>
                            <td id="row24-col14" class="cell-td"><input data-row="24" data-col="14" class="cell"></td>
                            <td id="row24-col15" class="cell-td"><input data-row="24" data-col="15" class="cell"></td>
                            <td id="row24-col16" class="cell-td"><input data-row="24" data-col="16" class="cell"></td>
                            <td id="row24-col17" class="cell-td"><input data-row="24" data-col="17" class="cell"></td>
                            <td id="row24-col18" class="cell-td"><input data-row="24" data-col="18" class="cell"></td>
                            <td id="row24-col19" class="cell-td"><input data-row="24" data-col="19" class="cell"></td>
                            <td id="row24-col20" class="cell-td"><input data-row="24" data-col="20" class="cell"></td>
                            <td id="row24-col21" class="cell-td"><input data-row="24" data-col="21" class="cell"></td>
                            <td id="row24-col22" class="cell-td"><input data-row="24" data-col="22" class="cell"></td>
                            <td id="row24-col23" class="cell-td"><input data-row="24" data-col="23" class="cell"></td>
                            <td id="row24-col24" class="cell-td"><input data-row="24" data-col="24" class="cell"></td>
                            <td id="row24-col25" class="cell-td"><input data-row="24" data-col="25" class="cell"></td>
                            <td id="row24-col26" class="cell-td"><input data-row="24" data-col="26" class="cell"></td>
                            <td id="row24-col27" class="cell-td"><input data-row="24" data-col="27" class="cell"></td>
                            <td id="row24-col28" class="cell-td"><input data-row="24" data-col="28" class="cell"></td>
                            <td id="row24-col29" class="cell-td"><input data-row="24" data-col="29" class="cell"></td>
                            <td id="row24-col30" class="cell-td"><input data-row="24" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row25-col1" class="cell-td"><input data-row="25" data-col="1" class="cell"></td>
                            <td id="row25-col2" class="cell-td"><input data-row="25" data-col="2" class="cell"></td>
                            <td id="row25-col3" class="cell-td"><input data-row="25" data-col="3" class="cell"></td>
                            <td id="row25-col4" class="cell-td"><input data-row="25" data-col="4" class="cell"></td>
                            <td id="row25-col5" class="cell-td"><input data-row="25" data-col="5" class="cell"></td>
                            <td id="row25-col6" class="cell-td"><input data-row="25" data-col="6" class="cell"></td>
                            <td id="row25-col7" class="cell-td"><input data-row="25" data-col="7" class="cell"></td>
                            <td id="row25-col8" class="cell-td"><input data-row="25" data-col="8" class="cell"></td>
                            <td id="row25-col9" class="cell-td"><input data-row="25" data-col="9" class="cell"></td>
                            <td id="row25-col10" class="cell-td"><input data-row="25" data-col="10" class="cell"></td>
                            <td id="row25-col11" class="cell-td"><input data-row="25" data-col="11" class="cell"></td>
                            <td id="row25-col12" class="cell-td"><input data-row="25" data-col="12" class="cell"></td>
                            <td id="row25-col13" class="cell-td"><input data-row="25" data-col="13" class="cell"></td>
                            <td id="row25-col14" class="cell-td"><input data-row="25" data-col="14" class="cell"></td>
                            <td id="row25-col15" class="cell-td"><input data-row="25" data-col="15" class="cell"></td>
                            <td id="row25-col16" class="cell-td"><input data-row="25" data-col="16" class="cell"></td>
                            <td id="row25-col17" class="cell-td"><input data-row="25" data-col="17" class="cell"></td>
                            <td id="row25-col18" class="cell-td"><input data-row="25" data-col="18" class="cell"></td>
                            <td id="row25-col19" class="cell-td"><input data-row="25" data-col="19" class="cell"></td>
                            <td id="row25-col20" class="cell-td"><input data-row="25" data-col="20" class="cell"></td>
                            <td id="row25-col21" class="cell-td"><input data-row="25" data-col="21" class="cell"></td>
                            <td id="row25-col22" class="cell-td"><input data-row="25" data-col="22" class="cell"></td>
                            <td id="row25-col23" class="cell-td"><input data-row="25" data-col="23" class="cell"></td>
                            <td id="row25-col24" class="cell-td"><input data-row="25" data-col="24" class="cell"></td>
                            <td id="row25-col25" class="cell-td"><input data-row="25" data-col="25" class="cell"></td>
                            <td id="row25-col26" class="cell-td"><input data-row="25" data-col="26" class="cell"></td>
                            <td id="row25-col27" class="cell-td"><input data-row="25" data-col="27" class="cell"></td>
                            <td id="row25-col28" class="cell-td"><input data-row="25" data-col="28" class="cell"></td>
                            <td id="row25-col29" class="cell-td"><input data-row="25" data-col="29" class="cell"></td>
                            <td id="row25-col30" class="cell-td"><input data-row="25" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row26-col1" class="cell-td"><input data-row="26" data-col="1" class="cell"></td>
                            <td id="row26-col2" class="cell-td"><input data-row="26" data-col="2" class="cell"></td>
                            <td id="row26-col3" class="cell-td"><input data-row="26" data-col="3" class="cell"></td>
                            <td id="row26-col4" class="cell-td"><input data-row="26" data-col="4" class="cell"></td>
                            <td id="row26-col5" class="cell-td"><input data-row="26" data-col="5" class="cell"></td>
                            <td id="row26-col6" class="cell-td"><input data-row="26" data-col="6" class="cell"></td>
                            <td id="row26-col7" class="cell-td"><input data-row="26" data-col="7" class="cell"></td>
                            <td id="row26-col8" class="cell-td"><input data-row="26" data-col="8" class="cell"></td>
                            <td id="row26-col9" class="cell-td"><input data-row="26" data-col="9" class="cell"></td>
                            <td id="row26-col10" class="cell-td"><input data-row="26" data-col="10" class="cell"></td>
                            <td id="row26-col11" class="cell-td"><input data-row="26" data-col="11" class="cell"></td>
                            <td id="row26-col12" class="cell-td"><input data-row="26" data-col="12" class="cell"></td>
                            <td id="row26-col13" class="cell-td"><input data-row="26" data-col="13" class="cell"></td>
                            <td id="row26-col14" class="cell-td"><input data-row="26" data-col="14" class="cell"></td>
                            <td id="row26-col15" class="cell-td"><input data-row="26" data-col="15" class="cell"></td>
                            <td id="row26-col16" class="cell-td"><input data-row="26" data-col="16" class="cell"></td>
                            <td id="row26-col17" class="cell-td"><input data-row="26" data-col="17" class="cell"></td>
                            <td id="row26-col18" class="cell-td"><input data-row="26" data-col="18" class="cell"></td>
                            <td id="row26-col19" class="cell-td"><input data-row="26" data-col="19" class="cell"></td>
                            <td id="row26-col20" class="cell-td"><input data-row="26" data-col="20" class="cell"></td>
                            <td id="row26-col21" class="cell-td"><input data-row="26" data-col="21" class="cell"></td>
                            <td id="row26-col22" class="cell-td"><input data-row="26" data-col="22" class="cell"></td>
                            <td id="row26-col23" class="cell-td"><input data-row="26" data-col="23" class="cell"></td>
                            <td id="row26-col24" class="cell-td"><input data-row="26" data-col="24" class="cell"></td>
                            <td id="row26-col25" class="cell-td"><input data-row="26" data-col="25" class="cell"></td>
                            <td id="row26-col26" class="cell-td"><input data-row="26" data-col="26" class="cell"></td>
                            <td id="row26-col27" class="cell-td"><input data-row="26" data-col="27" class="cell"></td>
                            <td id="row26-col28" class="cell-td"><input data-row="26" data-col="28" class="cell"></td>
                            <td id="row26-col29" class="cell-td"><input data-row="26" data-col="29" class="cell"></td>
                            <td id="row26-col30" class="cell-td"><input data-row="26" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row27-col1" class="cell-td"><input data-row="27" data-col="1" class="cell"></td>
                            <td id="row27-col2" class="cell-td"><input data-row="27" data-col="2" class="cell"></td>
                            <td id="row27-col3" class="cell-td"><input data-row="27" data-col="3" class="cell"></td>
                            <td id="row27-col4" class="cell-td"><input data-row="27" data-col="4" class="cell"></td>
                            <td id="row27-col5" class="cell-td"><input data-row="27" data-col="5" class="cell"></td>
                            <td id="row27-col6" class="cell-td"><input data-row="27" data-col="6" class="cell"></td>
                            <td id="row27-col7" class="cell-td"><input data-row="27" data-col="7" class="cell"></td>
                            <td id="row27-col8" class="cell-td"><input data-row="27" data-col="8" class="cell"></td>
                            <td id="row27-col9" class="cell-td"><input data-row="27" data-col="9" class="cell"></td>
                            <td id="row27-col10" class="cell-td"><input data-row="27" data-col="10" class="cell"></td>
                            <td id="row27-col11" class="cell-td"><input data-row="27" data-col="11" class="cell"></td>
                            <td id="row27-col12" class="cell-td"><input data-row="27" data-col="12" class="cell"></td>
                            <td id="row27-col13" class="cell-td"><input data-row="27" data-col="13" class="cell"></td>
                            <td id="row27-col14" class="cell-td"><input data-row="27" data-col="14" class="cell"></td>
                            <td id="row27-col15" class="cell-td"><input data-row="27" data-col="15" class="cell"></td>
                            <td id="row27-col16" class="cell-td"><input data-row="27" data-col="16" class="cell"></td>
                            <td id="row27-col17" class="cell-td"><input data-row="27" data-col="17" class="cell"></td>
                            <td id="row27-col18" class="cell-td"><input data-row="27" data-col="18" class="cell"></td>
                            <td id="row27-col19" class="cell-td"><input data-row="27" data-col="19" class="cell"></td>
                            <td id="row27-col20" class="cell-td"><input data-row="27" data-col="20" class="cell"></td>
                            <td id="row27-col21" class="cell-td"><input data-row="27" data-col="21" class="cell"></td>
                            <td id="row27-col22" class="cell-td"><input data-row="27" data-col="22" class="cell"></td>
                            <td id="row27-col23" class="cell-td"><input data-row="27" data-col="23" class="cell"></td>
                            <td id="row27-col24" class="cell-td"><input data-row="27" data-col="24" class="cell"></td>
                            <td id="row27-col25" class="cell-td"><input data-row="27" data-col="25" class="cell"></td>
                            <td id="row27-col26" class="cell-td"><input data-row="27" data-col="26" class="cell"></td>
                            <td id="row27-col27" class="cell-td"><input data-row="27" data-col="27" class="cell"></td>
                            <td id="row27-col28" class="cell-td"><input data-row="27" data-col="28" class="cell"></td>
                            <td id="row27-col29" class="cell-td"><input data-row="27" data-col="29" class="cell"></td>
                            <td id="row27-col30" class="cell-td"><input data-row="27" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row28-col1" class="cell-td"><input data-row="28" data-col="1" class="cell"></td>
                            <td id="row28-col2" class="cell-td"><input data-row="28" data-col="2" class="cell"></td>
                            <td id="row28-col3" class="cell-td"><input data-row="28" data-col="3" class="cell"></td>
                            <td id="row28-col4" class="cell-td"><input data-row="28" data-col="4" class="cell"></td>
                            <td id="row28-col5" class="cell-td"><input data-row="28" data-col="5" class="cell"></td>
                            <td id="row28-col6" class="cell-td"><input data-row="28" data-col="6" class="cell"></td>
                            <td id="row28-col7" class="cell-td"><input data-row="28" data-col="7" class="cell"></td>
                            <td id="row28-col8" class="cell-td"><input data-row="28" data-col="8" class="cell"></td>
                            <td id="row28-col9" class="cell-td"><input data-row="28" data-col="9" class="cell"></td>
                            <td id="row28-col10" class="cell-td"><input data-row="28" data-col="10" class="cell"></td>
                            <td id="row28-col11" class="cell-td"><input data-row="28" data-col="11" class="cell"></td>
                            <td id="row28-col12" class="cell-td"><input data-row="28" data-col="12" class="cell"></td>
                            <td id="row28-col13" class="cell-td"><input data-row="28" data-col="13" class="cell"></td>
                            <td id="row28-col14" class="cell-td"><input data-row="28" data-col="14" class="cell"></td>
                            <td id="row28-col15" class="cell-td"><input data-row="28" data-col="15" class="cell"></td>
                            <td id="row28-col16" class="cell-td"><input data-row="28" data-col="16" class="cell"></td>
                            <td id="row28-col17" class="cell-td"><input data-row="28" data-col="17" class="cell"></td>
                            <td id="row28-col18" class="cell-td"><input data-row="28" data-col="18" class="cell"></td>
                            <td id="row28-col19" class="cell-td"><input data-row="28" data-col="19" class="cell"></td>
                            <td id="row28-col20" class="cell-td"><input data-row="28" data-col="20" class="cell"></td>
                            <td id="row28-col21" class="cell-td"><input data-row="28" data-col="21" class="cell"></td>
                            <td id="row28-col22" class="cell-td"><input data-row="28" data-col="22" class="cell"></td>
                            <td id="row28-col23" class="cell-td"><input data-row="28" data-col="23" class="cell"></td>
                            <td id="row28-col24" class="cell-td"><input data-row="28" data-col="24" class="cell"></td>
                            <td id="row28-col25" class="cell-td"><input data-row="28" data-col="25" class="cell"></td>
                            <td id="row28-col26" class="cell-td"><input data-row="28" data-col="26" class="cell"></td>
                            <td id="row28-col27" class="cell-td"><input data-row="28" data-col="27" class="cell"></td>
                            <td id="row28-col28" class="cell-td"><input data-row="28" data-col="28" class="cell"></td>
                            <td id="row28-col29" class="cell-td"><input data-row="28" data-col="29" class="cell"></td>
                            <td id="row28-col30" class="cell-td"><input data-row="28" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row29-col1" class="cell-td"><input data-row="29" data-col="1" class="cell"></td>
                            <td id="row29-col2" class="cell-td"><input data-row="29" data-col="2" class="cell"></td>
                            <td id="row29-col3" class="cell-td"><input data-row="29" data-col="3" class="cell"></td>
                            <td id="row29-col4" class="cell-td"><input data-row="29" data-col="4" class="cell"></td>
                            <td id="row29-col5" class="cell-td"><input data-row="29" data-col="5" class="cell"></td>
                            <td id="row29-col6" class="cell-td"><input data-row="29" data-col="6" class="cell"></td>
                            <td id="row29-col7" class="cell-td"><input data-row="29" data-col="7" class="cell"></td>
                            <td id="row29-col8" class="cell-td"><input data-row="29" data-col="8" class="cell"></td>
                            <td id="row29-col9" class="cell-td"><input data-row="29" data-col="9" class="cell"></td>
                            <td id="row29-col10" class="cell-td"><input data-row="29" data-col="10" class="cell"></td>
                            <td id="row29-col11" class="cell-td"><input data-row="29" data-col="11" class="cell"></td>
                            <td id="row29-col12" class="cell-td"><input data-row="29" data-col="12" class="cell"></td>
                            <td id="row29-col13" class="cell-td"><input data-row="29" data-col="13" class="cell"></td>
                            <td id="row29-col14" class="cell-td"><input data-row="29" data-col="14" class="cell"></td>
                            <td id="row29-col15" class="cell-td"><input data-row="29" data-col="15" class="cell"></td>
                            <td id="row29-col16" class="cell-td"><input data-row="29" data-col="16" class="cell"></td>
                            <td id="row29-col17" class="cell-td"><input data-row="29" data-col="17" class="cell"></td>
                            <td id="row29-col18" class="cell-td"><input data-row="29" data-col="18" class="cell"></td>
                            <td id="row29-col19" class="cell-td"><input data-row="29" data-col="19" class="cell"></td>
                            <td id="row29-col20" class="cell-td"><input data-row="29" data-col="20" class="cell"></td>
                            <td id="row29-col21" class="cell-td"><input data-row="29" data-col="21" class="cell"></td>
                            <td id="row29-col22" class="cell-td"><input data-row="29" data-col="22" class="cell"></td>
                            <td id="row29-col23" class="cell-td"><input data-row="29" data-col="23" class="cell"></td>
                            <td id="row29-col24" class="cell-td"><input data-row="29" data-col="24" class="cell"></td>
                            <td id="row29-col25" class="cell-td"><input data-row="29" data-col="25" class="cell"></td>
                            <td id="row29-col26" class="cell-td"><input data-row="29" data-col="26" class="cell"></td>
                            <td id="row29-col27" class="cell-td"><input data-row="29" data-col="27" class="cell"></td>
                            <td id="row29-col28" class="cell-td"><input data-row="29" data-col="28" class="cell"></td>
                            <td id="row29-col29" class="cell-td"><input data-row="29" data-col="29" class="cell"></td>
                            <td id="row29-col30" class="cell-td"><input data-row="29" data-col="30" class="cell"></td>
                        </tr>
                        <tr>
                            <td id="row30-col1" class="cell-td"><input data-row="30" data-col="1" class="cell"></td>
                            <td id="row30-col2" class="cell-td"><input data-row="30" data-col="2" class="cell"></td>
                            <td id="row30-col3" class="cell-td"><input data-row="30" data-col="3" class="cell"></td>
                            <td id="row30-col4" class="cell-td"><input data-row="30" data-col="4" class="cell"></td>
                            <td id="row30-col5" class="cell-td"><input data-row="30" data-col="5" class="cell"></td>
                            <td id="row30-col6" class="cell-td"><input data-row="30" data-col="6" class="cell"></td>
                            <td id="row30-col7" class="cell-td"><input data-row="30" data-col="7" class="cell"></td>
                            <td id="row30-col8" class="cell-td"><input data-row="30" data-col="8" class="cell"></td>
                            <td id="row30-col9" class="cell-td"><input data-row="30" data-col="9" class="cell"></td>
                            <td id="row30-col10" class="cell-td"><input data-row="30" data-col="10" class="cell"></td>
                            <td id="row30-col11" class="cell-td"><input data-row="30" data-col="11" class="cell"></td>
                            <td id="row30-col12" class="cell-td"><input data-row="30" data-col="12" class="cell"></td>
                            <td id="row30-col13" class="cell-td"><input data-row="30" data-col="13" class="cell"></td>
                            <td id="row30-col14" class="cell-td"><input data-row="30" data-col="14" class="cell"></td>
                            <td id="row30-col15" class="cell-td"><input data-row="30" data-col="15" class="cell"></td>
                            <td id="row30-col16" class="cell-td"><input data-row="30" data-col="16" class="cell"></td>
                            <td id="row30-col17" class="cell-td"><input data-row="30" data-col="17" class="cell"></td>
                            <td id="row30-col18" class="cell-td"><input data-row="30" data-col="18" class="cell"></td>
                            <td id="row30-col19" class="cell-td"><input data-row="30" data-col="19" class="cell"></td>
                            <td id="row30-col20" class="cell-td"><input data-row="30" data-col="20" class="cell"></td>
                            <td id="row30-col21" class="cell-td"><input data-row="30" data-col="21" class="cell"></td>
                            <td id="row30-col22" class="cell-td"><input data-row="30" data-col="22" class="cell"></td>
                            <td id="row30-col23" class="cell-td"><input data-row="30" data-col="23" class="cell"></td>
                            <td id="row30-col24" class="cell-td"><input data-row="30" data-col="24" class="cell"></td>
                            <td id="row30-col25" class="cell-td"><input data-row="30" data-col="25" class="cell"></td>
                            <td id="row30-col26" class="cell-td"><input data-row="30" data-col="26" class="cell"></td>
                            <td id="row30-col27" class="cell-td"><input data-row="30" data-col="27" class="cell"></td>
                            <td id="row30-col28" class="cell-td"><input data-row="30" data-col="28" class="cell"></td>
                            <td id="row30-col29" class="cell-td"><input data-row="30" data-col="29" class="cell"></td>
                            <td id="row30-col30" class="cell-td"><input data-row="30" data-col="30" class="cell"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="selectDiv" style="left: 335px; top: 204px; display: block; width: 246px; height: 169px;"></div>


<div id="colorpanel" style="position: absolute; display: none;">
    <table width="253" border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000;">
        <tbody>
        <tr height="30">
            <td colspan="21" bgcolor="#cccccc">
                <table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">
                    <tbody>
                    <tr>
                        <td width="3"></td>
                        <td><input type="text" id="DisColor" size="6" disabled=""
                                   style="border:solid 1px #000000;background-color:#ffff00"></td>
                        <td width="3"></td>
                        <td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;"
                                   value="#000000"><a href="javascript:void(0);" id="_cclose">关闭</a> | <a
                                href="javascript:void(0);" id="_creset">清除</a></td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        </tbody>
    </table>
    <table id="CT" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000">
        <tbody>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#003300" style="background-color:#003300"></td>
            <td width="11" rel="#006600" style="background-color:#006600"></td>
            <td width="11" rel="#009900" style="background-color:#009900"></td>
            <td width="11" rel="#00CC00" style="background-color:#00CC00"></td>
            <td width="11" rel="#00FF00" style="background-color:#00FF00"></td>
            <td width="11" rel="#330000" style="background-color:#330000"></td>
            <td width="11" rel="#333300" style="background-color:#333300"></td>
            <td width="11" rel="#336600" style="background-color:#336600"></td>
            <td width="11" rel="#339900" style="background-color:#339900"></td>
            <td width="11" rel="#33CC00" style="background-color:#33CC00"></td>
            <td width="11" rel="#33FF00" style="background-color:#33FF00"></td>
            <td width="11" rel="#660000" style="background-color:#660000"></td>
            <td width="11" rel="#663300" style="background-color:#663300"></td>
            <td width="11" rel="#666600" style="background-color:#666600"></td>
            <td width="11" rel="#669900" style="background-color:#669900"></td>
            <td width="11" rel="#66CC00" style="background-color:#66CC00"></td>
            <td width="11" rel="#66FF00" style="background-color:#66FF00"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#333333" style="background-color:#333333"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#000033" style="background-color:#000033"></td>
            <td width="11" rel="#003333" style="background-color:#003333"></td>
            <td width="11" rel="#006633" style="background-color:#006633"></td>
            <td width="11" rel="#009933" style="background-color:#009933"></td>
            <td width="11" rel="#00CC33" style="background-color:#00CC33"></td>
            <td width="11" rel="#00FF33" style="background-color:#00FF33"></td>
            <td width="11" rel="#330033" style="background-color:#330033"></td>
            <td width="11" rel="#333333" style="background-color:#333333"></td>
            <td width="11" rel="#336633" style="background-color:#336633"></td>
            <td width="11" rel="#339933" style="background-color:#339933"></td>
            <td width="11" rel="#33CC33" style="background-color:#33CC33"></td>
            <td width="11" rel="#33FF33" style="background-color:#33FF33"></td>
            <td width="11" rel="#660033" style="background-color:#660033"></td>
            <td width="11" rel="#663333" style="background-color:#663333"></td>
            <td width="11" rel="#666633" style="background-color:#666633"></td>
            <td width="11" rel="#669933" style="background-color:#669933"></td>
            <td width="11" rel="#66CC33" style="background-color:#66CC33"></td>
            <td width="11" rel="#66FF33" style="background-color:#66FF33"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#666666" style="background-color:#666666"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#000066" style="background-color:#000066"></td>
            <td width="11" rel="#003366" style="background-color:#003366"></td>
            <td width="11" rel="#006666" style="background-color:#006666"></td>
            <td width="11" rel="#009966" style="background-color:#009966"></td>
            <td width="11" rel="#00CC66" style="background-color:#00CC66"></td>
            <td width="11" rel="#00FF66" style="background-color:#00FF66"></td>
            <td width="11" rel="#330066" style="background-color:#330066"></td>
            <td width="11" rel="#333366" style="background-color:#333366"></td>
            <td width="11" rel="#336666" style="background-color:#336666"></td>
            <td width="11" rel="#339966" style="background-color:#339966"></td>
            <td width="11" rel="#33CC66" style="background-color:#33CC66"></td>
            <td width="11" rel="#33FF66" style="background-color:#33FF66"></td>
            <td width="11" rel="#660066" style="background-color:#660066"></td>
            <td width="11" rel="#663366" style="background-color:#663366"></td>
            <td width="11" rel="#666666" style="background-color:#666666"></td>
            <td width="11" rel="#669966" style="background-color:#669966"></td>
            <td width="11" rel="#66CC66" style="background-color:#66CC66"></td>
            <td width="11" rel="#66FF66" style="background-color:#66FF66"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#999999" style="background-color:#999999"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#000099" style="background-color:#000099"></td>
            <td width="11" rel="#003399" style="background-color:#003399"></td>
            <td width="11" rel="#006699" style="background-color:#006699"></td>
            <td width="11" rel="#009999" style="background-color:#009999"></td>
            <td width="11" rel="#00CC99" style="background-color:#00CC99"></td>
            <td width="11" rel="#00FF99" style="background-color:#00FF99"></td>
            <td width="11" rel="#330099" style="background-color:#330099"></td>
            <td width="11" rel="#333399" style="background-color:#333399"></td>
            <td width="11" rel="#336699" style="background-color:#336699"></td>
            <td width="11" rel="#339999" style="background-color:#339999"></td>
            <td width="11" rel="#33CC99" style="background-color:#33CC99"></td>
            <td width="11" rel="#33FF99" style="background-color:#33FF99"></td>
            <td width="11" rel="#660099" style="background-color:#660099"></td>
            <td width="11" rel="#663399" style="background-color:#663399"></td>
            <td width="11" rel="#666699" style="background-color:#666699"></td>
            <td width="11" rel="#669999" style="background-color:#669999"></td>
            <td width="11" rel="#66CC99" style="background-color:#66CC99"></td>
            <td width="11" rel="#66FF99" style="background-color:#66FF99"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#CCCCCC" style="background-color:#CCCCCC"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#0000CC" style="background-color:#0000CC"></td>
            <td width="11" rel="#0033CC" style="background-color:#0033CC"></td>
            <td width="11" rel="#0066CC" style="background-color:#0066CC"></td>
            <td width="11" rel="#0099CC" style="background-color:#0099CC"></td>
            <td width="11" rel="#00CCCC" style="background-color:#00CCCC"></td>
            <td width="11" rel="#00FFCC" style="background-color:#00FFCC"></td>
            <td width="11" rel="#3300CC" style="background-color:#3300CC"></td>
            <td width="11" rel="#3333CC" style="background-color:#3333CC"></td>
            <td width="11" rel="#3366CC" style="background-color:#3366CC"></td>
            <td width="11" rel="#3399CC" style="background-color:#3399CC"></td>
            <td width="11" rel="#33CCCC" style="background-color:#33CCCC"></td>
            <td width="11" rel="#33FFCC" style="background-color:#33FFCC"></td>
            <td width="11" rel="#6600CC" style="background-color:#6600CC"></td>
            <td width="11" rel="#6633CC" style="background-color:#6633CC"></td>
            <td width="11" rel="#6666CC" style="background-color:#6666CC"></td>
            <td width="11" rel="#6699CC" style="background-color:#6699CC"></td>
            <td width="11" rel="#66CCCC" style="background-color:#66CCCC"></td>
            <td width="11" rel="#66FFCC" style="background-color:#66FFCC"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#FFFFFF" style="background-color:#FFFFFF"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#0000FF" style="background-color:#0000FF"></td>
            <td width="11" rel="#0033FF" style="background-color:#0033FF"></td>
            <td width="11" rel="#0066FF" style="background-color:#0066FF"></td>
            <td width="11" rel="#0099FF" style="background-color:#0099FF"></td>
            <td width="11" rel="#00CCFF" style="background-color:#00CCFF"></td>
            <td width="11" rel="#00FFFF" style="background-color:#00FFFF"></td>
            <td width="11" rel="#3300FF" style="background-color:#3300FF"></td>
            <td width="11" rel="#3333FF" style="background-color:#3333FF"></td>
            <td width="11" rel="#3366FF" style="background-color:#3366FF"></td>
            <td width="11" rel="#3399FF" style="background-color:#3399FF"></td>
            <td width="11" rel="#33CCFF" style="background-color:#33CCFF"></td>
            <td width="11" rel="#33FFFF" style="background-color:#33FFFF"></td>
            <td width="11" rel="#6600FF" style="background-color:#6600FF"></td>
            <td width="11" rel="#6633FF" style="background-color:#6633FF"></td>
            <td width="11" rel="#6666FF" style="background-color:#6666FF"></td>
            <td width="11" rel="#6699FF" style="background-color:#6699FF"></td>
            <td width="11" rel="#66CCFF" style="background-color:#66CCFF"></td>
            <td width="11" rel="#66FFFF" style="background-color:#66FFFF"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#FF0000" style="background-color:#FF0000"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#990000" style="background-color:#990000"></td>
            <td width="11" rel="#993300" style="background-color:#993300"></td>
            <td width="11" rel="#996600" style="background-color:#996600"></td>
            <td width="11" rel="#999900" style="background-color:#999900"></td>
            <td width="11" rel="#99CC00" style="background-color:#99CC00"></td>
            <td width="11" rel="#99FF00" style="background-color:#99FF00"></td>
            <td width="11" rel="#CC0000" style="background-color:#CC0000"></td>
            <td width="11" rel="#CC3300" style="background-color:#CC3300"></td>
            <td width="11" rel="#CC6600" style="background-color:#CC6600"></td>
            <td width="11" rel="#CC9900" style="background-color:#CC9900"></td>
            <td width="11" rel="#CCCC00" style="background-color:#CCCC00"></td>
            <td width="11" rel="#CCFF00" style="background-color:#CCFF00"></td>
            <td width="11" rel="#FF0000" style="background-color:#FF0000"></td>
            <td width="11" rel="#FF3300" style="background-color:#FF3300"></td>
            <td width="11" rel="#FF6600" style="background-color:#FF6600"></td>
            <td width="11" rel="#FF9900" style="background-color:#FF9900"></td>
            <td width="11" rel="#FFCC00" style="background-color:#FFCC00"></td>
            <td width="11" rel="#FFFF00" style="background-color:#FFFF00"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#00FF00" style="background-color:#00FF00"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#990033" style="background-color:#990033"></td>
            <td width="11" rel="#993333" style="background-color:#993333"></td>
            <td width="11" rel="#996633" style="background-color:#996633"></td>
            <td width="11" rel="#999933" style="background-color:#999933"></td>
            <td width="11" rel="#99CC33" style="background-color:#99CC33"></td>
            <td width="11" rel="#99FF33" style="background-color:#99FF33"></td>
            <td width="11" rel="#CC0033" style="background-color:#CC0033"></td>
            <td width="11" rel="#CC3333" style="background-color:#CC3333"></td>
            <td width="11" rel="#CC6633" style="background-color:#CC6633"></td>
            <td width="11" rel="#CC9933" style="background-color:#CC9933"></td>
            <td width="11" rel="#CCCC33" style="background-color:#CCCC33"></td>
            <td width="11" rel="#CCFF33" style="background-color:#CCFF33"></td>
            <td width="11" rel="#FF0033" style="background-color:#FF0033"></td>
            <td width="11" rel="#FF3333" style="background-color:#FF3333"></td>
            <td width="11" rel="#FF6633" style="background-color:#FF6633"></td>
            <td width="11" rel="#FF9933" style="background-color:#FF9933"></td>
            <td width="11" rel="#FFCC33" style="background-color:#FFCC33"></td>
            <td width="11" rel="#FFFF33" style="background-color:#FFFF33"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#0000FF" style="background-color:#0000FF"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#990066" style="background-color:#990066"></td>
            <td width="11" rel="#993366" style="background-color:#993366"></td>
            <td width="11" rel="#996666" style="background-color:#996666"></td>
            <td width="11" rel="#999966" style="background-color:#999966"></td>
            <td width="11" rel="#99CC66" style="background-color:#99CC66"></td>
            <td width="11" rel="#99FF66" style="background-color:#99FF66"></td>
            <td width="11" rel="#CC0066" style="background-color:#CC0066"></td>
            <td width="11" rel="#CC3366" style="background-color:#CC3366"></td>
            <td width="11" rel="#CC6666" style="background-color:#CC6666"></td>
            <td width="11" rel="#CC9966" style="background-color:#CC9966"></td>
            <td width="11" rel="#CCCC66" style="background-color:#CCCC66"></td>
            <td width="11" rel="#CCFF66" style="background-color:#CCFF66"></td>
            <td width="11" rel="#FF0066" style="background-color:#FF0066"></td>
            <td width="11" rel="#FF3366" style="background-color:#FF3366"></td>
            <td width="11" rel="#FF6666" style="background-color:#FF6666"></td>
            <td width="11" rel="#FF9966" style="background-color:#FF9966"></td>
            <td width="11" rel="#FFCC66" style="background-color:#FFCC66"></td>
            <td width="11" rel="#FFFF66" style="background-color:#FFFF66"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#FFFF00" style="background-color:#FFFF00"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#990099" style="background-color:#990099"></td>
            <td width="11" rel="#993399" style="background-color:#993399"></td>
            <td width="11" rel="#996699" style="background-color:#996699"></td>
            <td width="11" rel="#999999" style="background-color:#999999"></td>
            <td width="11" rel="#99CC99" style="background-color:#99CC99"></td>
            <td width="11" rel="#99FF99" style="background-color:#99FF99"></td>
            <td width="11" rel="#CC0099" style="background-color:#CC0099"></td>
            <td width="11" rel="#CC3399" style="background-color:#CC3399"></td>
            <td width="11" rel="#CC6699" style="background-color:#CC6699"></td>
            <td width="11" rel="#CC9999" style="background-color:#CC9999"></td>
            <td width="11" rel="#CCCC99" style="background-color:#CCCC99"></td>
            <td width="11" rel="#CCFF99" style="background-color:#CCFF99"></td>
            <td width="11" rel="#FF0099" style="background-color:#FF0099"></td>
            <td width="11" rel="#FF3399" style="background-color:#FF3399"></td>
            <td width="11" rel="#FF6699" style="background-color:#FF6699"></td>
            <td width="11" rel="#FF9999" style="background-color:#FF9999"></td>
            <td width="11" rel="#FFCC99" style="background-color:#FFCC99"></td>
            <td width="11" rel="#FFFF99" style="background-color:#FFFF99"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#00FFFF" style="background-color:#00FFFF"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#9900CC" style="background-color:#9900CC"></td>
            <td width="11" rel="#9933CC" style="background-color:#9933CC"></td>
            <td width="11" rel="#9966CC" style="background-color:#9966CC"></td>
            <td width="11" rel="#9999CC" style="background-color:#9999CC"></td>
            <td width="11" rel="#99CCCC" style="background-color:#99CCCC"></td>
            <td width="11" rel="#99FFCC" style="background-color:#99FFCC"></td>
            <td width="11" rel="#CC00CC" style="background-color:#CC00CC"></td>
            <td width="11" rel="#CC33CC" style="background-color:#CC33CC"></td>
            <td width="11" rel="#CC66CC" style="background-color:#CC66CC"></td>
            <td width="11" rel="#CC99CC" style="background-color:#CC99CC"></td>
            <td width="11" rel="#CCCCCC" style="background-color:#CCCCCC"></td>
            <td width="11" rel="#CCFFCC" style="background-color:#CCFFCC"></td>
            <td width="11" rel="#FF00CC" style="background-color:#FF00CC"></td>
            <td width="11" rel="#FF33CC" style="background-color:#FF33CC"></td>
            <td width="11" rel="#FF66CC" style="background-color:#FF66CC"></td>
            <td width="11" rel="#FF99CC" style="background-color:#FF99CC"></td>
            <td width="11" rel="#FFCCCC" style="background-color:#FFCCCC"></td>
            <td width="11" rel="#FFFFCC" style="background-color:#FFFFCC"></td>
        </tr>
        <tr height="12">
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#FF00FF" style="background-color:#FF00FF"></td>
            <td width="11" rel="#000000" style="background-color:#000000"></td>
            <td width="11" rel="#9900FF" style="background-color:#9900FF"></td>
            <td width="11" rel="#9933FF" style="background-color:#9933FF"></td>
            <td width="11" rel="#9966FF" style="background-color:#9966FF"></td>
            <td width="11" rel="#9999FF" style="background-color:#9999FF"></td>
            <td width="11" rel="#99CCFF" style="background-color:#99CCFF"></td>
            <td width="11" rel="#99FFFF" style="background-color:#99FFFF"></td>
            <td width="11" rel="#CC00FF" style="background-color:#CC00FF"></td>
            <td width="11" rel="#CC33FF" style="background-color:#CC33FF"></td>
            <td width="11" rel="#CC66FF" style="background-color:#CC66FF"></td>
            <td width="11" rel="#CC99FF" style="background-color:#CC99FF"></td>
            <td width="11" rel="#CCCCFF" style="background-color:#CCCCFF"></td>
            <td width="11" rel="#CCFFFF" style="background-color:#CCFFFF"></td>
            <td width="11" rel="#FF00FF" style="background-color:#FF00FF"></td>
            <td width="11" rel="#FF33FF" style="background-color:#FF33FF"></td>
            <td width="11" rel="#FF66FF" style="background-color:#FF66FF"></td>
            <td width="11" rel="#FF99FF" style="background-color:#FF99FF"></td>
            <td width="11" rel="#FFCCFF" style="background-color:#FFCCFF"></td>
            <td width="11" rel="#FFFFFF" style="background-color:#FFFFFF"></td>
        </tr>
        </tbody>
    </table>
</div>
<div id="colorpanel" style="position: absolute; display: none;"></div>
<script>
    function createTableArrWithObj(length) { // 得到表格头部 第一行的 大写字母
	let arr = []

	for(let i = 0; i < length; i++) {
		let value = String.fromCharCode((65 + i)) // 得到所有字母
		let obj = {
			value: value,
			id: (i + 1),
			active: false,
			rowData: new Array(length),     // 每一行对应的数据
		}
		arr.push(obj)
	}
	return arr
}

// 阻止冒泡
function clearEventBubble(evt) {

	if(evt.stopPropagation)

		evt.stopPropagation();

	else

		evt.cancelBubble = true;

	if(evt.preventDefault)

		evt.preventDefault();

	else

		evt.returnValue = false;

}



// tool 工具绑定事件
$(document).on('click', function(e) {
	$('.tool-list').hide()
})
$(document).on('click', '.tool-item.font-family .inp i', function(e) {
	e.stopPropagation()
	$('.tool-item.font-family .tool-list').toggle()
})

$(function() {

//	colPickInit($('#font-color'))


//	$('.asd').tab();


	// 按下鼠标 滑动 选择多个元素
	function selectDomByDrag() {

		// 鼠标开始和结束时所在的单元格
		var startRow, startCol, endRow, endCol

		// 鼠标开始位置
		var startX,startY

		var startRow,startCol // 开始单元格坐标（行、列数）
		var moveRow,moveCol   // 移动是鼠标所在单元格坐标（行、列数）

		$('#table-body').on('mousedown', function(evt) {
			var isSelect = true; // 正在选择中

			if($(evt.target).data('row') && $(evt.target).data('col')) {
				startRow = $(evt.target).data('row') * 1
				startCol = $(evt.target).data('col') * 1
			}

			// 选择框 左上角坐标
			startX = (evt.x || evt.clientX);
			startY = (evt.y || evt.clientY);

			var selDiv = document.getElementById('selectDiv');

			selDiv.style.left = startX + "px";
			selDiv.style.top = startY + "px";



			// 选择框的大小和位置
			var selDiv_l, selDiv_t, selDiv_w, selDiv_h
//			clearEventBubble(evt)

			$(document).on('mousemove','#table-body', function() {
				evt = window.event || arguments[0]

				moveRow = $(evt.target).data('row') * 1
				moveCol = $(evt.target).data('col') * 1

				if(moveRow!==startRow||moveCol!==startCol){
					// 获取鼠标当前位置
					var _x = (evt.x || evt.clientX);
					var _y = (evt.y || evt.clientY);

					if(isSelect&&Math.abs(_x - startX)>5&&Math.abs(_x - startX)>5) {
						$('#selectDiv').show()

						// 改变选择框的大小
						if(_x >= startX && _y >= startY) {
							selDiv.style.left = Math.min(_x, startX) + "px";
							selDiv.style.top = Math.min(_y, startY) + "px";
							selDiv.style.width = Math.abs(_x - startX) - 5 + "px";
							selDiv.style.height = Math.abs(_y - startY) - 5 + "px";
						} else {
							selDiv.style.left = Math.min(_x, startX) + 5 + "px";
							selDiv.style.top = Math.min(_y, startY) + 5 + "px";
							selDiv.style.width = Math.abs(_x - startX) - 5 + "px";
							selDiv.style.height = Math.abs(_y - startY) - 5 + "px";
						}
					}
					clearEventBubble(evt)
				}


			})

			$(document).on('mouseup', '#table-body',function(evt) {

				// 获取鼠标当前位置
				var _x = (evt.x || evt.clientX);
				var _y = (evt.y || evt.clientY);



				if($(evt.target).data('row') && $(evt.target).data('col')) {
					var endRow = $(evt.target).data('row') * 1
					var endCol = $(evt.target).data('col') * 1
				}

				$('#selectDiv').hide()
				isSelect = false

				// 对选中的单元格添加active
				var minRow = Math.min(startRow, endRow)
				var maxRow = Math.max(startRow, endRow)
				var minCol = Math.min(startCol, endCol)
				var maxCol = Math.max(startCol, endCol)

				if(Math.abs(_x-startX)>5&&Math.abs(_y-startY)>5){
					vm.rowHead.map((item,index)=>{
						item.active = false
						if(item.id<=maxRow&&item.id>=minRow){
							item.active = true
						}
					})
					vm.colHead.map((item,index)=>{
						item.active = false
						if(item.id<=maxCol&&item.id>=minCol){
							item.active = true
						}
					})
//					let temDom = $('.active')
					var temDom
					vm.$nextTick(function(){
						temDom = $('.cell.active')
						temDom = Array.from(temDom)
						vm.currentDom = temDom
					})
				}
				clearEventBubble(evt)
			})
		})
	}

	var vm = new Vue({
		el: '#vm',
		data() {
			return {
				rowHead: [], // 表格头部 行
				colHead: [], // 表格头部列

				currentDom: [], // 当前选中的dom

				isFormat: false, // 是否启用格式刷
				formatList:{},   // 格式刷 包含的格式

				// 从弹窗中获取的函数信息
				functionFromIframe:{
					name:'',
					result:''
				},

				// 从弹窗中获取的属性绑定信息
				attrFromIframe:{
					name:''
				},
				//从弹窗中获取的值绑定信息
				valueFromIframe:{
					name: ''
				},
				//从弹窗中获取的时间绑定信息
				timeFromIframe:{
					name: ''
				},

				// 本地xls文件读取为json数据
				xlsJson: '',

				// 样式集合
				tool: {
					fontSize: 14, // 字号
					fontFamily: {
						name: '宋体',
						value: 'SimSun'
					}, // 字体
					bold: 300, // 字体加粗
					fontStyle: 'normal', // 斜体
					textDecoration: 'none', // 下划线
					color: '', // 字体颜色
					backgroundColor: '', // 背景色
					border: '', // 边框
					borderLeft: '', // 左边框
					borderRight: '', // 又边框
					borderTop: '', // 上边框
					borderBottom: '', // 下边框
					alignItems: 'center', // 垂直布局（垂直居中）
					justifyContent: 'flex-start', // 水平布局（水平居中）
					textAlign:'center', // 水平布局
				}
			}
		},
		created() {
			var _this = this
			this.rowHead = createTableArrWithObj(30)
			this.colHead = createTableArrWithObj(30)
		},
		mounted(){

			$('.tab-null a').tab();
			$.addTabFixed('pages/index.html', '首页');
			$.addTab('pages/index.html', '新建文件');

//			$('#font-color').colpick({
//				layout:'rgbhex',
//				color:'000000', // 默认颜色
//				onSubmit:(hsb,hex,rgb,el)=> {
//					$(el).colpickHide();
//					this.tool.color = `#${$(el).find('.colpick_hex_field input').val()}`
//					this.setCurrentDomWithAttr('color', this.tool.color)
//				}
//			})

			$("#font-color").colorpicker({
	            fillcolor:true,
	            success:(o,color)=>{
	                this.tool.color = color
	                this.setCurrentDomWithAttr('color', this.tool.color)
	            }
	        });


//			$('#bg-color').colpick({
//				layout:'rgbhex',
//				color:'ffffff', // 默认颜色
//				onSubmit:(hsb,hex,rgb,el)=> {
//					$(el).colpickHide();
//					this.tool.backgroundColor = `#${$(el).find('.colpick_hex_field input').val()}`
//					this.setCurrentDomWithAttr('backgroundColor', this.tool.backgroundColor)
//				}
//			})

			$("#bg-color").colorpicker({
	            fillcolor:true,
	            success:(o,color)=>{
	                this.tool.backgroundColor = color
	                this.setCurrentDomWithAttr('backgroundColor', this.tool.backgroundColor)
	            }
	        });

		},
		watch: {
			functionFromIframe:{
				handler: function(val,oldVal){
					this.currentDom.map((item)=>{
						$(item).val(val.name)
					})
				},
				deep: true
			},
			attrFromIframe:{
				handler: function(val,oldVal){
					this.currentDom.map((item)=>{
						let row = $(item).data('row') - 1
						let col = $(item).data('col') - 1
						this.rowHead[row].rowData[col] = val.name

//						$(item).html(val.name)
					})
				},
				deep: true
			},
			valueFromIframe:{
				handler: function(val,oldVal){
					this.currentDom.map((item)=>{
						$(item).html(val.name)
					})
				},
				deep: true
			},
			timeFromIframe:{
				handler: function(val,oldVal){
					this.currentDom.map((item)=>{
						$(item).html(val.name)
					})
				},
				deep: true
			}
		},
		methods: {
			// 切换头部菜单
			switchMenu(event) {
				let toolID = $(event.target).data('con')

				$(event.target).siblings().removeClass('active')
				$(event.target).addClass('active')

				$(`.head .tool .tool-box`).hide()
				$(`.head .tool .tool-box[id=${toolID}]`).css('display','flex')
			},

			// 打开所有工具的tool-list 下拉年代单
			openToolList(event) {
				event.stopPropagation()
				$(event.target).parents('.tool-item').find('.tool-list').toggle()
			},

			// 给当前选中dom赋值属性  （字体  字号  布局等。。。）
			setCurrentDomWithAttr(attrName, attrValue) {
				this.currentDom.map((item, index) => {
					item.style[attrName] = attrValue
				})
			},

			// 保存文件
			saveFile(event){
				var urlObject = window.URL || window.webkitURL || window;

			    var export_blob = new Blob(['test']);

			    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")

			    var ev = document.createEvent("MouseEvents");
			    ev.initMouseEvent(
		        "click", true, false, window, 0, 0, 0, 0, 0
		        , false, false, false, false, 0, null
		        );

			    save_link.href = urlObject.createObjectURL(export_blob);
			    save_link.download = 'test.xls';
			    save_link.dispatchEvent(ev);
			},

			//在线保存文件
			saveFileOnline(event){
				setTimeout(function(){
					layer.msg('保存成功')
				},300)
			},

			// 打开本地文件
			openFile(event){
				$('#openFile').click()
			},
			// 读取本地文件
			readFile(event){
				var _this = this
				var wb;//读取完成的数据
            	var rABS = false; //是否将文件读取为二进制字符串
            	var obj = event.target

				function fixdata(data) { //文件流转BinaryString
	                var o = "",
	                    l = 0,
	                    w = 10240;
	                for(; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
	                o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
	                return o;
	            }

                if(!obj.files) {
                    return;
                }
                var f = obj.files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    var data = e.target.result;
                    if(rABS) {
                        wb = XLSX.read(btoa(fixdata(data)), {//手动转化
                            type: 'base64'
                        });
                    } else {
                        wb = XLSX.read(data, {
                            type: 'binary'
                        });
                    }
                    //wb.SheetNames[0]是获取Sheets中第一个Sheet的名字
                    //wb.Sheets[Sheet名]获取第一个Sheet的数据

                    // 把转化的json数据绑定到表格的rowHead中
                    _this.xlsJson = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])


                    _this.xlsJson.map((item,index)=>{
//                  	_this.rowHead[index].rowData = [1,2,3,4]
                    	let _index = 0
						for (let key in item) {
							_this.rowHead[index].rowData[_index] = item[key]
							_index++
						}
                    })

                };
                if(rABS) {
                    reader.readAsArrayBuffer(f);
                } else {
                    reader.readAsBinaryString(f);
                }
			},
			// 预览
			preview(event){
				var _this = this
//				layer.open({
//					type: 2,
//					title: '在线打开',
//					shadeClose: true,
//					shade: 0,
//					area: ['600px', '500px'],
//					content: 'pages/choose-time.html', //iframe的url
//					btn:['确认','取消'],
//					yes: (index,layero) => {
//						layer.close(index)
//
//						var body = layer.getChildFrame('body', index)
//
//					}
//				});

				layer.open({
					type:2,
					area: ['90%', '90%'],
					content: 'pages/preview.html',
					btn:['确认','取消'],
					yes: (index, layero) => {
						layer.close(index)
					}

				})
			},

			// 打开 在线
			openFileOnline(event){
				var _this = this
				layer.open({
					type: 2,
					title: '在线打开',
					shadeClose: true,
					shade: 0,
					area: ['600px', '500px'],
					content: 'pages/open-file-online.html', //iframe的url
					btn:['确认','取消'],
					yes: (index,layero) => {
						layer.close(index)
						var body = layer.getChildFrame('body', index)
						$.getJSON('static/json/new-report.json').then(res=>{
							var row1col1 = $('td#row1-col1')
							_this.currentDom = []

							for (let row=1;row<=2;row++){
								for (let col=1;col<=14;col++){
									_this.currentDom.push($(`td#row${row}-col${col} .cell`))

								}
							}
//							_this.currentDom.push($('td#row1-col1 input'))
//							_this.currentDom.push($('td#row2-col13 input'))
							_this.mergeCell()
//							row1col1.attr('colspan',13)
//							row1col1.attr('rowspan',2)
							row1col1.find('.cell').css({
								'text-align':'center',
								'font-size': '18px'
							})
							for (let i=3;i<=4;i++){
								$(`td#row${i}-col1 .cell`).css('background-color','#BCBEC6')
							}
							for (let i=1;i<=14;i++){
								$(`td#row3-col${i} .cell`).css('background-color','#BCBEC6')
							}
							var img = new Image()
							img.src = 'static/img/xiexian.png'
							img.style.width = '100px'
							img.style.height = '30px'

							$('td#row3-col1').find('.cell').hide()
							$('td#row3-col1').append(img)


							_this.rowHead[0].rowData[0] = '福建电网主要水库单库蓄能计算表'

							res.data.map((item,index)=>{
		//                  	_this.rowHead[index].rowData = [1,2,3,4]
		                    	let _index = 0
								for (let key in item) {
									if(index === 0) {
//										_this.rowHead[index+2].rowData[_index] = key
										_this.rowHead[index+2].rowData.splice(_index,1,key)
									}
//									_this.rowHead[index+3].rowData[_index] = item[key]
									_this.rowHead[index+3].rowData.splice(_index,1,item[key])
									_index++
								}
		                    })
							console.log(_this.rowHead)
							this.$nextTick(()=>{
							})
						})
					}
				});
//				_this.rowHead[0].rowData[0] = '1'
			},

			// 复制操作
			copy(event){
				document.execCommand("copy")
			},
			// 剪切
			cut(event){
				document.execCommand("cut")
			},
			// 粘贴
			paste(event){
				document.execCommand('Paste','false',null)
			},

			// 格式刷
			formatBrush(event){
				if (!this.isFormat) {
					this.isFormat = true
					$('#table-body').css('cursor','pointer')
					this.formatList = this.tool
				} else {
					this.isFormat = false
					$('#table-body').css('cursor','auto')
				}

			},

			// 打开选择字体
			openFamilyList(event) {
				event.stopPropagation()
				$(event.target).parents('.family').find('.tool-list').toggle()
			},
			// 打开字号选择器
			openSizeList(event) {
				event.stopPropagation()
				$(event.target).parents('.size').find('.tool-list').toggle()
			},
			// 打开选择边框
			openBorder(event) {
				event.stopPropagation()
				$(event.target).parents('.border').find('.tool-list').toggle()
			},

			// 选择字体
			choseFontFamily(event) {
				this.tool.fontFamily.name = $(event.target).text()
				this.tool.fontFamily.value = $(event.target).data('family')
				this.setCurrentDomWithAttr('font-family', this.tool.fontFamily.value)
			},
			// 选择字号
			choseFontSize(event) {
				this.tool.fontSize = $(event.target).text() + 'px'
				this.setCurrentDomWithAttr('fontSize', this.tool.fontSize)
			},
			// 快捷键 增加字号
			addFontSize(event) {
				this.tool.fontSize = this.tool.fontSize*1+1
				this.setCurrentDomWithAttr('fontSize', this.tool.fontSize + 'px')
			},
			// 快捷键 减小字号
			minusFontSize(event) {
				this.tool.fontSize -= 1
				this.setCurrentDomWithAttr('fontSize', this.tool.fontSize + 'px')
			},
			// 加粗
			choseBold(event) {
				event.stopPropagation()
				if($(event.target).hasClass('active')) {
					this.tool.fontWeight = 300
				} else {
					this.tool.fontWeight = 600
				}
				this.setCurrentDomWithAttr('fontWeight', this.tool.fontWeight)
				$(event.target).toggleClass('active')
			},
			// 斜体
			choseItalic(event) {
				if($(event.target).hasClass('active')) {
					this.tool.fontStyle = 'normal'
				} else {
					this.tool.fontStyle = 'italic'
				}
				this.setCurrentDomWithAttr('font-style', this.tool.fontStyle)
				$(event.target).toggleClass('active')
			},
			// 下划线
			choseUnderline(event) {
				if($(event.target).hasClass('active')) {
					this.tool.textDecoration = 'none'
				} else {
					this.tool.textDecoration = 'underline '
				}
				this.setCurrentDomWithAttr('textDecoration', this.tool.textDecoration)
				$(event.target).toggleClass('active')
			},
			// 取消边框
			cancelBorder(event) {
				this.tool.border = 'none'
				this.setCurrentDomWithAttr('border', this.tool.border)
			},
			// 添加四周边框
			addBorder(event) {
				this.tool.border = 'solid 1px #333'
				this.setCurrentDomWithAttr('border', this.tool.border)
			},
			// 添加左边框
			leftBorder(event) {
				this.tool.borderLeft = 'solid 1px #333'
				this.setCurrentDomWithAttr('borderLeft', this.tool.borderLeft)
			},
			// 添加右边框
			rightlBorder(event) {
				this.tool.borderRight = 'solid 1px #333'
				this.setCurrentDomWithAttr('borderRight', this.tool.borderRight)
			},
			// 添加上边框
			topBorder(event) {
				this.tool.borderTop = 'solid 1px #333'
				this.setCurrentDomWithAttr('borderTop', this.tool.borderTop)
			},
			// 添加下边框
			bottomBorder(event) {
				this.tool.borderBottom = 'solid 1px #333'
				this.setCurrentDomWithAttr('borderBottom', this.tool.borderBottom)
			},

			// 布局
			// 上居中
			flexTop(event) {
				this.tool.alignItems = 'flex-start'
				this.setCurrentDomWithAttr('alignItems', this.tool.alignItems)
			},
			// 垂直居中
			flexMiddle(event) {
				this.tool.alignItems = 'center'
				this.setCurrentDomWithAttr('alignItems', this.tool.alignItems)
			},
			// 下居中
			flexBottom(event) {
				this.tool.alignItems = 'flex-end'
				this.setCurrentDomWithAttr('alignItems', this.tool.alignItems)
			},
			// 左居中
			flexLeft(event) {
				this.tool.textAlign = 'left'
				this.setCurrentDomWithAttr('textAlign', this.tool.textAlign)
			},
			// 水平居中
			flexCenter(event) {
				this.tool.textAlign = 'center'
				this.setCurrentDomWithAttr('textAlign', this.tool.textAlign)
			},
			// 右居中
			flexRight(event) {
				this.tool.textAlign = 'right'
				this.setCurrentDomWithAttr('textAlign', this.tool.textAlign)
			},
			// 两边布局
			flexBetween(event) {
				this.tool.textAlign = 'justify'
				this.setCurrentDomWithAttr('textAlign', this.tool.textAlign)
			},

			// 合并单元格
			mergeCell(event) {
				var maxCol = $(this.currentDom[0]).data('col')*1
				var minCol = $(this.currentDom[0]).data('col')*1
				var maxRow = $(this.currentDom[0]).data('row')*1
				var minRow = $(this.currentDom[0]).data('row')*1
				var areaCol = 0
				var areaRow = 0
				// 获取选中单元格索引最大与最小值
				this.currentDom.map((item)=>{
					maxCol = maxCol>$(item).data('col')*1 ? maxCol : $(item).data('col')*1
					minCol = minCol<$(item).data('col')*1 ? minCol : $(item).data('col')*1
					maxRow = maxRow>$(item).data('row')*1 ? maxRow : $(item).data('row')*1
					minRow = minRow<$(item).data('row')*1 ? minRow : $(item).data('row')*1
				})

				areaCol = maxCol - minCol + 1
				areaRow = maxRow - minRow + 1

				// 最小的单元格跨行与跨列处理    当前选中单元格保存处理过得元素
				let currentDom_tem = []
				this.currentDom.map((item,index)=>{
					if($(item).data('col') === minCol && $(item).data('row') === minRow){
						$(item).parents('.cell-td').attr('colspan',areaCol)
						$(item).parents('.cell-td').attr('rowspan',areaRow)
						currentDom_tem.push(item)
					} else {
						$(item).parent().hide()
					}
				})
				this.currentDom = currentDom_tem
			},
			// 拆分单元格
			splitCell(event){
				var cols,rows
				if(this.currentDom.length===1){
					cols = $(this.currentDom[0]).attr('colspan')
					rows = $(this.currentDom[0]).attr('rowspan')
					$(this.currentDom[0]).parent().attr('colspan',1)
					$(this.currentDom[0]).parent().attr('rowspan',1)
					$('td').show()
				}
			},

			// 选择函数
			choseFunction(event){
				layer.open({
					type: 2,
					title: '选择公式',
					shadeClose: true,
					shade: 0,
					area: ['600px', '500px'],
					content: 'pages/function.html', //iframe的url
					btn:['确认','取消'],
					yes: (index,layero) => {
						var body = layer.getChildFrame('body', index)
						this.currentDom.map((item)=>{
							let row = $(item).data('row') - 1
							let col = $(item).data('col') - 1
							console.log(this.rowHead[row].rowData)
							this.rowHead[row].rowData.splice(col,1,body.find('.functionName').val())
						})
//						this.functionFromIframe.name = body.find('.functionName').val()
						layer.close(index)
					}
				});
			},

			// 绑定属性
			attrBind(event,name){
				var url = ''
				if(name){
					url = `pages/attr-bind.html?name=${name}`
				} else {
					url = `pages/attr-bind.html`
				}
				layer.open({
					type: 2,
					title: '绑定属性',
					shadeClose: true,
					shade: 0,
					area: ['500px', '500px'],
					content: url, //iframe的url
					btn:['确认','取消'],
					success: function (layero, index){
						var body = layer.getChildFrame('body', index)
						body.find("#name").val(name)

					},
					yes: (index,layero) => {
						var body = layer.getChildFrame('body', index)
						this.currentDom.map((item)=>{
							let row = $(item).data('row') - 1
							let col = $(item).data('col') - 1
							this.rowHead[row].rowData.splice(col,1,body.find('.attrName').val())
//							this.rowHead[row].rowData[col] = body.find('.attrName').val()
						})
//						this.attrFromIframe.name = body.find('.attrName').val()
                        layer.close(index)
					}
				});
			},

			// 绑定值
			valueBind(event,name){
				var url = ''
				if(name){
					url = `pages/value-bind.html?name=${name}`
				} else {
					url = `pages/value-bind.html`
				}
				layer.open({
					type: 2,
					title: '绑定值',
					shadeClose: true,
					shade: 0,
					area: ['490px', '500px'],
					content: url, //iframe的url
					btn:['确认','取消'],
					success: function (layero, index){
						var body = layer.getChildFrame('body', index)
						body.find("#name").val(name)

					},
					yes: (index,layero) => {
						var body = layer.getChildFrame('body', index)
						this.currentDom.map((item)=>{
							let row = $(item).data('row') - 1
							let col = $(item).data('col') - 1
							this.rowHead[row].rowData.splice(col,1,body.find('.valueName').val())
//							this.rowHead[row].rowData[col] = body.find('.valueName').val()
						})
//						this.valueFromIframe.name = body.find('.valueName').val()
						layer.close(index)
					}
				});
			},

			// 时间绑定
			timeBind(event,name){
				var url = ''
				if(name){
					url = `pages/time-bind.html?name=${name}`
				} else {
					url = `pages/time-bind.html`
				}
				layer.open({
					type: 2,
					title: '绑定时间',
					shadeClose: true,
					shade: 0,
					area: ['490px', '500px'],
					content: url, //iframe的url
					btn:['确认','取消'],
					success: function (layero, index){
						var body = layer.getChildFrame('body', index)
						body.find("#name").val(name)
					},
					yes: (index,layero) => {
						var body = layer.getChildFrame('body', index)
						this.currentDom.map((item)=>{
							let row = $(item).data('row') - 1
							let col = $(item).data('col') - 1
							this.rowHead[row].rowData.splice(col,1,body.find('.timeName').val())
//							this.rowHead[row].rowData[col] = body.find('.timeName').val()
						})
//						this.timeFromIframe.name = body.find('.timeName').val()
                       layer.close(index)
					}
				});
			},

			// 表格滚动  head和left随之滚动
			tableScroll(event) {
				let top = event.target.scrollTop;
				let left = event.target.scrollLeft;
				document.getElementById("table-left").scrollTop = top;
				document.getElementById("table-head").scrollLeft = left;
			},

			// 点击单元格
			cellClick(event) {
				var _this = this
				var row = $(event.target).data('row')*1
				var col = $(event.target).data('col')*1
				this.rowHead.map((item,index)=>{
					if(item.id === row){
						return item.active = true
					}
					item.active = false
				})
				this.colHead.map((item,index)=>{
					if(item.id === col){
						return item.active = true
					}
					item.active = false
				})
				this.currentDom = []
				this.currentDom.push(event.target)

				if(_this.isFormat){
					// 格式刷模式
					_this.currentDom.map((item)=>{
						for (let key in _this.formatList){
							if(key==='fontFamily'){
								item.style[key] = _this.formatList[key]['value']
							} else {
								item.style[key] = _this.formatList[key]
							}
						}
					})
				}
			}
		}
	})
	var content = document.getElementById('table-body')

	selectDomByDrag()
	//	$.selectDomByDrag(content,'cell')
})
</script>
</body>
</html>