#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    2
    Rep Power
    0

    adding table row using javascript and the DOM


    Hi - I hope someone can help, i am messing around with javascript and the DOM. I'd like to add entries to a form and would like to add these entries to a table which already has a number of rows of data (the table and the form are on the same page). How can i get the data from the form into the table using the DOB. here is were i am at the moment!

    Any help would be greatly appreciated.

    <html>
    <head>

    <title></title>

    <script language="JavaScript" type="text/javascript">


    function addRow(id){

    var tbody = document.getElementById
    (id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode("Name:"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("Name"))
    row.appendChild(td1);
    row.appendChild(td2);
    tbody.appendChild(row);

    var row2 = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode("Location:"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("Location"))
    row2.appendChild(td1);
    row2.appendChild(td2);
    tbody.appendChild(row2);

    var row3 = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode("Phone:"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("Phone"))
    row3.appendChild(td1);
    row3.appendChild(td2);
    tbody.appendChild(row3);

    var row4 = document.createElement("TR")
    var td1 = document.createElement("TD")
    td1.appendChild(document.createTextNode("E-mail:"))
    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("E-mail"))
    row4.appendChild(td1);
    row4.appendChild(td2);
    tbody.appendChild(row4);
    }

    </script>
    </head>
    <body>
    <table cellspacing="0" BORDER="0">
    <tbody>
    <tr>
    <td>
    <table id="myTable" width="100%" cellpadding="0" cellspacing="2" border="0">
    <tr class="dark"><td style="font-weight: bold;">Name:</td><td>XXXXXXX</td></tr>
    <tr><td style="font-weight: bold;">Location:</td><td>New XXXXXX</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Phone:</td><td>XXXXXXXX</td></tr>
    <tr><td style="font-weight: bold;">Email:</td><td>XXXX@XXXX.XX</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Name:</td><td>YYYYY</td></tr>
    <tr><td style="font-weight: bold;">Location:</td><td>YYYYYYY</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Phone:</td><td>YYYYYYY</td></tr>
    <tr><td style="font-weight: bold;">Email:</td><td>YY@YY.YY</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Name:</td><td>ZZZZZZZZ</td></tr>
    <tr><td style="font-weight: bold;">Location:</td><td>ZZZZZZZZ</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Phone:</td><td>ZZZZZZZ</td></tr>
    <tr><td style="font-weight: bold;">Email:</td><td>ZZZZZ@ZZ.ZZ</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr>
    </table>
    </tbody>
    </table>
    <form ID="test">
    <table cellspacing="0" BORDER="0">
    <tbody>
    <tr>
    <td>

    <table id="inputTable">
    <!--<tr><td colspan="2" class="textLabel">Add new contact:</td></tr> -->
    <tr><td style="vertical-align: bottom;"><b>Name:</B></td><td><input type="text" name="myTxt"/></td></tr>
    <tr><td style="vertical-align: bottom;"><b>Location:</B></td><td><input type="text" name="location" value="" size="30" /></td></tr>
    <tr><td style="vertical-align: bottom;"><b>Phone:</B></td><td><input type="text" name="phone" value="" size="30" /></td></tr>
    <tr><td style="vertical-align: bottom;"><b>Email:</B></td><td><input type="text" name="email" value="" size="30" /></td></tr>

    </TABLE>
    </td>

    </tr>

    </tbody>
    </table>
    </form>
    </table>
    <a href="#" onclick="addRow('myTable');return false; ">Add Contact</a>
    </body>
    </html>
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    don't forget to check existing threads before posting a new question.

    http://forums.devshed.com/t49500/s.html
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    Instead of
    td2.appendChild(document.createTextNode("Name"))
    use:
    td2.appendChild(document.createTextNode(document.forms["test"].myTxt.value))

    [same for the other three form entries]

    And at the end of the script reset the form:
    document.forms["test"].reset()

    Hope this helps,
    Jeroen
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    2
    Rep Power
    0
    Thanks for your responses. This is were the code is now, works just about the way i was hoping it would. Just one last thing. How would i make the new row entries bold?

    Regards,

    arisba

    <html>
    <head>

    <title>CustomerContactsGE</title>
    <script language="JavaScript">
    var CONTENT_FRAME0 = 0;
    var CONTENT_FRAME1 = 1;
    var CONTENT_FRAME2 = 2;
    </script>
    <script language="JavaScript" src="/servlet/portal/serve/Library/demo.js"></script>
    <link rel="stylesheet" href="/servlet/portal/serve/Library/demo.css" type="text/css">

    <!--
    td2.appendChild(document.createTextNode(document.forms["test"].myTxt.value))

    document.forms["test"].reset()
    -->

    <script language="JavaScript" type="text/javascript">


    function addRow(id){

    var tbody = document.getElementById
    (id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    var td1a = document.createElement("TD")
    td1a.appendChild(document.createTextNode("Name:"))
    var td2a = document.createElement("TD")
    td2a.appendChild(document.createTextNode(document.forms["test"].myTxt.value))
    <!-- td2.appendChild (document.createTextNode("Name")) -->
    row.appendChild(td1a);
    row.appendChild(td2a);
    tbody.appendChild(row);

    var row2 = document.createElement("TR")
    var td1b = document.createElement("TD")
    td1b.appendChild(document.createTextNode("Location:"))
    var td2b = document.createElement("TD")
    td2b.appendChild(document.createTextNode(document.forms["test"].myTxt1.value))
    <!-- td2.appendChild (document.createTextNode("Location")) -->
    row2.appendChild(td1b);
    row2.appendChild(td2b);
    tbody.appendChild(row2);

    var row3 = document.createElement("TR")
    var td1c = document.createElement("TD")
    td1c.appendChild(document.createTextNode("Phone:"))
    var td2c = document.createElement("TD")
    td2c.appendChild(document.createTextNode(document.forms["test"].myTxt2.value))
    <!-- td2.appendChild (document.createTextNode("Phone")) -->
    row3.appendChild(td1c);
    row3.appendChild(td2c);
    tbody.appendChild(row3);

    var row4 = document.createElement("TR")
    var td1d = document.createElement("TD")
    td1d.appendChild(document.createTextNode("E-mail:"))
    var td2d = document.createElement("TD")
    td2d.appendChild(document.createTextNode(document.forms["test"].myTxt3.value))
    <!-- td2.appendChild (document.createTextNode("E-mail")) -->
    row4.appendChild(td1d);
    row4.appendChild(td2d);
    tbody.appendChild(row4);

    document.forms["test"].reset();
    }

    </script>
    </head>
    <body>
    <table cellspacing="0" BORDER="0">
    <tbody>
    <tr>
    <td>
    <table id="myTable" width="100%" cellpadding="0" cellspacing="2" border="0">
    <tr class="dark"><td style="font-weight: bold;">Name:</td><td>Daniel Ash</td></tr>
    <tr><td style="font-weight: bold;">Location:</td><td>New York, NY</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Phone:</td><td>212-734-8097</td></tr>
    <tr><td style="font-weight: bold;">Email:</td><td>dash@geae.com</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Name:</td><td>David J</td></tr>
    <tr><td style="font-weight: bold;">Location:</td><td>Chicago, IL</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Phone:</td><td>309-356-9345</td></tr>
    <tr><td style="font-weight: bold;">Email:</td><td>dj@geae.com</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Name:</td><td>Kevin Haskins</td></tr>
    <tr><td style="font-weight: bold;">Location:</td><td>San Francisco, CA</td></tr>
    <tr class="dark"><td style="font-weight: bold;">Phone:</td><td>415-590-2345</td></tr>
    <tr><td style="font-weight: bold;">Email:</td><td>khaskins@geae.com</td></tr>
    <tr><td colspan="2">&nbsp;</td></tr>
    <tr>
    </table>
    </tbody>
    </table>
    <form ID="test">
    <table cellspacing="0" BORDER="0">
    <tbody>
    <tr>
    <td>

    <table id="inputTable">
    <!--<tr><td colspan="2" class="textLabel">Add new contact:</td></tr> -->
    <tr><td style="vertical-align: bottom;"><b>Name:</B></td><td><input type="text" name="myTxt"/></td></tr>
    <tr><td style="vertical-align: bottom;"><b>Location:</B></td><td><input type="text" name="myTxt1" size="30" /></td></tr>
    <tr><td style="vertical-align: bottom;"><b>Phone:</B></td><td><input type="text" name="myTxt2" size="30" /></td></tr>
    <tr><td style="vertical-align: bottom;"><b>Email:</B></td><td><input type="text" name="myTxt3" size="30" /></td></tr>

    </TABLE>
    </td>

    </tr>

    </tbody>
    </table>
    </form>
    </table>
    <a href="#" onclick="addRow('myTable');return false; ">Add Contact</a>

    </body>
    </html>
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    May 2003
    Posts
    1,014
    Rep Power
    15
    td1a.setAttribute("style","font-weight: bold;")

    Or put it in your stylesheet and apply a class.

    Hope this helps,
    Jeroen

IMN logo majestic logo threadwatch logo seochat tools logo