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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM