[英]make cell contents of a dynamically generated table a hyperlink
我有一個像這樣的 json 數據:它存儲從 vip 生成的數據。
myContacts=
[
{
"owner":"swapneil",
"fleet_name":"RancorService",
"creation_date":"09-03-2020",
"environment":"RancorService/JP",
"vip_port":80,
"partition":"YES",
"protocol":"HTTP",
"monitor":"Consistent (http-ping)",
"lbset":"Consistent",
"predictor":"Consistent",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (36)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RancorService",
"creation_date":"09-03-2020",
"environment":"RancorService/JP",
"vip_port":443,
"partition":"YES",
"protocol":"TCP",
"monitor":"NC",
"lbset":"NC (>1 Vip's in same LB)",
"predictor":"NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (9000)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Non-Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionAwareBaseLayer",
"creation_date":"09-03-2020",
"environment":"RegionAwareBaseLayer/NA",
"vip_port":80,
"partition":"YES",
"protocol":"HTTP",
"monitor":"Consistent (http-ping)",
"lbset":"Consistent",
"predictor":"Consistent",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (56)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"NC : >1 VIP's MISSING TIER-1 TAG",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionAwareBaseLayer",
"creation_date":"09-03-2020",
"environment":"RegionAwareBaseLayer/NA",
"vip_port":443,
"partition":"NO",
"protocol":"TCP",
"monitor":"Consistent (ssl-ping)",
"lbset":"Consistent",
"predictor":"NC :SHOULD BE ROUNDROBIN",
"spillover":"Consistent",
"vip_cka":"NC : SHOULD BE DISABLED (YES)",
"max_conns":"Consistent : (9000)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionMappingService",
"creation_date":"09-03-2020",
"environment":"RegionMappingService/EU",
"vip_port":80,
"partition":"YES",
"protocol":"HTTP",
"monitor":"Consistent (http-ping)",
"lbset":"Consistent",
"predictor":"Consistent",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (16)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionMappingService",
"creation_date":"09-03-2020",
"environment":"RegionMappingService/EU",
"vip_port":443,
"partition":"YES",
"protocol":"TCP",
"monitor":"NC",
"lbset":"NC (>1 Vip's in same LB)",
"predictor":"NC :SHOULD BE ROUNDROBIN",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (9000)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Non-Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionAwareBaseLayer",
"creation_date":"09-03-2020",
"environment":"RABLIndexer/EU",
"vip_port":80,
"partition":"NO",
"protocol":"HTTP",
"monitor":"Consistent (http-ping)",
"lbset":"Consistent",
"predictor":"Consistent",
"spillover":"Consistent",
"vip_cka":"NC : SHOULD BE DISABLED (YES)",
"max_conns":"MAX-CONNS WITH DEFAULT VALUE : 15",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Non-Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionMappingService",
"creation_date":"09-03-2020",
"environment":"RegionMappingService/JP",
"vip_port":80,
"partition":"YES",
"protocol":"HTTP",
"monitor":"NC",
"lbset":"Consistent",
"predictor":"Consistent",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (40)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
},
{
"owner":"swapneil",
"fleet_name":"RegionMappingService",
"creation_date":"09-03-2020",
"environment":"RegionMappingService/JP",
"vip_port":443,
"partition":"YES",
"protocol":"TCP",
"monitor":"NC",
"lbset":"NC (>1 Vip's in same LB)",
"predictor":"NC :SHOULD BE ROUNDROBIN",
"spillover":"Consistent",
"vip_cka":"Consistent :(NO)",
"max_conns":"Consistent : (9000)",
"vip_cipher":null,
"vip_cip":"Consistent",
"vip_tier":"Consistent(Non-Tier1)",
"vip_siloed":"Consistent(Non-SILOED)",
"vip_globalized":"Consistent(Non-GLOBALIZED)",
"vip_dedicated":"Consistent(Non-DEDICATED_VIP)",
"vip_retail_tag":"Consistent(RETAIL_TAG)",
"down_stat_flush":"Consistent :(ENABLED)",
"vip_type":"Consistent (BACKEND)",
"server_port":"Consistent",
"vip_server_timeout":"Consistent",
"vip_client_timeout":"Consistent",
"persistent_method":"Consistent",
"persistent_timeout":"Consistent"
}
]
我有一個 javascript function 可以將其轉換為表格。
function generateDynamicTable(myContacts){
var noOfContacts = myContacts.length;
if(noOfContacts>0){
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
table.style.width = '50%';
table.setAttribute('border', '1');
table.setAttribute('cellspacing', '0');
table.setAttribute('cellpadding', '5');
// retrieve column header ('Name', 'Email', and 'Mobile')
var col = []; // define an empty array
for (var i = 0; i < noOfContacts; i++) {
for (var key in myContacts[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE TABLE HEAD .
var tHead = document.createElement("thead");
// CREATE ROW FOR TABLE HEAD .
var hRow = document.createElement("tr");
// ADD COLUMN HEADER TO ROW OF TABLE HEAD.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
hRow.appendChild(th);
}
tHead.appendChild(hRow);
table.appendChild(tHead);
// CREATE TABLE BODY .
var tBody = document.createElement("tbody");
// ADD COLUMN HEADER TO ROW OF TABLE HEAD.
for (var i = 0; i < noOfContacts; i++) {
var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD
for (var j = 0; j < col.length; j++) {
var td = document.createElement("td");
td.innerHTML = myContacts[i][col[j]];
bRow.appendChild(td);
}
tBody.appendChild(bRow)
}
table.appendChild(tBody);
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("demo");
divContainer.appendChild(table);
}
}
現在我希望表格的監控列中的這些單元格成為另一個 html 頁面的超鏈接,該頁面具有監控值“NC”。 如果單擊該超鏈接時會生成彈出框,那就太好了。 但這並不是那么需要。 只有超鏈接可以。
代替文本,append 錨定到 TD,檢查以下:
var myContacts = [{ "owner": "swapneil", "fleet_name": "RancorService", "creation_date": "09-03-2020", "environment": "RancorService/JP", "vip_port": 80, "partition": "YES", "protocol": "HTTP", "monitor": "Consistent (http-ping)", "lbset": "Consistent", "predictor": "Consistent", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (36)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RancorService", "creation_date": "09-03-2020", "environment": "RancorService/JP", "vip_port": 443, "partition": "YES", "protocol": "TCP", "monitor": "NC", "lbset": "NC (>1 Vip's in same LB)", "predictor": "NC (leastconns,ROUNDROBINSHOULD BE ROUNDROBIN)", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (9000)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Non-Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionAwareBaseLayer", "creation_date": "09-03-2020", "environment": "RegionAwareBaseLayer/NA", "vip_port": 80, "partition": "YES", "protocol": "HTTP", "monitor": "Consistent (http-ping)", "lbset": "Consistent", "predictor": "Consistent", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (56)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "NC: >1 VIP's MISSING TIER-1 TAG", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionAwareBaseLayer", "creation_date": "09-03-2020", "environment": "RegionAwareBaseLayer/NA", "vip_port": 443, "partition": "NO", "protocol": "TCP", "monitor": "Consistent (ssl-ping)", "lbset": "Consistent", "predictor": "NC:SHOULD BE ROUNDROBIN", "spillover": "Consistent", "vip_cka": "NC: SHOULD BE DISABLED (YES)", "max_conns": "Consistent: (9000)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionMappingService", "creation_date": "09-03-2020", "environment": "RegionMappingService/EU", "vip_port": 80, "partition": "YES", "protocol": "HTTP", "monitor": "Consistent (http-ping)", "lbset": "Consistent", "predictor": "Consistent", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (16)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionMappingService", "creation_date": "09-03-2020", "environment": "RegionMappingService/EU", "vip_port": 443, "partition": "YES", "protocol": "TCP", "monitor": "NC", "lbset": "NC (>1 Vip's in same LB)", "predictor": "NC:SHOULD BE ROUNDROBIN", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (9000)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Non-Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionAwareBaseLayer", "creation_date": "09-03-2020", "environment": "RABLIndexer/EU", "vip_port": 80, "partition": "NO", "protocol": "HTTP", "monitor": "Consistent (http-ping)", "lbset": "Consistent", "predictor": "Consistent", "spillover": "Consistent", "vip_cka": "NC: SHOULD BE DISABLED (YES)", "max_conns": "MAX-CONNS WITH DEFAULT VALUE: 15", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Non-Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionMappingService", "creation_date": "09-03-2020", "environment": "RegionMappingService/JP", "vip_port": 80, "partition": "YES", "protocol": "HTTP", "monitor": "NC", "lbset": "Consistent", "predictor": "Consistent", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (40)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" }, { "owner": "swapneil", "fleet_name": "RegionMappingService", "creation_date": "09-03-2020", "environment": "RegionMappingService/JP", "vip_port": 443, "partition": "YES", "protocol": "TCP", "monitor": "NC", "lbset": "NC (>1 Vip's in same LB)", "predictor": "NC:SHOULD BE ROUNDROBIN", "spillover": "Consistent", "vip_cka": "Consistent:(NO)", "max_conns": "Consistent: (9000)", "vip_cipher": null, "vip_cip": "Consistent", "vip_tier": "Consistent(Non-Tier1)", "vip_siloed": "Consistent(Non-SILOED)", "vip_globalized": "Consistent(Non-GLOBALIZED)", "vip_dedicated": "Consistent(Non-DEDICATED_VIP)", "vip_retail_tag": "Consistent(RETAIL_TAG)", "down_stat_flush": "Consistent:(ENABLED)", "vip_type": "Consistent (BACKEND)", "server_port": "Consistent", "vip_server_timeout": "Consistent", "vip_client_timeout": "Consistent", "persistent_method": "Consistent", "persistent_timeout": "Consistent" } ]; function generateDynamicTable(myContacts) { var noOfContacts = myContacts.length; if (noOfContacts > 0) { // CREATE DYNAMIC TABLE. var table = document.createElement("table"); table.style.width = '50%'; table.setAttribute('border', '1'); table.setAttribute('cellspacing', '0'); table.setAttribute('cellpadding', '5'); // retrieve column header ('Name', 'Email', and 'Mobile') var col = []; // define an empty array for (var i = 0; i < noOfContacts; i++) { for (var key in myContacts[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } // CREATE TABLE HEAD. var tHead = document.createElement("thead"); // CREATE ROW FOR TABLE HEAD. var hRow = document.createElement("tr"); // ADD COLUMN HEADER TO ROW OF TABLE HEAD. for (var i = 0; i < col.length; i++) { var th = document.createElement("th"); th.innerHTML = col[i]; hRow.appendChild(th); } tHead.appendChild(hRow); table.appendChild(tHead); // CREATE TABLE BODY. var tBody = document.createElement("tbody"); // ADD COLUMN HEADER TO ROW OF TABLE HEAD. for (var i = 0; i < noOfContacts; i++) { var bRow = document.createElement("tr"); // CREATE ROW FOR EACH RECORD for (var j = 0; j < col.length; j++) { var td = document.createElement("td"); if (col[j] == 'monitor' && myContacts[i][col[j]] == 'NC') { var a = document.createElement('a'); var linkText = document.createTextNode("Ext. link"); a.appendChild(linkText); a.title = "Check details"; a.href = "http://example.com"; td.appendChild( a ); } else { td.innerHTML = myContacts[i][col[j]]; }; bRow.appendChild(td); } tBody.appendChild(bRow) } table.appendChild(tBody); // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. var divContainer = document.getElementById("demo"); divContainer.appendChild(table); } }; generateDynamicTable(myContacts);
<div id="demo"></div>
也在JSFiddle上。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.