在Javascript中创建表的麻烦

时间:2017-03-23 03:47:09

标签: javascript html

我已经获得了当前代码https://jsfiddle.net/rjw3f7yu/5/,它可以使用Javascript代码在HTML中绘制表格。然而,有这条线弹出来说明" undefined"在第1行和第2行之间。任何人都知道这里可能出现什么问题?

我正在使用bootstrap v3来获取额外信息。谢谢!

HTML code:

IShellFolder

Javascript代码:

<table class="table" id="wconclusiontable">
                      </table>

3 个答案:

答案 0 :(得分:1)

您必须使用空字符串初始化var行。由于行最初是未定义的,并且您直接使用字符串添加,因此将添加初始行变量的值undefined。希望有所帮助

更新小提琴 - https://jsfiddle.net/rjw3f7yu/6/

var row = '';

答案 1 :(得分:0)

这可能是因为你永远不会初始化你的变量“row”。最初,行未定义。

当你第一次添加它时,你基本上将字符串“undefined”连接到“Event#”。

尝试将行定义为:

var row = "";

您的更新代码:

function wconclusiontable() {
  var wtable = document.getElementById("wconclusiontable");
  var row = "";


  row += "<thead><tr><th>" + "Event #" + "</th>";                                   
  row += "<th>" + "Low" + "</th>";
  row += "<th>" + "Medium" + "</th>";
  row += "<th>" + "High" + "</th>";
  row += "</tr></thead>";


  for (var i = 2; i <  5; i++) {
    row += "<tbody><tr><td>" + (i-1) + "</td>";                                 
    row += "<td>" + counttopercentagec1event[i-1] + "%" + "</td>";
    row += "<td>" + counttopercentagec2event[i-1] + "%" + "</td>";
    row += "<td>" + counttopercentagec3event[i-1] + "%" + "</td>";                  
    row += "</tr></tbody>";
  }


  wtable.innerHTML = row;
}

在JavaScript中声明函数中的变量通常有一个目的 - 设置该变量的范围,并避免与全局变量冲突。由于JavaScript是动态类型的,因此JavaScript不知道应该首先初始化变量。因此,它选择将其定义为“未定义”对象。

在字符串连接期间,JavaScript将键入将操作中涉及的所有对象强制转换为字符串。这包括“未定义”。

为什么在表格的标题后面会出现未定义的内容?发生这种情况是因为HTML在其他任何内容之前渲染表的thead。在处理像这样的JavaScript问题时,找出潜在问题的最佳方法是通过右键单击页面上有问题的元素并选择“检查元素”来打开检查器。

答案 2 :(得分:0)

var row;

用此

替换上面的行

var row = new String("");

https://jsfiddle.net/wxaty4xs/