Adding rows to table inside a form for input

[Ted Byers]

The simplest logical way for my form to support the data model is to
use a table.

It is trivial if I hard code the number of rows in the table simply
by nesting an input control inside the <td> element. That is basic
HTML. Relatively trivial, and trivial to have my CGI program server
side to process the data entered. But there is no good reason to
hardcode the number of rows. Inevitably, the number of rows that may
be hard coded will be inadequate for some fo the data.

Here is what I came up with (by studying code snippets I found on the
web):

<script>var n = 0</script>
<script>
function addRow(id){
n++;
var tbody = document.getElementById(id).getElementsByTagName
("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
var str1 = 'row' + n + 'Column1';
data1.appendChild(document.createTextNode(str1));
var data2 = document.createElement("td");
data2.appendChild (document.createTextNode('row' + n +
'Column2'));
var data3 = document.createElement("td");
data3.appendChild (document.createTextNode('row' + n +
'Column3'));
row.appendChild(data1);
row.appendChild(data2);
row.appendChild(data3);
tbody.appendChild(row);
}
</script>

Now I need to figure out how to change this so that each row consists
of three input fields rather than 3 plain text strings. That I need
to ask this may well reflect how little I know about Javascript and/or
the DOM, but if so, please provide me an URL to a document that will
fill in that gap in my knowledge.

An ancillary question is how I may determine, within my function, how
many rows are present in the table prior to adding the row (so I can
get rid of '<script>var n = 0</script>').

Thanks

Ted

 

[Martin Honnen]

<script>var n = 0</script>
<script>
function addRow(id){
n++;
var tbody = document.getElementById(id).getElementsByTagName
("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
var str1 = 'row' + n + 'Column1';
data1.appendChild(document.createTextNode(str1));
var data2 = document.createElement("td");
data2.appendChild (document.createTextNode('row' + n +
'Column2'));
var data3 = document.createElement("td");
data3.appendChild (document.createTextNode('row' + n +
'Column3'));
row.appendChild(data1);
row.appendChild(data2);
row.appendChild(data3);
tbody.appendChild(row);
}
</script>

Now I need to figure out how to change this so that each row consists
of three input fields rather than 3 plain text strings. That I need
to ask this may well reflect how little I know about Javascript and/or
the DOM, but if so, please provide me an URL to a document that will
fill in that gap in my knowledge.

Well you know how to create 'tr' or 'td' elements so doing e.g.
var input = document.createElement('input');
to create an HTML input element shouldn't come as a surprise. Then set
properties e.g.
input.type = 'text';
input.name = 'foo';
and then insert into a cell e.g.
data1.appendChild(input);

An ancillary question is how I may determine, within my function, how
many rows are present in the table prior to adding the row (so I can
get rid of '<script>var n = 0</script>').

Table element objects have a row collection so
var table = document.getElementById(id);
var rowCount = table.rows.length;
should do.
And if your table has a header and/or footer section then you probably
simply want the rows in your tbody so doing
var rowCount = tbody.rows.length;
is also an option.

 

[Ted Byers]

  <script>var n = 0</script>
  <script>
    function addRow(id){
      n++;
      var tbody = document.getElementById(id).getElementsByTagName
("tbody")[0];
      var row = document.createElement("tr");
      var data1 = document.createElement("td");
      var str1 = 'row' + n + 'Column1';
      data1.appendChild(document.createTextNode(str1));
      var data2 = document.createElement("td");
      data2.appendChild (document.createTextNode('row' + n +
'Column2'));
      var data3 = document.createElement("td");
      data3.appendChild (document.createTextNode('row' + n +
'Column3'));
      row.appendChild(data1);
      row.appendChild(data2);
      row.appendChild(data3);
      tbody.appendChild(row);
    }
  </script>

Now I need to figure out how to change this so that each row consists
of three input fields rather than 3 plain text strings.  That I need
to ask this may well reflect how little I know about Javascript and/or
the DOM, but if so, please provide me an URL to a document that will
fill in that gap in my knowledge.

Well you know how to create 'tr' or 'td' elements so doing e.g.
   var input = document.createElement('input');
to create an HTML input element shouldn't come as a surprise. Then set
properties e.g.
   input.type = 'text';
   input.name = 'foo';
and then insert into a cell e.g.
   data1.appendChild(input);

An ancillary question is how I may determine, within my function, how
many rows are present in the table prior to adding the row (so I can
get rid of '<script>var n = 0</script>').

Table element objects have a row collection so
   var table = document.getElementById(id);
   var rowCount = table.rows.length;
should do.
And if your table has a header and/or footer section then you probably
simply want the rows in your tbody so doing
   var rowCount = tbody.rows.length;
is also an option.

Thanks Martin.

One more question. Where can I find the definitions of these
objects? Surely there is an online reference for all this somewhere.

Thanks

Ted

 

[JR]

  <script>var n = 0</script>
  <script>
    function addRow(id){
      n++;
      var tbody = document.getElementById(id).getElementsByTagName
("tbody")[0];
      var row = document.createElement("tr");
      var data1 = document.createElement("td");
      var str1 = 'row' + n + 'Column1';
      data1.appendChild(document.createTextNode(str1));
      var data2 = document.createElement("td");
      data2.appendChild (document.createTextNode('row' + n +
'Column2'));
      var data3 = document.createElement("td");
      data3.appendChild (document.createTextNode('row' + n +
'Column3'));
      row.appendChild(data1);
      row.appendChild(data2);
      row.appendChild(data3);
      tbody.appendChild(row);
    }
  </script>
Now I need to figure out how to change this so that each row consists
of three input fields rather than 3 plain text strings.  That I need
to ask this may well reflect how little I know about Javascript and/or
the DOM, but if so, please provide me an URL to a document that will
fill in that gap in my knowledge.

Well you know how to create 'tr' or 'td' elements so doing e.g.
   var input = document.createElement('input');
to create an HTML input element shouldn't come as a surprise. Then set
properties e.g.
   input.type = 'text';
   input.name = 'foo';
and then insert into a cell e.g.
   data1.appendChild(input);

Table element objects have a row collection so
   var table = document.getElementById(id);
   var rowCount = table.rows.length;
should do.
And if your table has a header and/or footer section then you probably
simply want the rows in your tbody so doing
   var rowCount = tbody.rows.length;
is also an option.

        Martin Honnen
       http://msmvps.com/blogs/martin_honnen/

Thanks Martin.

One more question.  Where can I find the definitions of these
objects?  Surely there is an online reference for all this somewhere.

Thanks

Ted

I like this site a lot:
http://www.howtocreate.co.uk/tutorials/javascript/domtables

Another site:
http://www.w3schools.com/htmldom/dom_obj_table.asp

Cheers,
JR

 

[Ted Byers]

Ted Byers wrote:
  <script>var n = 0</script>
  <script>
    function addRow(id){
      n++;
      var tbody = document.getElementById(id).getElementsByTagName
("tbody")[0];
      var row = document.createElement("tr");
      var data1 = document.createElement("td");
      var str1 = 'row' + n + 'Column1';
      data1.appendChild(document.createTextNode(str1));
      var data2 = document.createElement("td");
      data2.appendChild (document.createTextNode('row' + n +
'Column2'));
      var data3 = document.createElement("td");
      data3.appendChild (document.createTextNode('row' + n +
'Column3'));
      row.appendChild(data1);
      row.appendChild(data2);
      row.appendChild(data3);
      tbody.appendChild(row);
    }
  </script>
Now I need to figure out how to change this so that each row consists
of three input fields rather than 3 plain text strings.  That I need
to ask this may well reflect how little I know about Javascript and/or
the DOM, but if so, please provide me an URL to a document that will
fill in that gap in my knowledge.
Well you know how to create 'tr' or 'td' elements so doing e.g.
   var input = document.createElement('input');
to create an HTML input element shouldn't come as a surprise. Then set
properties e.g.
   input.type = 'text';
   input.name = 'foo';
and then insert into a cell e.g.
   data1.appendChild(input);
An ancillary question is how I may determine, within my function, how
many rows are present in the table prior to adding the row (so I can
get rid of '<script>var n = 0</script>').
Table element objects have a row collection so
   var table = document.getElementById(id);
   var rowCount = table.rows.length;
should do.
And if your table has a header and/or footer section then you probably
simply want the rows in your tbody so doing
   var rowCount = tbody.rows.length;
is also an option.

Thanks Martin.

One more question.  Where can I find the definitions of these
objects?  Surely there is an online reference for all this somewhere.

Ted

I like this site a lot:http://www.howtocreate.co.uk/tutorials/javascript/domtables

Another site:http://www.w3schools.com/htmldom/dom_obj_table.asp

Cheers,
JR

Thanks guys.

I now have a problem with puzzling behaviour. I modified my function
to put input objects into the cells of a new row of the table, but it
isn't quite working. The new row appears as expected, but only for a
few seconds. Then the new row disappears.

Here is the new version of my Javascript function:

<script LANGUAGE="Javascript" type="text/javascript">
function addRow(id){
n++;
var str1 = 'item' + n;
var str2 = 'cost' + n;
var str3 = 'sell' + n;
var tbody = document.getElementById(id).getElementsByTagName
("tbody")[0];
var row = document.createElement("tr");
var input1 = document.createElement('input');
input1.type = 'text';
input1.name = 'str1';
input1.size = 50;
input1.maxlength = 256;
input1.value = 'food item';
var input2 = document.createElement('input');
input2.type = 'text';
input2.name = 'str2';
input2.size = 50;
input2.maxlength = 256;
input2.value = 'food cost';
var input3 = document.createElement('input');
input3.type = 'text';
input3.name = 'str3';
input3.size = 50;
input3.maxlength = 256;
input3.value = 'food price';
var data1 = document.createElement("td");
data1.appendChild(input1);
var data2 = document.createElement("td");
data2.appendChild(input2);
var data3 = document.createElement("td");
data3.appendChild(input3);
row.appendChild(data1);
row.appendChild(data2);
row.appendChild(data3);
tbody.appendChild(row);
}
</script>

And here is the form and table which ought to have the new row each
time the button is pressed.
<form name='vmenu' action=''>
<table id="menutable" cellspacing="0" border="1">
<tbody>
<tr><th>Menu item name</th><th>Cost price</th><th>Sell price</th>
</tr>
</tbody>
</table><button onclick="javascript:addRow('menutable')">Add row</
button>
</form>

I must have missed something. I had observed that in the original
version, all the rows that had been added disappeared when the page
was refreshed. This was not a surprise. In fact, I was hoping to
exploit it in this form.

I know I can get around this behaviour by putting all the logic,
including creating the extra rows, into a cgi script, but I was hoping
to avoid the round between client and server each time the user needs
to add a row to take more data. So what did I miss? perhaps
something inconvenient in the interaction between the form and button
control?

Thanks

Ted

 

[Martin Honnen]

And here is the form and table which ought to have the new row each
time the button is pressed.
<form name='vmenu' action=''>
<table id="menutable" cellspacing="0" border="1">
<tbody>
<tr><th>Menu item name</th><th>Cost price</th><th>Sell price</th>
</tr>
</tbody>
</table><button onclick="javascript:addRow('menutable')">Add row</
button>

Use
<input type="button" value="Add row" onclick="addRow('menutable');">
instead of that button element you have, or use
<button type="button" onclick="addRow('menutable');">Add row</button>

The default for type of the 'button' element is 'submit' and that way
your form is submitted each you click the button, causing a reload of
the page as the action of the form is ''.

 

[Martin Honnen]

One more question. Where can I find the definitions of these
objects? Surely there is an online reference for all this somewhere.

Yes. First of all it is a mapping of the HTML 4 or XHTML 1 to an object
model that is defined by the W3C here:
http://www.w3.org/TR/DOM-Level-2-HTML/
Thus if you know the HTML 4 respectively XHTML 1 elements and their
attributes then most of that maps straightforward to objects and properties.

Then of course there are browser specific documentations, IE has
everything documented on MSDN:
http://msdn.microsoft.com/en-us/library/ms533054(VS.85).aspx
Firefox documentation is on mozdev:
https://developer.mozilla.org/en/Gecko_DOM_Reference

 

[Ted Byers]

Yes. First of all it is a mapping of the HTML 4 or XHTML 1 to an object
model that is defined by the W3C here:http://www.w3.org/TR/DOM-Level-2-HTML/
Thus if you know the HTML 4 respectively XHTML 1 elements and their
attributes then most of that maps straightforward to objects and properties.

Then of course there are browser specific documentations, IE has
everything documented on MSDN:http://msdn.microsoft.com/en-us/library/ms533054(VS.85).aspx
Firefox documentation is on mozdev:https://developer.mozilla.org/en/Gecko_DOM_Reference

Thanks Martin, for all your help. Ted