asked on

Use the DOM or SPAN ID to insert <TR> below another

I have the following code and I need to insert a row dynamically below the row where there is a "Home Number:" as innerText in that row. You can use the DOM to loop through or the span tag, but I just don't know how to do either.

<html>
<script>
 
sTR = document.getElementsByTagName("TR");
for(i=0;i<sTR.length;i++) {
	// if the row has "Home Number:" then add a row below it
}
</script>
 
<body>
 
<form>
 
<TABLE CLASS=CONTENT WIDTH=100%>
<TR><TD COLSPAN=10></TD></TR>
<TR></TR>
<TR>
<TD VALIGN=TOP >
	<SPAN ID=_Captlead_personlastname class=VIEWBOXCAPTION>Last name:</SPAN><br>
	<SPAN ID=_Datalead_personlastname class=VIEWBOX STYLE=WIDTH:"100px">asdf</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personlastname value="asdf">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personfirstname class=VIEWBOXCAPTION>First name:</SPAN><br>
	<SPAN ID=_Datalead_personfirstname class=VIEWBOX STYLE=WIDTH:"100px">asdf</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personfirstname value="asdf">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personsalutation class=VIEWBOXCAPTION>Salutation:</SPAN><br>
	<SPAN ID=_Datalead_personsalutation class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personsalutation value="">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_persontitle class=VIEWBOXCAPTION>Title:</SPAN><br>
	<SPAN ID=_Datalead_persontitle class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_persontitle value="">
</TR>
<TR>
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personemail class=VIEWBOXCAPTION>E-mail:</SPAN><br>
	<SPAN ID=_Datalead_personemail class=VIEWBOX STYLE=WIDTH:"100px">asdf</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personemail value="asdf">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personphonenumber class=VIEWBOXCAPTION>Phone Number:</SPAN><br>
	<SPAN ID=_Datalead_personphonenumber class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personphonenumber value="">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personfaxnumber class=VIEWBOXCAPTION>Home Number:</SPAN><br>
	<SPAN ID=_Datalead_personfaxnumber class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personfaxnumber value="">
</TR>
</TABLE></TD>
 
<TD WIDTH=1px CLASS=TABLEBORDERRIGHT></TD></TR>
 
<TR HEIGHT=1><TD COLSPAN=3 WIDTH=1px CLASS=TABLEBORDERBOTTOM></TD></TR>
</TABLE>
 
</form>
</body>
</html>

Open in new window

Lolly-Ink

This works in IE7 and FF3:

<html>
<script>
   function doIt()
   {
      sTR = document.getElementsByTagName("TR");
      for (i = 0; i < sTR.length; i++) 
      {
         if (sTR[i].innerHTML.search("Home Number:") != -1)
         {
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            td.innerHTML = "Inserted Row";
            tr.appendChild(td);
            if (sTR[i].nextSibling)
            {
               sTR[i].parentNode.insertBefore(tr, sTR[i].nextSibling);
            }
            else
            {
               sTR[i].parentNode.appendChild(tr);
            }
         }
      }
   }
</script>
<body onload="doIt()">
<form>
<TABLE CLASS=CONTENT WIDTH=100%>
<TR><TD COLSPAN=10></TD></TR>
<TR></TR>
<TR>
<TD VALIGN=TOP >
	<SPAN ID=_Captlead_personlastname class=VIEWBOXCAPTION>Last name:</SPAN><br>
	<SPAN ID=_Datalead_personlastname class=VIEWBOX STYLE=WIDTH:"100px">asdf</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personlastname value="asdf">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personfirstname class=VIEWBOXCAPTION>First name:</SPAN><br>
	<SPAN ID=_Datalead_personfirstname class=VIEWBOX STYLE=WIDTH:"100px">asdf</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personfirstname value="asdf">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personsalutation class=VIEWBOXCAPTION>Salutation:</SPAN><br>
	<SPAN ID=_Datalead_personsalutation class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personsalutation value="">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_persontitle class=VIEWBOXCAPTION>Title:</SPAN><br>
	<SPAN ID=_Datalead_persontitle class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_persontitle value="">
</TR>
<TR>
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personemail class=VIEWBOXCAPTION>E-mail:</SPAN><br>
	<SPAN ID=_Datalead_personemail class=VIEWBOX STYLE=WIDTH:"100px">asdf</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personemail value="asdf">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personphonenumber class=VIEWBOXCAPTION>Phone Number:</SPAN><br>
	<SPAN ID=_Datalead_personphonenumber class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personphonenumber value="">
<TD  VALIGN=TOP >
	<SPAN ID=_Captlead_personfaxnumber class=VIEWBOXCAPTION>Home Number:</SPAN><br>
	<SPAN ID=_Datalead_personfaxnumber class=VIEWBOX STYLE=WIDTH:"100px">&nbsp;</SPAN></TD>
	<input type=hidden name=_HIDDENlead_personfaxnumber value="">
</TR>
</TABLE></TD>
 
<TD WIDTH=1px CLASS=TABLEBORDERRIGHT></TD></TR>
 
<TR HEIGHT=1><TD COLSPAN=3 WIDTH=1px CLASS=TABLEBORDERBOTTOM></TD></TR>
</TABLE>
 
</form>
</body>
</html>

Open in new window

saturation

ASKER

Ok, that works, and I'll definitely award points, but it turns out I absolutely need to look for the span id=_Captlead_personphonenumber, find that row, then insert a row after it rather than looping through the DOM and <TR> tags. Are you able to help me do this?

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Use the DOM or SPAN ID to insert &lt;TR&gt; below another

Use the DOM or SPAN ID to insert <TR> below another