Loop through table with specific conditions (turning data into an xml string)

Hey all,

I currently have a form with data being displayed via a web service call with JQuery’s $.ajax() function which dynamically feeds the values into input fields into the form and creates table data too. I would like to retrieve the data from this form and put it into an XML string to send back to the web service.

Currently my code to retrieve the data from the input fields look’s like this:

[CODE]var cb = document.getElementById(‘paymentList’);
var selected_cb = cb.options[cb.selectedIndex].text;
var check = document.getElementsByName(“renew”);
var count = 0;
var $xml = $(‘<string><approver>’+document.getElementById(‘approver’).value+'</approver><emailAddress>’+document.getElementById(’emailaddress’).value+'</emailAddress><address1>’+document.getElementById(‘address1’).value+'</address1><address2>’+document.getElementById(‘address2’).value+'</address2><city>’+document.getElementById(‘city’).value+'</city>0<province>’+document.getElementById(‘province’).value+'</province><country>’+document.getElementById(‘country’).value+'</country><postalCode>’+document.getElementById(‘postalcode’).value+'</postalCode><phoneNumber>’+document.getElementById(‘phone’).value+'</phoneNumber><paymentMethod>’+selected_cb+'</paymentMethod>’);[/CODE]

The form data is done, I would now like to iterate through the table to retrieve that data.

The table look’s like this:

[URL=”http://i.stack.imgur.com/Tyalh.png”]Table link here[/URL]

If you notice the first column and last column are different here. So I can retrieve all of the table data with this function here:

[CODE]var cells = new Array();
$(“tbody td”).each(function(){
cells.push($(this).html());
});[/CODE]

However this gives me the <img> tag for the image, and the <input> tag for the input field at the end. What I would like to do is only retrieve the data if the img’s src is “images/checkmark.png” and not “images/gray_x.png” (using this function it does show the appropriate image src as the image changes on the html page). I would also like to retrieve only the value of the input field. So basically only take the data where there is a checkmark in the first column and try to append some xml tag to the data, so for vendor part I would have perhaps something like <vendorPart> ASKU1234</vendorPart>. I have no idea how to do this, as I would like to append this to the above xml string and send it to the web service.

Here is the HTML for the table:

[code=html]<table border=”0″ width=80% id=”table”>
<thead>
<tr>
<td><h3>Check to Renew</h3></td>
<td width=40%><h3>Vendor Part</h3></td>
<td width=100%><h3>Part Description</h3></td>
<td><h3>Unit Price</h3></td>
<td><h3>Quantity</h3></td>
</tr>
</thead>
<tbody>
<tr class=”template”>
<td><img src=”images/checkmark.png” onclick=”toggle(this)” alt=”check” class=”renew” /></td>
<td>$vendorPart</td>
<td>$partDescription</td>
<td>$price</td>
<td><input class=”quantityClass” name=”quantity” value=”$quantity”/></td>
</tr>
</tbody>
</table>[/code]

I am quite new to javascript and JQuery and would appreciate any help.

Thank you!

Also in #JavaScript _↴