Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2008-11-19
3
Medium Priority
?
791 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:saturation
3 Comments
 
LVL 16

Expert Comment

by:Lolly-Ink
ID: 23001095
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

0
 

Author Comment

by:saturation
ID: 23001157
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?
0
 
LVL 44

Accepted Solution

by:
scrathcyboy earned 2000 total points
ID: 23018598
after the TD ID tage you are looking for, put this --

<SPAN id="2"> <TR> <TD id="2"> </TD> </TR> </SPAN>

put that in the page code at the outset, then reference the SPAN or TD by id=2 to add the text you want.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

805 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question