• 使用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},...]
    记录编程的点滴,体会学习的乐趣
  • 相关阅读:
    GIT基本概念和用法总结
    SELECT联动
    PHP无级分类续及搜索功能,分组分页
    PHP管理员登陆、验证与添加(前端验证)
    PHP手写cms 缓存Cache
    将本地文件上传到Ftp上的一些操作【转】
    SQL对时间的处理
    SQL Server游标的使用【转】
    修改数据表字段长度
    Web.Config加密【转】
  • 原文地址:https://www.cnblogs.com/AduBlog/p/13594263.html
Copyright © 2020-2023  润新知