I'm dynamically creating a table. I want to be able to enter text into each cell like a spreadsheet
the table is working when i append the following text into the cell: //var cellText = document.createTextNode("cell is row "+j+", column "+i);
but when I try to append the input element - I get an error. var inputBox = document.createElement("input");
cell.appendChild(input2);
here is my code:
Code:
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
//Create a new line for each staff member assigned to project
for (var j = 0; j < project.staffList.length; j++)
{
//Create a new row for each week of the month
var row = document.createElement("tr");
for (var i = 0; i < weeksInMonth; i++)
{
var cell = document.createElement("td");
//First row is staff member's name
if (i < 1)
{
var cellText = document.createTextNode(project.staffList[j].staffID);
cell.setAttribute("width", "10%");
}
else
{
//var cellText = document.createTextNode("cell is row "+j+", column "+i);
var inputBox = document.createElement("input");
inputBox.type = "text";
}
cell.appendChild(input2);
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.setAttribute("width", "100%");
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
/*<![CDATA[*/
function Test(){
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
//Create a new line for each staff member assigned to project
for (var j = 0; j < 4; j++)
{
//Create a new row for each week of the month
var row = document.createElement("tr");
for (var i = 0; i < 4; i++)
{
var cell = document.createElement("td");
//First row is staff member's name
if (i < 1){
var cellText = document.createTextNode('project.staffList[j].staffID');
cell.setAttribute("width", "10%");
cell.appendChild(cellText);
}
else {
//var cellText = document.createTextNode("cell is row "+j+", column "+i);
var inputBox = document.createElement("input");
inputBox.type = "text";
cell.appendChild(inputBox);
}
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.setAttribute("width", "100%");
}
Test();
/*]]>*/
</script></body>
</html>
Thanks for the comment, I've fixed that - it was a mistake I made formatting for the post - it's giving me a weird error - see below:
NS_ERROR_INVALID_POINTER: Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLTableCellElement.appendChild]
[Break On This Error]
Code:
{
//var cellText = document.createTextNode("cell is row "+j+", column "+i);
var inputBox = document.createElement("input");
//inputBox.type = "text";
}
cell.appendChild(inputBox);
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
You don't need to create all the tr and td tags directly. You can create every tag in a table except for the table and tbody tags by using the appropriate table DOM methods.
Code:
function Test(){
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
//Create a new line for each staff member assigned to project
for (var j = 0; j < 4; j++)
{
row = tbl.insertRow(i);
for (var i = 0; i < 4; i++)
{
cell = row.insertCell(i);
//First column is staff member's name
if (i < 1){
var cellText = document.createTextNode('project.staffList[j].staffID');
cell.setAttribute("width", "10%");
call.appendChild(cellText);
}
else {
//var cellText = document.createTextNode("cell is row "+j+", column "+i);
var inputBox = document.createElement("input");
inputBox.type = "text";
call.appendChild(inputBox);
}
}
}
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.setAttribute("width", "100%");
}
Test();
awesome - thanks so much for your help! for others' reference there were a few small things I needed to fix to get the code to run (lines 13,16,21):
Code:
function Test(){
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
//Create a new line for each staff member assigned to project
for (var j = 0; j < 4; j++)
{
row = tbl.insertRow(j);
for (var i = 0; i < 4; i++)
{
cell = row.insertCell(i);
//First column is staff member's name
if (i < 1){
var cellText = document.createTextNode('project.staffList[j].staffID');
cell.setAttribute("width", "10%");
cell.appendChild(cellText);
}
else {
//var cellText = document.createTextNode("cell is row "+j+", column "+i);
var inputBox = document.createElement("input");
inputBox.type = "text";
cell.appendChild(inputBox);
}
}
}
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.setAttribute("width", "100%");
}
Test();
Before you post, read our: 
