views:

65

answers:

3

Hi,

I'm looking for some help on the javascript angle of this problem. I have a table that goes like...

<table>
 <tbody>
  <tr> (Row 1)
   <td colspan="3">
    <p>This Says Something</p>
   </td>
  </tr>
  <tr> (Row 1a)
   <td>
    <select option>
   </td>
  </tr>
  <tr> (Row 2)
   <td colspan="3">
    <p>This Says Something</p>
   </td>
  </tr>
  <tr> (Row 2a)
   <td>
    <select option>
   </td>
  </tr>
  <tr>
   <td colspan="3">
    <p>This Says Something</p>
   </td>
  </tr>
  <tr>
   <td>
    <select option>
   </td>
  </tr>
 <tbody>
</table>

There are actually more like 20 rows and row a's but I didn't think I'd want to copy them all.

I basically need to add a container row (a single row) around every two rows (# and #a). Something like:

<tr> (Container Row 1)
 <td>
  +<tr> (Row 1)
  +<tr> (Row 1a)
 </td>
</tr>

It needs to cycle through the whole table. Somehow it has to retain the HTML data inside since all of the "a"s have options.

I hope this makes sense...

Any help would be greatly appreciated, as I'm at a loss. I'm novice at best at javascript and am struggling my way through the DOM and TOM methods.

Thank you so much in advance for any help or headway.

[EDIT] For clarification, the table is already constructed from a third party database, I am editing it after it's constructed. I guess this clarifies why it would have to be javascript to be done through the DOM.

A: 

Embed another table:

<tr> (Container Row 1)
 <td>
  <table>
    <tr><td>(Row 1a)</td></tr>
    <tr><td>(Row 1b)</td></tr>
  </table>
 </td>
</tr>

Or if you are wanting to do that via Javascript, you can give the parent <td> an id and set it's innerHTML.

<tr> (Container Row 1)
 <td id='rowX'>
 </td>
</tr>


document.getElementById('rowX').innertHTML = "<table><tr><td>(Row 1a)</td></tr><tr><td>(Row 1b)</td></tr></table>";
kanaka
A: 

As mentioned in another answer you can't add tr elements directly in td like you are trying.
You would first create an inner table.

If you were using jQuery you would do something like this:

//setup some click actions just to prove that they remain attached even after moving
$('#outterTable tr').click(function(){
    alert('You clicked on row: '+$(this).text());
});

//update the table (group each even row with the one after it)
$('#outterTable tr:even').each(function() {
    var $tr1 = $(this),
        $tr2 = $tr1.next('tr'),
        $t = $('<table></table>');
    $('<tr></tr>').append($t).insertBefore($tr1);
    //click actions will remain attached
    //if that is not required, than use $tr1.remove()
    $t.append($tr1).append($tr2);
});​

See this live jsFiddle example.

Dan Manastireanu
I know this will do what I need it to but I am unable to use jQuery because I am using a javascript include to editing a .asp (which I don't have access to to add jquery includes) page as it is constructed. Is there any way to translate this to regular javascript? Or I saw this comment and was wondering what exactly it meant: "you could always prepend a minified verison to the source file."
Justin
A: 

without jQuery it may look like that:

  <script type="text/javascript">
  <!--
  function fx(table)
  {
    var tmp=document.createElement('table');
    tmp.appendChild(document.createElement('tbody'))

   while(table.rows.length)
   {
     if(table.rows.length%2==0)
     {
       var wrapper=tmp.lastChild.appendChild(document.createElement('tr'));
       wrapper.appendChild(document.createElement('td'));
       wrapper.getElementsByTagName('TD')[0].appendChild(document.createElement('table'));
       wrapper.getElementsByTagName('TD')[0].lastChild.appendChild(document.createElement('tbody'));
     }
     wrapper.getElementsByTagName('TD')[0].lastChild.lastChild.appendChild(table.getElementsByTagName('TR')[0])
   }
   table.parentNode.replaceChild(tmp,table);
   tmp.setAttribute('border',1);
 }
  window.onload=function(){fx(document.getElementsByTagName('table')[0]);}
  //-->
  </script>

Example@jsFiddle

But: why do you need this grouping? If the only benefit is a visible grouping I would prefer to do this by setting the borders of the cells .
Give all cells a border and to the even a border-top:none / to the odd a border-bottom: none

Dr.Molle
Thank you for this, I'll implement it as soon as I can to see if it works. As for the reason for the grouping, each # row is a title and each #a row is the select option, but I have to apply a background image to each combined row set.
Justin