Trouble with creating table in Javascript

Question

I have got the current code https://jsfiddle.net/rjw3f7yu/5/ that can plot table in HTML using Javascript code. However, there is this line that pops up stating "undefined" between row 1 and 2. Anyone knows what could be the problem here?

I am using bootstrap v3 just for extra info. Thanks!

HTML code:

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

Javascript Code:

var counttopercentagec1event = [0, 1, 2, 3, 4, 5];
var counttopercentagec2event = [2, 33, 22, 32, 43, 52];
var counttopercentagec3event = [7, 17, 72, 37, 47, 51];


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;
}
 wconclusiontable();

Gopinath Shiva · Accepted Answer · 2017-03-23 03:49:22Z

1

You have to initialise var row with empty string. Since row is undefined initially and you're adding directly with string, the initial row variable's value undefined is getting added. Hope that helps

Update fiddle - https://jsfiddle.net/rjw3f7yu/6/

var row = '';

answered Mar 23, 2017 at 3:49

Gopinath Shiva

3,8905 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Edwin Over a year ago

Thanks a lot for the clarifications!

Anish Goyal · Accepted Answer · 2017-03-23 03:54:46Z

0

It's probably because you never initialize your variable, "row". Initially, row is therefore undefined.

When you add to it the first time, you'll basically concatenate the strings "undefined" with "Event #".

Try defining row as:

var row = "";

Your updated code:

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;
}

Declaring a variable in a function in JavaScript generally serves one purpose - to set the scope of that variable, and avoid collision with a global variable. Since JavaScript is dynamically typed, JavaScript has no clue what it should be initializing your variable to at first. So, it chooses to define it as an "undefined" object.

During string concatenation, JavaScript will type coerce all objects involved in the operation to a string. This includes "undefined".

Why, then, does undefined appear after the header of the table? This happens because HTML renders the thead of the table before anything else. The best way to figure out what the potential issue is when dealing with a JavaScript issue like this is to open the inspector by right clicking the problematic element on the page and choosing "Inspect Element".

edited Mar 23, 2017 at 3:54

answered Mar 23, 2017 at 3:49

Anish Goyal

2,85914 silver badges18 bronze badges

2 Comments

Edwin Over a year ago

Thank you so much for the elaborations!

Anish Goyal Over a year ago

Glad I could help :)

HarisH Sharma · Accepted Answer · 2017-03-23 05:50:37Z

0

var row;

Replace above line by this

var row = new String("");

https://jsfiddle.net/wxaty4xs/

answered Mar 23, 2017 at 5:50

HarisH Sharma

1,2853 gold badges14 silver badges46 bronze badges

Collectives™ on Stack Overflow

Trouble with creating table in Javascript

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related