Back To Programming / Scripting / Coding Forum

Adding a row dynamically after a row with a class

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 18th, 2009, 9:39 pm

So I'm pretty excited about learning javascript and think I'm doin' pretty good for only being at it a week. Unfortunately this problem is stumping me and I think it's probably relatively simple. I'm just not sure what the steps should be.

I have a table with rows that have classes set dynamically through js that alternate between "searchresultseven" and "searchresultodd" and I'd like to dynamically insert a row after each existing row by classname.

example of the table:
Code: [ Select ]
 
<table class="searchresults" cellpadding="0" cellspacing="0" border="0">
   <tr id="searchresultsheader">
    <td>Art</td>
    <td>Score</td>
    <td>Artist</td>
    <td>Sortname</td>
    <td>Type</td>
    <td>Begin</td>
    <td>End</td>
    </tr>
   <tr class="searchresultseven">
      <td>&nbsp;</td>
      <td>99</td>
      <td><a href="/artist/b160e4df-52f8-4487-8375-e8fc7de4970b.html">Beethoven</a> (Marc Trauner)</td>
      <td>Beethoven</td>
      <td>person</td>
      <td>
      </td>
      <td>
      </td>
   </tr>
   <tr class="searchresultsodd">
      <td>&nbsp;</td>
      <td>62</td>
      <td><a href="/artist/84acc01c-0bad-4747-89b5-f7c4bc0bdcbe.html">Beethoven's Wig</a>
      </td>
      <td>Beethoven's Wig</td>
      <td>
      </td>
      <td>
      </td>
      <td>
      </td>
   </tr>
 
  1.  
  2. <table class="searchresults" cellpadding="0" cellspacing="0" border="0">
  3.    <tr id="searchresultsheader">
  4.     <td>Art</td>
  5.     <td>Score</td>
  6.     <td>Artist</td>
  7.     <td>Sortname</td>
  8.     <td>Type</td>
  9.     <td>Begin</td>
  10.     <td>End</td>
  11.     </tr>
  12.    <tr class="searchresultseven">
  13.       <td>&nbsp;</td>
  14.       <td>99</td>
  15.       <td><a href="/artist/b160e4df-52f8-4487-8375-e8fc7de4970b.html">Beethoven</a> (Marc Trauner)</td>
  16.       <td>Beethoven</td>
  17.       <td>person</td>
  18.       <td>
  19.       </td>
  20.       <td>
  21.       </td>
  22.    </tr>
  23.    <tr class="searchresultsodd">
  24.       <td>&nbsp;</td>
  25.       <td>62</td>
  26.       <td><a href="/artist/84acc01c-0bad-4747-89b5-f7c4bc0bdcbe.html">Beethoven's Wig</a>
  27.       </td>
  28.       <td>Beethoven's Wig</td>
  29.       <td>
  30.       </td>
  31.       <td>
  32.       </td>
  33.       <td>
  34.       </td>
  35.    </tr>
  36.  


so basically, I want to load the table; than insert a row with a single cell having a colspan of 7 (so one cell fills the entire row) after every row with a classname of "searchresultseven" or "searchresultsodd" and give it a classname of "resultrowspacer" or something to that effect.

Anyone have any pointers on how to do this?

The reason I have to do this dynamically is because the table is dynamically generated and I don't have access to the script which does creates the table. I'm sure I could get a hold of it if I asked the boss...but I highly doubt I'd be able to comprehend ANY of it since it ties into a perl database.

Also, I'd much rather try at first to figure out the script to do what I want myself...really right now I'm just looking for a point in the right direction. I've only found bits and pieces on the net but don't fully comprehend them. I'm guessing something along the lines of documentWrite but am not totally sure how to use this. :(
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post May 18th, 2009, 9:39 pm

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 18th, 2009, 11:54 pm

I may be making progress; but am not sure where to go from here.

I'm using a getElementByClass function written by this guy:
getElementByClassName

I saved this script as a js file and added that to the head of my page as a link.

than added this script in my page as well:

Code: [ Select ]
function insertRow()
{
var cont = document.getElementsByTagName(table);
 
var static1 = getElementsByClassName('searchresultseven', 'tr', cont);
var static2 = getElementsByClassName('searchresultodd', 'tr', cont);
var dynamic1 = document.createElement('<tr class="RowSpacer"></tr>');
var dynamic2 = document.createElement('<td class="cellSpacer"></td>');
 
for (var i = 0, j = myObjColl.length; i < j; i++) {
   static1.insertBefore(dynamic1);
static2.insertBefore(dynamic1);
document.getElementByClassName('RowSpacer', 'tr', cont).appendChild(dynamic2);
};
}
  1. function insertRow()
  2. {
  3. var cont = document.getElementsByTagName(table);
  4.  
  5. var static1 = getElementsByClassName('searchresultseven', 'tr', cont);
  6. var static2 = getElementsByClassName('searchresultodd', 'tr', cont);
  7. var dynamic1 = document.createElement('<tr class="RowSpacer"></tr>');
  8. var dynamic2 = document.createElement('<td class="cellSpacer"></td>');
  9.  
  10. for (var i = 0, j = myObjColl.length; i < j; i++) {
  11.    static1.insertBefore(dynamic1);
  12. static2.insertBefore(dynamic1);
  13. document.getElementByClassName('RowSpacer', 'tr', cont).appendChild(dynamic2);
  14. };
  15. }


and called that function with body onload="insertRow();"

so...how come it's not working?
Use your words like arrows to shoot toward your goal.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Joined: Jul 23, 2006
  • Posts: 139
  • Status: Offline

Post May 19th, 2009, 5:28 am

http://javascript.internet.com/miscella ... a-row.html

That should help you out. :)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post May 19th, 2009, 10:02 am

I think I came across this last night at one point but passed over it (I was really tired) thinking it wasn't what I wanted. I'll take a look and get back to you.
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 156 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.