Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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>');
    The form data is done, I would now like to iterate through the table to retrieve that data.

    The table look's like this:




    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());
     });
    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:
    <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>
    I am quite new to javascript and JQuery and would appreciate any help.

    Thank you!

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Location
    London
    Posts
    152
    Thanks
    4
    Thanked 42 Times in 42 Posts
    Code:
    function getData() {
      var data = [];
      $('#table tr')
        .filter(function(rowIndex) {return $("img[src='images/checkmark.png']", this).length == 1; })
        .each(function(rowIndex, row) {
          var str = '<parts><rowIndex>' + row.rowIndex + '</rowIndex>';
          $(row).find('td').each(function(colIndex, col) {
            if(colIndex === 1)
              str += '<vendorPart>' + $(col).text() + '</vendorPart>';
            else if(colIndex === 4)
              str += '<quantity>' + $(col).find('input').val() + '</quantity>';
          });
        str += '</parts>';
        data.push(str);
      });
      alert(data.join('\n'));
    }


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •