www.webdeveloper.com
Results 1 to 2 of 2

Thread: need to modify script to add a row following the header row in a table, not last row.

  1. #1
    Join Date
    Apr 2010
    Posts
    2

    need to modify script to add a row following the header row in a table, not last row.

    here is the script as it sits: I need it to add a row following the first row (header) in the table...am thinking I need to use insertBefore but not sure how....much thanks guys

    function addTeaGrade(s){

    var tableElem, trElem, tdElem, textElem

    //get a handle for the table
    tableElem = document.getElementsByTagName("table")[0]

    //create text element with text entered by user
    textElem = document.createTextNode(s)
    //alert(textElem.nodeValue)

    //create td element
    tdElem = document.createElement("td")

    //create tr element
    trElem = document.createElement("tr")

    //assemble row:
    //footbone connected to the ankle bone,
    //ankle bone connected to the shin bone, etc.
    tdElem.appendChild(textElem)
    trElem.appendChild(tdElem)

    //get a handle for the TBODY element
    var tbodyElem = document.getElementsByTagName('TBODY')[0]

    //appendChild() inserts the new row as the last child of TBODY
    tbodyElem.appendChild(trElem)

    }

    </script>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,668
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script  type="text/javascript">
    /*<![CDATA[*/
    
    function addTeaGrade(s,nu){
    
    var tableElem, trElem, tdElem, textElem
    
    //get a handle for the table
    tableElem = document.getElementsByTagName("table")[0]
    
    //create text element with text entered by user
    textElem = document.createTextNode(s)
    //alert(textElem.nodeValue)
    
    //create td element
    tdElem = document.createElement("td")
    
    //create tr element
    trElem = document.createElement("tr")
    
    //assemble row:
    //footbone connected to the ankle bone,
    //ankle bone connected to the shin bone, etc.
    tdElem.appendChild(textElem)
    trElem.appendChild(tdElem)
    
    //get a handle for the TBODY element
    var tbodyElem = document.getElementsByTagName('TBODY')[0]
    var rows=tbodyElem.getElementsByTagName('TR');
    if (rows[nu]){
     tbodyElem.insertBefore(trElem,rows[nu])
    
    }
    else {//appendChild() inserts the new row as the last child of TBODY
    tbodyElem.appendChild(trElem)
    }
    }
    
     /*]]>*/
    </script></head>
    
    <body>
    <table border="1">
    <tbody>
    <tr><td>Row 0</td></tr>
    </tbody>
    </table>
    <input type="button" name="" value="Test 1" onclick="addTeaGrade('Test 1',1)"/>
    <input type="button" name="" value="Test 2" onclick="addTeaGrade('Test 2',1)"/>
    </form>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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