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

**kustomkomputers** · 04-14-2010 09:30 PM

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>

**vwphillips** · 04-15-2010 07:46 AM

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>

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

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions