使用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},...]