如何在 javascript 中进行必要的更改以使代码正常工作

【问题标题】：How to make tthe necessary changes in javascript so that the code works如何在 javascript 中进行必要的更改以使代码正常工作
【发布时间】：2020-04-23 09:44:56
【问题描述】：

这是代码，我检查了一遍又一遍，不知道错误在哪里。

在函数中，我将一个 JSON 变量作为参数，然后函数用它创建一个表格。

另外，我正在使用一些 CSS 和 js 使该表成为数据表。 我确信这一定是一个小错误，但不确定错误在哪里。 很抱歉把它放在这里，但我没有弄错。请帮忙 有人可以进行必要的更改以使其正常工作吗？

$(document).ready(function() {
  var table = $('#example').DataTable( {
                 scrollY:        "300px",
                 scrollX:        true,
          scrollCollapse: true,
                  paging:         false,
            fixedColumns:   {
                 leftColumns: 1,
                rightColumns: 1
            }
          } );
} );
    
          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/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('id','example');
            table.setAttribute('class', 'stripe row-border order-column');
            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);
    
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
            <style type="text/css">
                /* Ensure that the demo table scrolls */
                th, td { white-space: nowrap; }
                div.dataTables_wrapper {
                    width: 800px;
                    margin: 0 auto;
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
            <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
            <script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js"></script> 
            
        </head>
        <body>
        <div id="demo"></div>
        </body>
        </html>

【问题讨论】：

  • 请解释并找出您的错误是什么。我们不是编写您的代码的社区。我们帮助您解决代码问题！所以请不要写“有人可以进行必要的更改以使其正常工作吗？”
  • 它对我有用。我们不知道您想要达到什么目标，也不知道错误是什么。我们怎么能帮助您？
  • 干净版：jsfiddle.net/ghzuemak/2

标签： javascript html css


【解决方案1】：

以下代码有效：

$(document).ready(function() {
  var table = $('#example').DataTable( {
    scrollY: "300px",
    scrollX: true,
    scrollCollapse: true,
    paging: false,
    fixedColumns:   {
      leftColumns: 1,
      rightColumns: 1
    }
  });
});

window.addEventListener('DOMContentLoaded', (event) => {
  generateDynamicTable(myContacts);
});
            
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/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('id','example');
    table.setAttribute('class', 'stripe row-border order-column');
    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);
  }
};
/* Ensure that the demo table scrolls */
th, td { white-space: nowrap; }
div.dataTables_wrapper {
  width: 800px;
  margin: 0 auto;
}
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.3.0/css/fixedColumns.dataTables.min.css">
  </head>
  <body>
    <div id="demo"></div>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script> 
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> 
    <script src="https://cdn.datatables.net/fixedcolumns/3.3.0/js/dataTables.fixedColumns.min.js">             </script>
  </body>
</html>

已编辑答案：我刚刚将现有 DOMContentLoaded 事件侦听器内的 generateDynamicTable 函数移动到窗口。 generateDynamicTable 处理一个 DOM 元素，因此它需要加载文档才能成功。

【讨论】：

  • 但这不是预期的结果。具有预期结果的是问题中已编辑的代码。尝试在那里运行代码sn-p
  • @EvaBat 在使用 Stackoverflow 代码片段时，您不必添加整个 HTML body/head 骨架；只需将所有 CSS/JS 外部导入（&lt;script/&gt;、&lt;link/&gt; 标签）添加到 HTML 部分，这些将自动处理并放置在 body 内：prnt.sc/s6784m
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-10-30
  • 1970-01-01
  • 2023-01-02
  • 1970-01-01
  • 2022-01-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode