Adding a row dynamically after a row with a class

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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. :(
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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?
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

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

That should help you out. :)
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

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.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 46 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.