www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 22

Thread: Textbox in table cell

  1. #1
    Join Date
    Apr 2010
    Posts
    52

    Textbox in table cell

    I have a table on HTML page to which I am adding new rows on button click. As i need the user to enter the data in the table I have inserted textboxes in the cells of the table. how shall I assign the text box to the cells of the new row added.

    Here is my code please assist.
    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <script type="text/javascript">
    
    function addRow(id)
    {
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var row = document.createElement("tr")
    var data1 = document.createElement("td")
    data1.appendChild(document.createTextNode("Column1"))
    var data2 = document.createElement("td")
    data2.appendChild (document.createTextNode("Column2"))
    row.appendChild(data1);
    row.appendChild(data2);
    tbody.appendChild(row);
    }
    </script>
    
    <table id="table" cellspacing="0" border="1">
    <tbody>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    <tr>
    <td><input type='text'/></td><td><input type='text'/></td>
    </tr>
    
    </tr>
    </tbody>
    </table><button onclick="javascript:addRow('table')">Add row</button>
    </html>
    
    <body>
    </body>
    </html>
    Last edited by Kor; 06-07-2010 at 08:55 AM. Reason: wrap the code [code][/code]

  2. #2
    Join Date
    Apr 2010
    Posts
    52
    As well I have to enter the data entered in the table to database thru PHP so i need to group the table cells in an array.....
    Please help an assisting with that as well.

    Thanks

  3. #3
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    maybe the method cloneNode() would be of some better help.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    
    <script type="text/javascript">
    window.onload=function() {
    var button = document.getElementsByTagName('button')[0];
    button.onclick = function() {newRow();};
    };
    
    function newRow() {
    var tbody = document.getElementsByTagName('tbody')[0];
    var row = tbody.getElementsByTagName('tr')[0];
    var nextRow = row.cloneNode(true);
    nextRow.getElementsByTagName('input')[0].value = '';
    nextRow.getElementsByTagName('input')[1].value = '';
    tbody.appendChild(nextRow);
    nextRow.getElementsByTagName('input')[0].focus();
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    </style>
    
    </head>
    <body>
    <?php
    if(isset($_POST['data'])) {
        echo "foo: "; print_r ($_POST['foo']);
        echo "<br>bar: "; print_r ($_POST['bar']);
        }
    ?>
    <form action="" method="post" name="form1">
    <table border="0" cellpadding="0" cellspacing="0" summary="">
        <thead><tr><th>foo</th><th>bar</th></tr></thead>
        <tfoot><tr><td><button type="button">new row</button></td><td><button type="submit" name="data">submit</button></td></tr></tfoot>
        <tbody><tr><td><input type="text" name="foo[]"></td><td><input type="text" name="bar[]"></td></tr></tbody>
    </table>
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  5. #5
    Join Date
    Apr 2010
    Posts
    52
    Thanks Fang for the reply but i have an issue as i already have another table defined on the page so this function is taking the <tbody> for that previously defined table. and the function doesn works for my page.

    I guess i need the same but with "id" can u help me with the same ???

    thanks

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Reference the id in place of the tbody.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  7. #7
    Join Date
    Apr 2010
    Posts
    52
    function newRow(id) {
    var tbody = document.getElementById(id)[0];
    var row = getElementsByTagName('tr')[0];
    var nextRow = row.cloneNode(true);
    nextRow.getElementsByTagName('input')[0].value = '';
    nextRow.getElementsByTagName('input')[1].value = '';
    tbody.appendChild(nextRow);
    nextRow.getElementsByTagName('input')[0].focus();


    please check this its giving me an error "document.getElementById(id)=null

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    var tbody = document.getElementById(id);
    At least 98% of internet users' DNA is identical to that of chimpanzees

  9. #9
    Join Date
    Apr 2010
    Posts
    52
    giving an error "tbody=null"

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What is the argument passed in function newRow?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  11. #11
    Join Date
    Apr 2010
    Posts
    52
    where i am calling the function
    <tfoot><tr><td><button type="button" name="button" onclick="newRow()">new row</button></td></tr></tfoot>

    and function:

    function newRow(id) {
    var tbody = document.getElementById(id);
    alert(tbody.innerHTML);
    var row =tbody.getElementsByTagName('tr')[0];
    var nextRow = row.cloneNode(true);
    nextRow.getElementsByTagName('input')[0].value = '';
    nextRow.getElementsByTagName('input')[1].value = '';
    tbody.appendChild(nextRow);
    nextRow.getElementsByTagName('input')[0].focus();

    }

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    onclick="newRow('idName')"
    At least 98% of internet users' DNA is identical to that of chimpanzees

  13. #13
    Join Date
    Apr 2010
    Posts
    52
    thanks a lot for help buddy really appreciate it still have a error

    Error:nextRow.getElementsByTagName("input")[0] is undefined

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Then the row you are attempting to clone does not contain an input.
    Giving a link or the full document you are using would be more helpful.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  15. #15
    Join Date
    Apr 2010
    Posts
    52
    The full code.. moreover I need four columns in the table where as the one defined by ur function as only 2 please check into tht as well........

    Thanks a lot.


    <h1>Add Details</h1>
    {literal}

    <div>
    <form method="POST" action="LRU_manage.php" name="FrmLRU_Add">
    <div >

    <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="table2" height="323">
    <tr>
    <td width="137" height="27" align="left">
    <font face="Arial" style="font-size: 9pt; font-weight: 700" color="#006699">
    LRU Name</font></td>
    <td height="27" align="left">
    &nbsp;<input type="text" name="T1" size="26"></td>
    </tr>

    <tr>
    <td width="137" height="27" align="left">
    <span style="font-weight: 700">
    <font face="Arial" style="font-size: 9pt" color="#006699">
    Part Number</font></span></td>
    <td height="27" align="left">
    &nbsp;<input type="text" name="T10" size="26"></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <span style="font-weight: 700">
    <font face="Arial" style="font-size: 9pt" color="#006699">
    Description</font></span></td>
    <td height="27" align="left">
    &nbsp;<input type="text" name="T11" size="26"></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <font face="Arial" style="font-size: 9pt; font-weight: 700" color="#006699">
    LRU Category</font></td>
    <td height="27" align="left">
    &nbsp;
    <select name="SelLRU_Cat" id="SelLRU_Cat" onchange="checkLRU_Cat();" >
    <option value="">-- Select --</option>
    {html_options options= $lstOptions}
    </select>

    </td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <font face="Arial" style="font-size: 9pt; font-weight: 700" color="#006699">
    LRU Type</font></td>
    <td height="27" align="left">
    &nbsp;<select size="1" name="selLRU" style="width: 182; height:22" >
    <option selected value="select">-Select-</option>
    {html_options options= $lstLRUtype}

    </select></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <font face="Arial" style="font-size: 9pt; font-weight: 700" color="#006699">
    Port Connections</font></td>
    <td height="27" align="left">
    &nbsp;<select size="1" name="SelPort_Con" style="width: 182; height:22" >
    <option selected value="select">-Select-</option>
    {html_options options= $lstPorts}

    </select></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <font face="Arial" style="font-size: 9pt; font-weight: 700" color="#006699">
    LRU Sub Type</font></td>
    <td height="27" align="left">
    &nbsp;<select size="1" name="D5" style="width: 181; height:22" >
    <option selected>-Select-</option>
    {html_options options= $lstLRU_SubType}
    </select></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <span style="font-weight: 700">
    <font face="Arial" style="font-size: 9pt" color="#006699">
    LRU Sub Name</font></span></td>
    <td height="27" align="left">
    &nbsp;<input type="text" name="T14" size="26"></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <span style="font-weight: 700">
    <font face="Arial" style="font-size: 9pt" color="#006699">
    SRU Type</font></span></td>
    <td height="27" align="left">
    &nbsp;<input type="text" name="T13" size="26"></td>
    </tr>

    <tr>
    <td width="137" height="27" align="left">
    <span style="font-weight: 700">
    <font face="Arial" style="font-size: 9pt" color="#006699">
    SRU Name</font></span></td>
    <td height="27" align="left">
    &nbsp;<input type="text" name="T15" size="26"></td>
    </tr>
    <tr>
    <td width="137" height="27" align="left">
    <span style="font-weight: 700">
    <font face="Arial" style="font-size: 9pt" color="#006699">
    Software Download</font></span></td>
    <td height="27" align="left">
    <input type="checkbox" name="C1" value="ON"></td>
    </tr>

    </table>


    <div >
    <input onclick= "goToURL('');" type="button" value="Save" name="B3" style="font-family: Arial; font-size: 10pt; color: #006699; font-weight: bold; width: 80">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;

    <input onclick= "goToURL('');" type="button" value="Close" name="B4" style="font-family: Arial; font-size: 10pt; color: #006699; font-weight: bold; width: 80"></div>

    <table border="0" cellpadding="0" cellspacing="0" summary="" id="table1">
    <thead><tr><th>Interface Name</th><th>Port Index</th><th>SBB Index</th><th>Connection Type</th></tr></thead>
    <tfoot><tr><td><button type="button" name="button" onclick="newRow('table1')">new row</button></td></tr></tfoot>
    <tbody><tr><td><input type="text" name="Interface_Name[]"></td><td><input type="text" name="Port_Index[]"></td><td><input type="text" name="SBB_Index[]"></td><td><select size="1" name="Connect_Type[]" style="width: 182; height:22" ></select></td></tr></tbody>

    </table>
    </div>
    </form>

    {literal}

    <script type="text/javascript">

    function newRow(id) {
    var tbody = document.getElementById(id);
    var row =tbody.getElementsByTagName('tr')[0];
    var nextRow = row.cloneNode(true);
    nextRow.getElementsByTagName('input')[0].value = '';
    nextRow.getElementsByTagName('input')[1].value = '';
    tbody.appendChild(nextRow);
    nextRow.getElementsByTagName('input')[0].focus();

    }

    </script>
    {/literal}

    {$jsOtEquipVar}

    {$jsLruTypeVar}

    {literal}
    <script type="text/javascript">
    var oFrm = document.FrmLRU_Add;

    function checkLRU_Cat(strCatId)
    {
    if (oFrm.SelLRU_Cat.value == 4)
    {
    (oFrm.SelPort_Con.disabled = false);
    }
    else
    {
    oFrm.SelPort_Con.disabled = true;

    }

    }
    </script>
    {/literal}
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles