table+ajax加载数据

//ajax加载notice
    $(function() {
        //${pageContext.request.contextPath}/
        /**
        var res = [
            {noticeTitle:'必答题',noticeDate:'2019-08-09'},
            {noticeTitle:'必答题',noticeDate:'2019-08-09'},
            {noticeTitle:'必答题',noticeDate:'2019-08-09'},
            {noticeTitle:'必答题',noticeDate:'2019-08-09'},
            {noticeTitle:'必答题',noticeDate:'2019-08-09'}
        ];
        loadNotice(res);
        */
        url = "getDatas.do";
        $.ajax({
            url : url,
            type : "post",
            dateType : "text",
            success : function(res) {
                loadNotice(res); //加载notice                    
            }
        });
        
    });
 
    //加载notice
    function loadNotice(res) {
        var tBody = $("#noticeTable").find("tbody");
        for ( var index in res) {
            //新建一行
            var newTr = $("<tr></tr>");
            //新建节点
            var newsTd = $("<td></td>");
            var dateTd = $("<td></td>");
            //新建超链接
            var newsA = $("<a></a>");
 
            //添加内容和时间
            var noticeTitle = res[index].noticeTitle;
            var noticeDate = res[index].noticeDate;
            /* alert(noticeTitle);
            alert(noticeDate); */
            newsA.text(noticeTitle);
            dateTd.text(noticeDate);
 
            //添加数据td-tr-tbody
            newsTd.append(newsA);
            newTr.append(newsTd);
            newTr.append(dateTd);
            tBody.append(newTr);
        }
    }
<table id="noticeTable" class="table table-striped table-hover">
				<tr>
					<th class="col-md-3">活动标题</th>
					<th class="col-md-1">发布时间</th>
				</tr>
			</table>

猜你喜欢

转载自www.cnblogs.com/XuanZP/p/11713830.html