Need help w/ JavaScript and creating an html table from array

you need to print the tr's inside the table (annd add a </table>!):

var count = i % 3; // btw. what's this??
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i++)
{
    out += "<td>" + txArr[i] + "</td>";
    count++;
    if (count % 3 == 0)
        out += "</tr><tr>";
}
out += "</table>";

document.getElementById('ans8').innerHTML = out;

Rather than try to write out the html, try manipulating the dom. It seems much more straightforward to me. Take a look at the following:

var row = table.insertRow(); msdn mdc
var cell = row.insertCell(); msdn mdc
var cellContent = document.createTextNode(txArr[i]); msdn mdc
cell.appendChild(cellContent); msdn mdc

For deciding when to start a new row, just use the modulus operator (% msdn mdc ) against i:

if (i % 3 == 0)
{
    row = table.insertRow()
}

You'd end up with something like this:

var container = document.getElementById("ans8");
var t = container.appendChild(document.createElement("table"));
var row;
txArr.forEach(function (item, i)
{
    if (i % 3 == 0)
    {
        row = t.insertRow()
    }
    row.insertCell().appendChild(document.createTextNode(item));
});

I'll leave a little for you to figure out - border, background color, getting the word "null" in there. It is your homework after all. :-)

Also, for older browsers you'll need to add Array.forEach in yourself.

It might be a tad easier to accomplish with something like

buffer = "<table>";
for(var r = 0; r < 10; r++){
   buffer += "<tr>";
   for(var c = 0; c < 3 ; c++){
      buffer += "<td>Cell: " + r + ":" + c + "</td>";
   }
   buffer += "</tr>";
}
buffer += "</table>";
 document.getElementById("ans8").innerHTML = buffer;

That would create a table 30 rows long by 3 columns for each row.

you might be assigning values to "count" too early as you don't know what i is yet. and you are not spitting out the value of nrow anywhere... change it to out.

var count;
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i++)

{
out += ("<td>" + txArr[i] + "</td>");
count++;
if (count % 3 == 0)
    {
    out += "</tr><tr>";
    }
}

 document.getElementById('ans8').innerHTML = out + nrow;

Basically I would split it up into 3 functions, for readability and maintenance. These functions would consist of creating a cell, a row, and a table. This definitely simplifies reading the code. As I have not tested it, below is an example of what I would do.

function createTableCell(value) {
  return value == null? "<td>NULL</td>":"<td>" + value + "</td>";
}

function createTableRow(array) {
  var returnValue = "";
  for (var i = 0; i < array.length; i++) {
    returnValue = returnValue + createTableCell(array[i]);
  }
  return "<tr>" + returnValue + "</tr>";
}

function arrayToTable(array, newRowAfterNArrayElements) {
  var returnValue = "<table>";
  for (var i = 0; i < array.length; i = i + newRowAfterNArrayElements) {
     returnValue = returnValue + createTableRow(array.split(i, (i + newRowAfterNArrayElements) - 1));
  }
  return returnValue + "</table>";
}

document.getElementById("ans8").innerHTML = arrayToTable(txArr, 3);

In addition this makes your code much more dynamic and reusable. Suppose you have an array you want to split at every 4 element. Instead of hardcoding that you can simply pass a different argument.

Here's a live example of doing this with DOMBuilder, and of using the same code to generate DOM Elements and an HTML String.

• http://jsfiddle.net/insin/hntxW/

Code:

var dom = DOMBuilder.elementFunctions;

function arrayToTable(a, cols) {   
  var rows = [];
  for (var i = 0, l = a.length; i < l; i += cols) {
      rows.push(a.slice(i, i + cols));
  }
  return dom.TABLE({border: 1, bgcolor: 'gray'},
    dom.TBODY(
      dom.TR.map(rows, function(cells) {
        return dom.TD.map(cells);
      })
    )
  );
}

var data = [1, 2, null, 3, null, 4, null, 5, 6];

document.body.appendChild(arrayToTable(data, 3));
document.body.appendChild(
  dom.TEXTAREA({cols: 60, rows: 6},
    DOMBuilder.withMode("HTML", function() {
      return ""+arrayToTable(data, 3);
    })
  )
);

Yes, you can build from scratch...but there's a faster way. Throw a grid at it. The grid will take data in a string, array, json output, etc and turn it into a proper HTML outputted table and will allow you to extend it with sorting, paging, filtering, etc.

My personal favorite is DataTables, but there are numerous others out there.

Once you get proficient, setting one of these up literally takes 5 minutes. Save your brain power to cure world hunger, code the next facebook, etc....