Adding rows to table inside a form for input

Discussion in 'Javascript' started by Ted Byers, Oct 2, 2009.

  1. Ted Byers

    Ted Byers Guest

    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
     
    Ted Byers, Oct 2, 2009
    #1
    1. Advertisements

  2. 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, Oct 2, 2009
    #2
    1. Advertisements

  3. Ted Byers

    Ted Byers Guest

    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
     
    Ted Byers, Oct 2, 2009
    #3
  4. Ted Byers

    JR Guest

    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
     
    JR, Oct 3, 2009
    #4
  5. Ted Byers

    Ted Byers Guest

    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
     
    Ted Byers, Oct 3, 2009
    #5
  6. 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, Oct 3, 2009
    #6
  7. 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
     
    Martin Honnen, Oct 3, 2009
    #7
  8. Ted Byers

    Ted Byers Guest

    Thanks Martin, for all your help. Ted
     
    Ted Byers, Oct 3, 2009
    #8
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.