Results 1 to 2 of 2

Thread: How to Add BR in dynamically created rows

  1. #1
    Join Date
    Dec 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to Add BR in dynamically created rows

    Hi all,

    I have some doubt while creating dynamic rows. I want to created two text box in a <td>. One textbox is separated with <br> tag. But I don't know the property to add <br>.

    Here is my code...

    <html>
    <head>
    <title>InsertTable Row </title>
    <script language="javascript">
    var gRowId = 2;


    function addRow()
    {
    var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];
    var gRowId1 = gRowId;
    var row = document.createElement('TR');
    var cell1 = document.createElement('TD');
    var cell2 = document.createElement('TD');
    var cell3 = document.createElement('TD');


    var inp1 = document.createElement('INPUT');
    var inp2 = document.createElement('INPUT');

    inp1.setAttribute('type','text');
    inp1.setAttribute('name','usertxt'+gRowId1);
    inp1.setAttribute('value','Original Row'+gRowId1);
    inp1.id='usertxt'+gRowId1;


    var anc = document.createElement("a");
    anc.href="#"
    anc.onclick= function() {
    window.caller = document.getElementById("usertxt" + gRowId1)
    var cal = window.open('C:/del4.html','search','resizable=no,left=300,top=200,width=350,height=300');
    if (!cal.opener) cal.opener = self;
    return false
    }
    var img = document.createElement('img');
    img.src = 'C:/cal.jpg';
    img.border='0';
    anc.appendChild(img);

    inp2.setAttribute('type','text');
    inp2.setAttribute('name','srow'+gRowId1);
    inp2.setAttribute('value','Original Col'+gRowId1);
    inp2.id='srow'+gRowId1;

    cell1.innerHTML = gRowId;
    cell2.appendChild(inp1);
    cell2.appendChild(anc);
    cell3.appendChild(inp2);

    row.appendChild(cell1);
    row.appendChild(cell2);
    row.appendChild(cell3);

    tbody.appendChild(row);
    gRowId++;
    }
    </script>

    </head>
    <body>
    <form name="myform" method="post">
    <table id="table1" border=1>
    <tbody>
    <tr>
    <th>ID</th><th>Data1</th><th>Data2</th>
    </tr>
    <tr>
    <td>1</td>
    <td><input name="usertxt" type=text value="Original Row1"><a href="#" onClick="window.caller = document.forms[0].usertxt;cal = window.open('C:/del4.html','search','resizable=no,left=300,top=200,width=350,height=300'); if (!cal.opener) cal.opener = self; return false"><img src = "C:/cal.jpg" border="0" ><br><input name="subusertxt" type=text value="Sub Value 1"></td>
    <td><input name="srow" type=text value="Original Col1"></td>

    </tr>
    </tbody>
    </table>
    <input type="button" value="Insert Row" onClick="addRow();">
    <input type="submit" name="submit" value="Submit">
    </form>
    </body>
    </html>


    If I click on Add, In Second Row, 1st column I need to create one more textbox under the present one....

    Initiall page loads, can see Two colums --
    1st Column there are two textboxes containing values "Original Row1" and "Sub Value1" and Second Column containing "Original Col1".

    If I click on the Insert Row button, Need to create two textboxes in 1st column (values as "Original Row2" and "Sub Value2") and in 2nd Column "Original Col2". Present code will give "Original Row2" in 1st Column, I want to generate a textbox in that <td> followed by <br> tag and textbox value as "Sub Value2".

    Hope my question is clear... I didn't get any solution to add <br> TAG inside a <TD> to create dynamic rows.

    Could you please find a solution to this problem.

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,925
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Code:
    var lf=document.createElement('br')
    cell1.appendChild(lf)
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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