Extract/Move Code Dependent Upon Data

I need to make some code location changes based upon if a particular row exists.

1: There’s no way to edit the template code to add classifications to rows and cells and use CSS/jQuery to modify the data.
2: The issue is that if the ‘Purchase Order Number’ heading exists, then I need to move that row elsewhere. I will also need to move the ‘Billing City, State, Zip Code’ content directly underneath the ‘Billing Address’ content. Meaning, I would need to use jQuery to extract the data in the cell and move directly underneath the ‘Bill Address’ data, then remove the ‘Billing City, State, Zip Code’ heading (I’m sure using ‘visibility hidden’ in jQuery will solve that) and then go from there.

Is there a way in jQuery to extract/move data dependent upon certain data in another location and move an entire element? Below is the data I’m working with.

<table class="shop_table customer_details col-sm-6">
	<tbody><tr>
		<td colspan="2"><h2>Customer Details</h2></td>
    </tr>
   
			<tr>
			<th>Email:<br>
            Telephone:</th>
			<td>asivas@canaanco.com<br>
            209-000-0000</td>
		</tr>
	    
         
    
        		<tr class="billingad"><th>Billing Address:</th>
        	<td>Heather visser<br>Nettra Marketing<br>744 P St #330</td>
    	</tr>
     
	<tr><th>Purchase Order Number:</th><td>my purchase order</td></tr><tr><th>Billing City, State, Zip Code:</th><td>Fresno</td></tr><tr class="shippingad"><th>Shipping Address:</th><td>744 P St #330</td></tr><tr><th>Shipping City, State, Zip Code:</th><td>93711</td></tr>    
</tbody></table>

it seems that using jQuery selectors is the easiest solution for you here.

To help you get started, you can use the jQuery selector tester where you put in your HTML, and can try out different jQuery selectors to retrieve different information.

For example, the TH element on the purchase order row can be obtained with the following selector:

.customer_details tr:eq(4) th

I understand selectors, with some limitation. In my case, if I was to think of this logically, I would want to use a selector that would add a class to the row (<tr>) where the heading text ‘Purchase Order Number:’ resides. Then I can move that row out of the way and format all other info. accordingly. I would also want to do the same with the row that has the ‘Billing City, State, Zip’ and others so I can format them accordingly.

My problem is trying to add a class to the ‘Purchase Order’ tag if it exists (and ONLY if it exists). Otherwise using .customer_details tr:eq(4) th isn’t useful.

Why are you wanting to add a class to the row, when you can already access the row using the above selector, and assign that row to a variable?

Because that 4th row that you are referencing may not always exist. Therefore, if I run that type of script on the fourth row that may not be the ‘Purchase Order…’ row, it’ll much things up.

If it doesn’t exist, the the selected jQuery object will have a length of zero. Your easy way to tell if anything exists there is to check if the selected jQuery object has a length greater than zero. If it does, you can then go ahead with dealing with the purchase order.

That’s the thing, that row will always have something in it whether it’s the ‘Purchase Order Number’ row or the row below it. That’s why I was hoping that with jQuery, I can be particular based upon another part of an element.

If the row will always be available, you can to then use that as a starting base point from which to check for something deeper that will or will not be there.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.