Adding a table using javascript and jQuery

Question

Beginner here, but I have spent a long time trawling other questions to try to debug this. My issue is as follows:

I take two arrays, 'left' and 'right', calculate the ratios between them (with a function that I already have working) outputting a 3x11 array with the ratios.

What I'm trying to produce in the end is a table with 4 rows and 12 columns. The [0] row will list 'right', the [0] column will list left, and the rest of the table will then host the corresponding ratios.

It should then replace the relevant div within the html.

Maybe it's something obvious and I'm just totally missing it, or it's just a hole in my knowledge. Either way, I've spent most of the day on it!

<!-- html -->

<body>
<input type="input" value="Enter a value"></input>
<div id="results_table">
Ratios:
    <div id="result">ratios listed here</div>
    <div id="result1">tables here</div>
</div>
</body>


//Javascript\\

$("input").change(function () {
    var left = new Array(3);                         
    var right = new Array(11);
    left = [30, 40, 50];
    right = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; 
    result = fullCalc(left, right);                       //this calculates the ratios
    $("#result").append(result);
    var ratios = result;    
    resultstable = tableCreate(left,right,ratios);
    $("#result1").append(resultsTable);
});


function tableCreate(a, b, c) {

newTable = document.getElementById("result1");
var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
tbl.style.width = '100%';
tbl.setAttribute('border', '1');
tbl.setAttribute('id', "results_tbl");

for (var i = 0; i < a.length + 1; i++) {
    var tr = document.createElement('tr');
    tr.setAttribute('id', "tablerow" + i);
    for (var j = 0; j < b.length + 1; j++) {
        var td = document.createElement('td');
        if (i >= 1 && j === 0) {
            var frontText = document.createTextNode(a[i-1]);
            td.append(leftText);
            td.setAttribute('id', "leftTable");
        } else if (i === 0 && j >= 1) {
            var rearText = document.createTextNode(b[j-1]);
            td.append(rearText);
            td.setAttribute('id', "rightTable");
        } else {
            var ratioText = document.createTextNode(c[i-1][j-1]);
            td.appendChild(ratioText);
            td.setAttribute('id', "ratioTable");
        }

        tr.appendChild(td);
    }
    tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);

}

The problem is that no table appears, and I'm unsure if one is even being created. Any ideas?

var left = new Array(3); fine, old syntax but valid. left = [30, 40, 50]; now you overrided the array you allocated before, just use the second line. also, you never declared result. — gdoron
– gdoron, Commented Nov 5, 2013 at 19:06
Why bother with jQuery at all if you're going to add a table piece by piece using vanilla JavaScript? — Blazemonger
– Blazemonger, Commented Nov 5, 2013 at 19:07
Thanks gdoron. I thought you had to declare an empty array before 'filling' it with values, but evidently not. I've added a return in tableCreate but hasn't seemed to work yet... Blazemonger, I know it's probably not the most efficient way to go, but I'm trying to learn jQuery too and implement it where I can along the way at the moment. — maxcalibur
– maxcalibur, Commented Nov 6, 2013 at 8:23

tymeJV · Accepted Answer · 2013-11-05 19:05:42Z

3

So close! You have to append your table somewhere:

tbl.appendChild(tbdy); //it has a tbody, but where is the table
//APPEND TO AN ELEMENT

answered Nov 5, 2013 at 19:05

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

1 Comment

maxcalibur Over a year ago

Thanks, though I'm not sure I understand this answer. I have a line of code that says exactly that.

Mike Edwards · Accepted Answer · 2013-11-05 19:32:14Z

1

The answer is a combination of typeJV's answer and Kevin B's comment.

You do have a line of code that appends the result of tableCreate, but you don't return a value from that function, so no append occurs.

You also appear to have some typos in your script, including:

// create a (global) variable name with no capital letters
resultstable = tableCreate(left,right,ratios);
// refer to the variable name with a capital 'T' - that's a different variable
$("#result1").append(resultsTable);

// do you mean to make this a global variable?
newTable = document.getElementById("result1");

gdoron is also correct that these lines are redundant:

var left = new Array(3);   // allocate a new array
var right = new Array(11);
left = [30, 40, 50];       // throw away that array and create a brand new one
right = [11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]; // same here
result = fullCalc(left, right);  // another undeclared var - this becomes global

edited Nov 5, 2013 at 19:32

answered Nov 5, 2013 at 19:11

Mike Edwards

3,77120 silver badges23 bronze badges

2 Comments

maxcalibur Over a year ago

Thank you. How would making newTable a global variable change things?

Mike Edwards Over a year ago

It wouldn't change the behavior of this code directly, but creating global variables is generally a Bad Thing, certainly if you do it by accident. You don't want your code to over-write a value created in some other code on accident, or vice-versa. Usually when writing JS we try to stay out of the global namespace.

maxcalibur · Accepted Answer · 2013-11-06 10:52:09Z

0

Ok, I figured it out!

The problem was that I was forcing the for loop that fills the table to look for a value that wasn't there.

ie. when j = 0 and i = 0, the 'else if' was trying to find values at c[-1][-1] which obviously doesn't exist. I simply added another 'else if' to accommodate the [0][0] position on the table:

else if ( i === 0 && j ===0){
    var variableText = document.createTextNode("variables");
    td.appendChild(variableText);
    td.setAttribute('id', "variableTable");
}

Almost a pity it was just a programming error. Thanks to all for the help with improving my code though.

answered Nov 6, 2013 at 10:52

maxcalibur

438 bronze badges

Collectives™ on Stack Overflow

Adding a table using javascript and jQuery

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