javascript - 将动态生成的表格的单元格内容设为超链接

标签 javascript

我有一个像这样的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 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);

        }
        }

现在我希望表的监视器列中的那些单元格成为指向另一个具有监视器值 'NC' 的 html 页面的超链接。 如果单击该超链接时生成弹出框，那就太好了。 但这并不是那么需要。只有超链接才可以。

最佳答案

将 anchor 附加到 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 .

关于javascript - 将动态生成的表格的单元格内容设为超链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61319701/

上一篇：javascript - 以编程方式触发键盘快捷键，例如在 Gmail 中

下一篇：javascript - 如何将Javascript代码插入到R中的Leaflet中，即使双击也不会触发单击

相关文章：

javascript - Promises polyfill 是否在 Google Closure Compiler 20161024 中包含 all()？

javascript - 如何在 Redux 中向数组添加项目？

javascript - JSON 对象回复解析

javascript - 如何将此 if/else 语句转换为惯用的 JavaScript？

javascript - Div 内的文本溢出另一个 Div

javascript - 我可以在 Vue/Vuex 中使用 mapGetters 动态调用 getter 吗？

javascript - 等待 NodeJS 中的异步方法

javascript - HTML5 移动网站上的动画

javascript - 将可执行函数分配给 Javascript 对象的属性

javascript - 使用 ng-repeat 时在 <select> 中预选 <option>

©2024 IT工具网  联系我们