使用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='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},...]
记录编程的点滴,体会学习的乐趣
原文地址:https://www.cnblogs.com/AduBlog/p/13594263.html