How to target/insert into a particular html table row?

[Freejoy]

Hi,

I’ve got another javascript puzzle I can’t figure out.

This script targets the last column in the table, I’ve been trying to get it to target the new row I made (see image below)

Here is the script:

<script>
	document.observe( 'dom:loaded', function(){
		/* ADD ACTION COLUMN */
		$$('#shopping-cart-table tbody tr select').each( function( qty_input ){
			item_id = $(qty_input).readAttribute('name').replace( /(^.+\D)(\d+)(\D.+$)/i,'$2');
			qty_input.up().up().select("td:last-child")[0].insert('<a href="<?php echo Mage::getUrl('saveforlater'); ?>index/save/item/'+ item_id +'" class="saveforlater-action" title="Save Item For Later">Save For Later</a></td></tr>');
		} );
		/* END ADD ACTION COLUMN */
	} );
</script>

It’s this part that needs a changed somehow: qty_input.up().up().select("td:last-child")[0].insert()

Thank you

[Dormilich]

tbody tr:last-child td:last-child ? Although that’s assuming there are no nested tables.

[Freejoy]

You mean like this?

qty_input.up().up().select("tbody tr:last-child td:last-child")[0].insert('stuff');

[Dormilich]

I’m not familiar with what or where qty_input is an what exactly up() & select() do, so I can’t tell. It definitely works with respect to the table element.

[m_hutley]

What library are you implementing to give you the functions up,select, etc? It seems like a jQuery-esque one, but jquery doesnt implement an .up()…

[Freejoy]

I think I’m using prototype.js

Here’s the table I tried to copy from soruce:

<table id="shopping-cart-table" class="data-table cart-table">
<colgroup>
<col width="1">
<col>
<col width="1">
<col width="1">
<col width="1">
<col width="1">
<col width="1">
</colgroup>
<thead>
<tr class="first last">
<th>Item</th>
<th>Item Name</th>
<th class="a-center">Price Each</th>
<th class="a-center">Quantity</th>
<th class="a-center">Subtotal</th>
<th class="a-center">&nbsp;</th></tr>
</thead>
<tbody>
<tr class="first odd">
<td rowspan="2">


</td>
<td rowspan="2">


</td>
<td class="a-right">

</td>

<td class="a-center">
<select name="cart[11234][qty]" onchange="form.submit()" style="padding:0">
<option value="1" selected="">1</option>
<option value="2">2</option>
</select>
</td>

<td class="a-right">
$48.97

</td>
<td class="a-center last">
Remove item
Save Item For Later <---this is the way it is now
</td>
</tr>
<tr class="even">
<td class="a-center last" colspan="4">

TRYING TO MOVE (Save Item For Later) TO HERE 
</td>
</tr>
<tr class="last odd">
</tr>
</tbody>
</table>

[Freejoy]

I have Jquery I think 2.0 installed also if that helps.

[Dormilich]

wouldn’t it be easier to do that in PHP than through a combination of PHP and JS?

[m_hutley]

So, we know we have an .up() tool at our disposal, and a .select() tool at our disposal. A quick glance at the prototype.js docs tell me there’s also a .next() which shifts down one sibling.

Let’s narrow HTML down to the relevant stuff: the tbody.

<tbody>
<tr class="first odd">
<td rowspan="2">


</td>
<td rowspan="2">


</td>
<td class="a-right">

</td>

<td class="a-center">
<select name="cart[11234][qty]" onchange="form.submit()" style="padding:0">
<option value="1" selected="">1</option>
<option value="2">2</option>
</select>
</td>

<td class="a-right">
$48.97

</td>
<td class="a-center last">
Remove item
Save Item For Later
</td>
</tr>
<tr class="even">
<td class="a-center last" colspan="4">

TRYING TO MOVE (Save Item For Later) TO HERE
</td>
</tr>
<tr class="last odd">
</tr>
</tbody>

the Select is inside a td. Fair enough. We dont care about anything else inside that TD. We also dont care about the options inside the select, because they’re not relevant to our navigation.
that TD is in a TR, but our target isnt inside the same TR. So we dont care about anything else inside the TR but the TD that contains our select.
There’s more TR’s in the table, but the one we’re looking for is right next to the one we start in, so we dont care about any other TR’s.
The TR our target is in contains only one TD, and it’s our target.
That narrows the relevant HTML to:

<tr class="first odd">
  <td class="a-center">
    <select name="cart[11234][qty]" onchange="form.submit()" style="padding:0">
    </select>
  </td>
</tr>
<tr class="even">
  <td class="a-center last" colspan="4">
    TRYING TO MOVE (Save Item For Later) TO HERE
  </td>
</tr>

So. We start at the Select, and we need to move to the target, using the tools we have.
Step 1: Go up. (Now we’re at the td.)
Step 2: Go up again. (Now we’re at the tr)
Step 3: Go to the next TR (Now we’re at the second TR)
Step 4: Go down to the target TD (which is the only TD)

qty_input.up().up().next().select("td")

[Freejoy]

That worked dude!

I loved the way you explained it. The .up had me puzzled.

thanks!