dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: how to dynamically insert a row in a table

  1. #1
    Join Date
    Feb 2003
    Posts
    8

    Question how to dynamically insert a row in a table

    hi am new to the javascript world, was wondering if anyone could help me out on this one...

    I am working on a table where the user can dynamically insert a row to the existing table upon pressing a button. I can get it to add a new row at the bottom of the table but my problem is I can't get it to insert a checkbox or the highlight i wanted when mouse is over the new row (which btw i got from the forum here, thanks guys). Oh and was wondering if it would be possible to delete a row.

    here's the part of the code...
    <style>
    <!--
    all.tblrow { cursor:hand }
    //-->
    </style>

    <script language = "javascript">
    <!--
    function addRow(id)
    {
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    var row = document.createElement("TR")
    // I don't know if I'm using this method correctly 'coz it's not working
    row.setAttribute("class", "tblrow")
    row.onmouseover = "bgOn(this, \'#0099FF\')"
    row.setAttribute("onmouseout", "bgOn(this, \'#FFFFFF\')")

    var td1 = document.createElement("TD")
    // this is where i wanted the checkbox but can't seem to figure out how to do it
    // var str ='<input type="checkbox" name="chkItem">'
    td1.appendChild(document.createTextNode(str))

    var td2 = document.createElement("TD")
    td2.appendChild (document.createTextNode("Column2"))

    var td3 = document.createElement("TD")
    td3.appendChild(document.createTextNode("Column3"))

    var td4 = document.createElement("TD")
    td4.appendChild (document.createTextNode("Column4"))

    var td5 = document.createElement("TD")
    td5.appendChild(document.createTextNode("Column5"))

    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td4);
    row.appendChild(td5);

    tbody.appendChild(row);
    }

    function bgOn(obj, clr)
    {
    obj.style.backgroundColor = clr;
    }
    //-->
    </script>

    <body bgcolor="#FFFFFF" text="#000000">
    <form name="form1" method="post" action="">
    <input type=button name="btnAdd" value="Add A Row" onclick="addRow('tabBody')">
    <div align="center">
    <table id="tabBody" border="1" width="900" bgcolor="#FFFFFF">
    <tr class="tblrow" onmouseover="bgOn(this, '#0099FF')" onmouseout="bgOn(this, '#FFFFFF')">
    <td width="24"><input type="checkbox" name="chkItem"></td>
    <td align="left" width="160">A</td>
    <td align="left" width="30">B</td>
    <td align="left" width="143">C</td>
    <td align="left" width="460">D</td>
    </tr>
    </table>
    </div>
    </form>
    </body>

  2. #2
    Join Date
    Feb 2003
    Posts
    85
    Hi,
    here are some changes for your code:

    1.
    <style>
    .tblrow { cursor:hand; }
    </style>


    2. new function
    function blue() {
    bgOn(this, '#0099FF');
    }

    3.
    row.setAttribute("className", "tblrow");
    row.onmouseover = blue;

    4.
    var str = document.createElement( "INPUT" );
    str.setAttribute( "type", "checkbox" );
    str.setAttribute( "name", "chkItem" );
    td1.appendChild( str );

    This works with IE.
    Good luck, skriptor

  3. #3
    Join Date
    Feb 2003
    Posts
    8

    Thumbs up

    skriptor, thanks a lot!!! it's working perfectly well now!

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