ajax动态生成表格,增加时间格式化

页面效果如下


js代码如下:

<script type="text/javascript">
        $(document).ready(function () {
            top.document.getElementById("jysd").className = "table_navigate_click";
            top.document.getElementById("ylxx").className = "";
            top.document.getElementById("swxx").className = "";
            //iframe默认高度为0
            top.document.getElementById("iframe_list").height = 0;
            $.ajax({
                type: "get",
                dataType: "text",
                url: "../ShuiWu/GetJSDData",
                async: false, //修改Ajax请求为同步
                success: function (data) {
                    if (data != "") {
                        // 由JSON字符串转换为JSON对象
                        var dataJSON = eval("(" + data + ")");
                        var len = dataJSON.length;


                        var tb_list = document.getElementById("table_list");
                        for (var i = 0; i < len; i++) {
                            var row = document.createElement("tr");
                            var col1 = document.createElement("td");
                            col1.className = "table_list_td1";
                            col1.align = "left";
                            col1.setAttribute("style", "padding-left:8px;");
                            col1.innerHTML = dataJSON[i].dlmc;
                            //列添加到行
                            row.appendChild(col1);


                            var col2 = document.createElement("td");
                            col2.innerHTML = dataJSON[i].depth.toFixed(2);
                            row.appendChild(col2);


                            var col3 = document.createElement("td");
                            col3.innerHTML = new Date(dataJSON[i].jcsj.replace(/-/g, "/")).Format("MM/dd HH:mm"); //replace正则表达式替换"-"
                            row.appendChild(col3);


                            //行添加到table
                            tb_list.appendChild(row);
                        }
                        //iframe根据内容自适应高度
                        top.document.getElementById("iframe_list").height = document.body.scrollHeight;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        });


        //时间格式化
        Date.prototype.Format = function (fmt) {
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "H+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>

html页面代码:

<div>
        <table id="table_list" cellpadding="0" cellspacing="0" class="table_list">
            <tr class="table_list_tr_head">
                <td>积水点名称</td>
                <td style="width:16%;">深度(cm)</td>
                <td style="width:30%;">监测时间</td>
            </tr>
        </table>
    </div>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值