Need loop help for building table with Javascript

Question

Here is my function:

function CreateResultsTable(bps, incs) {
    var table = document.createElement('table');
    var str = '<table border=1>';
    str += '<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>';

    var i = 0;

    // up
    for (i = 0; i < incs; i++) {
        var num = (incs - i) * bps;
        var newStr = num.toString();
        str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
    }
    i = 0;

    //down
    for (i = incs; i > 0; i--) {
        var num = (incs - i) * bps;
        var newStr = '-' + num.toString();
        str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
    }
    return str;
}

What I want is say I pass in {bps = 25, incs = 4}. It should always create double the amount of rows (underneath the header row) of incs. So for incs = 4 and bps = 25, it should create rows with first td = 100, 75, 50, 25, -25, -50, -75, -100 -- in that order.

What it's doing now is creating them like 100, 75, 50, 25, -0, -25, -50 -- and that's it.

What am I doing wrong?

Don't try to build the insides of tables with strings. Use createElement and friends. IE really doesn't like changing the innerHTML of bits of tables. — Quentin
– Quentin, Commented Dec 15, 2010 at 19:26
@David - What you said is true, but he's not doing that, he's creating an entire table, so while I don't prefer it either...it's not an issue in IE. — Nick Craver
– Nick Craver, Commented Dec 15, 2010 at 19:27
Argh. I looked at line two and didn't notice that the result is never used. — Quentin
– Quentin, Commented Dec 15, 2010 at 19:28

Nick Craver · Accepted Answer · 2010-12-15 19:38:57Z

2

You last loop needs to be >= instead of just > and start one lower, like this:

for (i = incs-1; i >= 0; i--) {

You can test it out here, the only other change is a </table> addition at the end and quotes on your border attribute.

There is a much simpler way to go about this though, use a single loop and exclude 0 if you want, like this:

function CreateResultsTable(bps, incs) {
    var str = '<table border="1">';
    str += '<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>';

    for (var i = incs*bps, low = -i; i >= low; i-=bps) {
        if (i == 0) continue; //exclude the 0 row
        str += '<tr><th>' + i + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
    }
    str += '</table>';
    return str;
}

You can test the result here, it's just a simpler/cheaper single-loop way or doing the same thing.

edited Dec 15, 2010 at 19:38

answered Dec 15, 2010 at 19:25

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

2 Comments

gregor Over a year ago

So he'll get 100, 75, 50, 25, -0, -25, -50 100 and not 100, 75, 50, 25, -25, -50 100.

Nick Craver Over a year ago

@gregor - woops you're right, I mis-read his expected result from the question (mixed it with his actual when reading), answer/demo updated.

gregor · Accepted Answer · 2010-12-15 19:26:36Z

1

You have to start at incs -1 and to count to zero. So the function should look like

function CreateResultsTable(bps, incs) {
        var table = document.createElement('table');
        var str = '<table border=1>';
        str += '<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th></tr>';

        var i = 0;

        // up
        for (i = 0; i < incs; i++) {
            var num = (incs - i) * bps;
            var newStr = num.toString();
            str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
        }
        i = 0;

        //down
        for (i = incs - 1; i >= 0; i--) {
            var num = (incs - i) * bps;
            var newStr = '-' + num.toString();
            str += '<tr><th>' + newStr + '</th><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td><td>100,000</td></tr>';
        }
        return str;
    }

answered Dec 15, 2010 at 19:26

gregor

4,8233 gold badges30 silver badges43 bronze badges

1 Comment

Nick Craver Over a year ago

While this does solve the issue in the question, there's a much simpler way to go about it, see my answer below :)

Collectives™ on Stack Overflow

Need loop help for building table with Javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related