在瀏覽器裏做出EXCEL的效果，復制、粘貼、設置公式、雙擊編輯等效果，如果自己開發的話，比較麻煩，建議使用成熟的插件。這裏介紹使用智表ZCELL插件，實現用戶快捷操作。

首先下載插件，引入到頁面中，一共4個文件，包括jquery 基礎文件，插件和樣式文件。

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<script type="text/javascript" src="zcell/ZCell.min.js"></script>
<script type="text/javascript" src="zcell/ZCell.register.js"></script>

 <link rel="stylesheet" type="text/css" href="zcell/ZCell.css" />

文件引入後，界面加載，準備數據

//頁面加載時，執行
var zcell1;

//準備數據源
var jsondata = [//四行五列
["", "", "", "", "", ""],
["", "", "", "", "", ""],
["", "", "", "", "", ""],
["■合並單元格", "單位", "綜合取值", "費用", "E1", "F1"],
["", "", "", "機械費", "材料費", "人工費"],
["■計算公式", "合計", "", "30", "40", "50","公式支持加減乘除和自定義函數"],
["", "分公司1", "", "300", "5.2375", "28.2345",""],
["", "分公司2", "", "600", "13.232", "58.14298"]

];

　　然後在頁面加載時，生成表格：

  //創建JSCELL，指明承載容器
            zcell1 = new ZCell(document.getElementById("cellContainer"));
            //創建表，並指定列，行數
            zcell1.InserSheet(0,10,22);

　　這是，基本表已經有了，是個空表。我們可以在上面設置數據，設置數據分兩種方式，一種通過數據源批量加載：

  //加載數據
            zcell1.GetSheet(0).LoadJsonData(jsondata);

　　還可以單獨設置某個單元格值：

  //設置單元格文本
            zcell1.GetSheet(0).SetCellValue(1,3,"下面請體驗：");

　　插件的功能比較多，可以設置數據，公式等，支持復制、黏貼、雙擊編輯等效果，這裏不再逐一介紹，感興趣的自行搜索吧。

教你在瀏覽器裏做出EXCEL的效果