CODEWITHSUNDEEP
javascriptjquery
m0onio
m0onio

Reputation: 213

JQuery/JavaScript - Creating a table from list of words

At the moment this creates the table for the list of words, but only in one column. How do I get it to print into a 4x5 table? 

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"];
var innerTable = '';
for (var i = 0, len = listOfWords.length; i < len; i++) {
innerTable += '<tr><td>'+listOfWords[i]+'</td></tr>';
}
$('<table>'+innerTable+'</table>').appendTo('body');

Upvotes: 0

Views: 283

Answers (2)

Peter-Paul van Gemerden
Peter-Paul van Gemerden

Reputation: 7011

You want to have multiple rows and multiple columns. The easiest way to achieve that is to iterate over both of those, instead of over the list of words.

This would look something like this:

var rows = 4;
var cols = 5;

for (var row=0; row < rows; row++) {
  // Open the <tr>
  for (var col=0; col < cols; col++) {
      index = (row*cols) + col;
      // Add a <td> containing   listOfWords[index]
  }
  // Close the <tr>
}

This strategy allows you to easily change the number of rows and columns in the table (even if the length of the list is not an exact multiple of the number of columns).

I see you deleted your comment, but to randomize which item goes where, all you need to do is shuffle the list using sort and random:

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"];
listOfWords.sort(function() { return 0.5 - Math.random(); });

If you need the original list to be preserved, create a copy of the list first using slice:

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"];
var shuffledWords = listOfWords.slice(0);
shuffledWords.sort(function() { return 0.5 - Math.random(); });

Full solution

Since you are already using jQuery, the best way to create new nodes (<tr>, <td>, etc.) is not by writing the full HTML, but by letting the jQuery() function (same as $()) to create the node for you. That way, you have access to all DOM and jQuery functions of the node, e.g. appendTo().

Try this:

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"];
var shuffledWords = listOfWords.slice(0);
shuffledWords.sort(function() { return 0.5 - Math.random(); });

var table = $('<table>'); // <-- creates a new jQuery object containing a <table> node
var rows = 4;
var cols = 5;
var tr;
var index;

for (var row=0; row < rows; row++) {
  tr = $('<tr>');
  for (var col=0; col < cols; col++) {
    index = (row*cols) + col;
    $('<td>').text(shuffledWords[index]).appendTo(tr);
  }
  tr.appendTo(table);
}

table.appendTo('body');

Demo

You can view a live example here.

Upvotes: 0

Jesse M
Jesse M

Reputation: 175

Right now the line 

innerTable += '<tr><td>'+listOfWords[i]+'</td></tr>';

Is creating both a new 'tr' (row) and 'td' (column) for each new word. In order to get the words to print out in a grid with four columns, you'll have to only append a 'tr' every fourth word.

As a quick hack:

var listOfWords = ["mat","cat","dog", "pit", "pot", "fog", "log", "pan", "can", "man"];
var innerTable = '';
for (var i = 0, len = listOfWords.length; i < len; i++) {
    if ((i%4)==0){
        innerTable += '<tr>';
    }
    innerTable += '<td>'+listOfWords[i]+'</td>';
    if ((i%4)==3){
        innerTable += '</tr>';
    }
}
$('<table>'+innerTable+'</table>').appendTo('body');

This should append a 'tr' only to elements 0, 4, 8, 12, 16 and a '/tr' to elements 3, 7, 11, 15, 19 (in a list of 20 elements-- since you mentioned a 4x5 table that what I'm going with). Lacking the html I can't attest that it works, but hopefully it helps.

Upvotes: 2

Related Questions