使用Excel快速生成html表格

一般情況下，頁面的表格內容都比較簡單，但是遇到有復雜表頭，而且項數非常多的時候，手動寫html非常麻煩耗時

這時候，只需要利用Excel就行了，在Excel中畫出要求的表格，直接另存為html即可。

 

如果只想要表格，拷貝里面的table。但是此時拷貝的html表格是不可編輯的，因為沒有輸入框。

加入想要編輯表格，方法有兩種。

 

一種是直接在每個td里面添加input輸入框，不過樣式很丑，因為不能保證每個input高度、寬度和td一致，如果想要一致，必須每個td的input都單獨設置樣式

 

還有一種是將每個td的坐標做成數組，只要點擊了表格時，td坐標滿足了數組里面的指標，就顯示一個input，這樣哪怕樣式不一樣，也只是一瞬間，而且只顯示一個input，

失去焦點之后表格樣式恢復，稍微好看一點。不過就是坐標數組比較難做。設置坐標數組的原因是防止表頭被修改

 

下面具體演示以下第二種操作

 

$('table td').click(function () {
                var td = $(this);
                //alert(td.parent().index()+":"+td.index());

                var m = {
                    "row": td.parent().index(),
                    "col": td.index()
                }

                if (GetCellIsEdit(m)) {
                    var str = "<input type='text' id='datainput' name='test' style='width:90%;height:18px;' />";
                    td.html(str);
                    $("#datainput").focus();
                    $("#datainput").blur(function () {
                        //失去焦點之后賦值，並傳遞給后端保存
                        var val = $(this).val();
                        td.empty();
                        td.html(val);    
                        //ajax操作...
                    })
                  }

 function GetCellIsEdit(obj) {
                for (var i = 0; i < arr.length; i++) {
                    if (arr[i].row == obj.row && arr[i].col == obj.col) {
                        return true;
                        break;
                    }
                }

                return false;
            }

var arr=
[{"row":4,"col":2},{"row":4,"col":3},{"row":4,"col":4},...]