0

Basically, I want the user the just change the 'height' variable to how ever many rows he wants, and then store the words which each td in the row should contain, and the code should then generate the table.

My html is just this:

    <table id="newTable">
    </table>

This is my Javascript:

<script type="text/javascript">
var height = 2; // user in this case would want 3 rows (height + 1)
var rowNumber = 0;

var height0 = ['HeadingOne', 'HeadingTwo']; // the words in each td in the first row
var height1 = ['firstTd of row', 'secondTd of row']; // the words in each td in the second row
var height2 = ['firstTd of other row', 'secondTd of other row']; // the words in each td in the third row

$(document).ready( function() {
    createTr();
});

function createTr () {
    for (var h=0; h<height + 1; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = "<tr id='rowNumber" + rowNumber + "'>"; // <tr id='rowNumber0'>
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
        for (var i=0; i<window['height' + rowNumber].length; i++) {
            if (i == window['height' + rowNumber].length-1) { // if i==2, then that means it is the last td in the tr, so have a </tr> at the end of it
                var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td></tr>";
                $('#rowNumber' + rowNumber).append(theTr); // append to the end of the Tr

            } else {
                var theTd = "<td class='row" + rowNumber + " column" + i + "'>" + window['height' + rowNumber][i] + "</td>";
                $('#rowNumber' + rowNumber).append(theTr);
            }
        }
        rowNumber += 1;
    }
}
</script>

I did 'alert(theTr);' and 'alert(theTd);' and they looked correct. How come this code doesn't generate any table?

Improve this question
7
  • This is a mess, this is not how you create DOM. Use proper methods like document.createElement('table'); Commented Oct 28, 2013 at 15:10
  • And why variables like height0 and height1 instead of using an array? Commented Oct 28, 2013 at 15:13
  • You shouldn't be appending </tr>. DOM manipulation functions operate on whole DOM elements, not strings. Commented Oct 28, 2013 at 15:15
  • @DanFromGermany hm, I haven't even read about document.createElement when learning Javascript.. Can you recommend any good tutorials (doesn't need to be a video) where I can learn about it and learn how to create tables with it? Commented Oct 28, 2013 at 15:15
  • 1
    99% of the time when you find yourself putting numbers at the end of variable names, you should make them into an array. Commented Oct 28, 2013 at 15:27

2 Answers 2

Reset to default
2

You should change the line

$('#rowNumber' + rowNumber).append(theTr);

into 

$('#rowNumber' + rowNumber).append(theTd);

You are adding the Tr-Code again in the inner loop, but you actually wanted to add the Td-Code.

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

4 Comments

hm okay thanks. Now I can see a table, but for some reason it seems as if it is only generating the first column, the second column words ('HeadingTwo', 'secondTd of row' and 'secondTd of other row') aren't showing up and have to cells. Any idea why?
Did you replace both lines in your code? If so, it should generate the other columns as well.
hm yea, I replaced ('#rowNumber' + rowNumber).append(theTr); with $('#rowNumber' + rowNumber).append(theTd); in both the if and the else statement.
I get the following output: HeadingOne HeadingTwotest firstTd of row secondTd of rowtest firstTd of other row secondTd of other rowtest Is that what you are looking for? What is the output you get?
1

All that window["height"+rowNumber] stuff is a poor way to do it. Use an array, and pass it as a parameter to the function so you don't use global variables. And use jQuery DOM creation functions instead of appending strings.

<script type="text/javascript">
var heights = [['HeadingOne', 'HeadingTwo'], // the words in each td in the first row
               ['firstTd of row', 'secondTd of row'], // the words in each td in the second row
               ['firstTd of other row', 'secondTd of other row'] // the words in each td in the third row
              ];

$(document).ready( function() {
    createTr(heights);
});

function createTr (heights) {
    for (var h=0; h<heights.length; h++) { // loop through 3 times, in this case (which h<3)
        var theTr = $("<tr>", { id: "rowNumber" + h});
        for (var i=0; i<heights[h].length; i++) {
            theTr.append($("<td>", { "class": "row"+h + " column"+i,
                                     text: heights[h][i]
                                   }));
        }
        $('#newTable').append(theTr); // append <tr id='rowNumber0'> to the table
    }
}
</script>

JSFIDDLE

Improve this answer

5 Comments

Hm, when I use this code, it gives me an error saying 'Expected identifier, string or number' and highlights the " theTr.append($("<td>", { class: "row"+h + " column"+i, " line. Any idea why? I'm using IE 8 if that makes a difference.
It works for me. But some browsers may object to the class property because it's a reserved word, so I've added quotes.
perfecty, works great now. Guess IE8 is one of the browsers which object to the class property since it is a reserved word.
Hm wait, do you guys have any idea how / if I can add spans to the strings which I am inserting into the td's? For example, looking at the above code, how would I add a span to the word 'other' in the string 'firstTd of other row'? I tried adding an <h1> to it but it should up in the string itself, in the td it became 'firstTd of <h1>other</h1> row'
Use html: instead of text: if you want the contents to be parsed as HTML.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.