1. 程式人生 > >通過js為html動態建立表格

通過js為html動態建立表格

$(function () {
$.ajax({
type: "POST",
    url: "../sys/sysMessage/messageList",
    data: "",
    success: function(r){
    initList(r);
    }
});
});


function initList(r){
debugger;
msgJson=r.msgList;
//eval('(' + str + ')')
msgJson = eval('(' + msgJson + ')');
var tabNode = document.getElementById('table1'); //取得自定義的表物件
var thNode = tabNode.createTHead();
var trNode=thNode.insertRow(); 
var obj1 = document.createElement("TH");
var obj2 = document.createElement("TH");
var obj3 = document.createElement("TH");
obj1.style.cssText="text-align: center;";
obj2.style.cssText="text-align: center;";
obj3.style.cssText="text-align: center;";




obj1.innerHTML=" <div class='th-inner sortable both'>"+sysMessageField.model+"</div>";
obj2.innerHTML=" <div class='th-inner sortable both'>"+sysMessageField.waitSubmit+"</div>";
obj3.innerHTML=" <div class='th-inner sortable both'>"+sysMessageField.waitPass+"</div>";


trNode.appendChild(obj1);
trNode.appendChild(obj2);
trNode.appendChild(obj3);
var tbNode = document.createElement("tbody");
tabNode.appendChild(tbNode);
for (var i = 0; i < msgJson.length; i++) {
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
td1.style.cssText="white-space: nowrap; text-align: center; ";
td2.style.cssText="white-space: nowrap; text-align: center; ";
td3.style.cssText="white-space: nowrap; text-align: center; ";


var mk = msgJson[i].moduleName;
var waitSubmit = msgJson[i].waitSubmit;
var waitPass = msgJson[i].waitPass;
var hrefSubmit="";
var hrefPass = "";

var trNode1=tabNode.insertRow();
if(msgJson[i].moduleId==1){
mk=sysMessageField.advmaterial;
hrefSubmit = "../adv/advmaterial.html?status=0";
hrefPass = "../adv/advmaterial.html?status=1";
}else if(msgJson[i].moduleId==2){
mk=sysMessageField.advposition;
hrefSubmit = "../adv/advposition.html?status=0";
hrefPass = "../adv/advposition.html?status=1";
}else if(msgJson[i].moduleId==3){
mk=sysMessageField.advdispatchstrategy;
hrefSubmit = "../adv/advdispatchstrategy.html?auditStatus=0";
hrefPass = "../adv/advdispatchstrategy.html?auditStatus=1";
}else if(msgJson[i].moduleId==4){
mk=sysMessageField.advcreative;
hrefSubmit = "../adv/advcreative.html?status=0";
hrefPass = "../adv/advcreative.html?status=1";
}else if(msgJson[i].moduleId==5){
mk=sysMessageField.advschedule;
hrefSubmit = "../adv/advschedule.html?status=0";
hrefPass = "../adv/advschedule.html?status=1";
}
//td1.innerHTML = "<a href=\"javascript:Tab.addTab(\'測試的\', \'../bus/busprogram.html\')\">"+mk+"</a>"; 
td1.innerHTML = "<span style='white-space:nowrap'>"+mk+"</span>"; 
td2.innerHTML = "<span style='white-space:nowrap'><a href='"+hrefSubmit+"'>"+waitSubmit+"</a></span>";
td3.innerHTML = "<span style='white-space:nowrap'><a href='"+hrefPass+"'>"+waitPass+"</a></span>";
trNode1.appendChild(td1);
trNode1.appendChild(td2);
trNode1.appendChild(td3);




tbNode.appendChild(trNode1);



}
}

相關推薦

通過jshtml動態建立表格

$(function () {$.ajax({type: "POST",    url: "../sys/sysMessage/messageList",    data: "",    success: function(r){    initList(r);    }}

前端動態建立表格並獲取表格的所有內容陣列

var arr=[]; //添加藥品 $("#btn1").click(function (){ if($("#name").val()=="" ||$("#num").val()=="" || $("#spec").val()=="

js 動態建立表格

我們利用JS操作DOM的能力,動態建立一張表格,可以動態增加行,刪除行,複選框有全選的功能!有以下3個檔案: 1.     dom.css .tbl {    font-size: 12px;    border: 1px solid #ebebee; }

js原生動態建立表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini

jq動態建立表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> &l

JS匯出html的table表格

jsp的html的內容 如下,我的這個是使用了jstl標籤形成的table       <span id="Button1" onclick="javascript:HtmlExportToExcel('PanelExcel')">匯出ex

案例動態建立表格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input

QT通過JSHTML的互動

標頭檔案加入 QT += core gui webenginewidgets webchannel 通過QWebChannel與JS互動原理 QWebEnginePage *page = new QWebEnginePage(this); webView->setPage

QT通過JSHTML的交互

mit 一個 widget web url .get 連接 conn cor 頭文件加入 QT += core gui webenginewidgets webchannel 通過QWebChannel與JS交互原理 QWebEnginePage *pag

JavaScript動態建立表格

請輸入行數: <input type="text" value="3" id="rows"> <br> 請輸入列數: <input type="text" value="4" id="cols"> <br>

JS動態引入js、CSS動態建立script/link/style標籤 JS動態引入js、CSS動態建立script/link/style標籤

JS動態引入js、CSS動態建立script/link/style標籤 轉:https://www.cnblogs.com/henuyuxiang/p/6215706.html 一.動態建立link方式 我們可以使用link的方式.如下程式碼所示.

html dom建立表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s

網易webapp 通過js計算html的font-size

設計稿寬度為 750px,取一個100px的font-size為參照,裝置寬度就可以設定為 7.5rem; 計算rem就可以直接除以100,如:100px = 1rem var Dpr = 1, uAgent = window.navigator.userAgent;

AJAX動態建立表格例項

[size=medium]初學AJAX,把一些學習的點滴記錄下來!以備以後參考[/size]<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="utf

通過JSHTML元素增加、刪除和獲取屬性內容

1.通過ID或者其他元素找到要處理的HTML物件:(舉例通過ID) var obj=document.getElementById('id'); 2.操作此物件 新增屬性:obj

使用JQuery動態建立表格

知識點: 使用jq中html()建立元素,append()新增節點,remove()刪除節點,類方法:addClass()和removeClass()方法等 <!DOCTYPE html>

html動態生成表格資料

<table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce" onmouseover="changeto()" onmouseout="changeback()">

FineUIMvc隨筆(1)動態建立表格

宣告:FineUIMvc(基礎版)是免費軟體,本系列文章適用於基礎版。 《FineUIMvc隨筆》目錄 ... 使用者需求 使用者希望實現動態建立表格列,在 WebForms 中,我們通過在 Page_Init 中建立列來實現: 但

通過js頁面中的checkbox賦值(二)

function checkTheBox(typeStr){ var cbArray = new Array; cbArray = typeStr.split(",

動態建立表格;驗證資料,全選和反選,批量刪除

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <title></title>         <