页面效果如下

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>