1

I have an HTML Table and I am retrieving the data (using Jquery function) from the specific <td> VALUES and pass the data to another java server page using Ajax.

This is the table <tr>

<tr height=40 style='mso-height-source:userset;height:30.0pt'>
 **<td class=xl86 style='border-left:none' contenteditable="true">&nbsp;</td>
  <td class=xl86 style='border-left:none' contenteditable="true">&nbsp;</td>
  <td class=xl86 style='border-left:none'contenteditable="true" >&nbsp;</td>
  <td class=xl86 style='border-left:none'contenteditable="true">&nbsp;</td>**
 </tr>

I code a jQuery function for retrieving these table values individually that is below.

$(document).ready(function () { 
                var col1=" ";
                var col2=" ";
                var col3=" ";
                var col4=" ";
            $('#btn_read_HTML_Table').click(function () {                
                 
              $('#mytable tbody>tr').each(function () { 
                  var currentRow=$(this).closest("tr");
                    col1=currentRow.find("td:eq(0)").text();
                    col2=currentRow.find("td:eq(1)").text();
                    col3=currentRow.find("td:eq(2)").text();
                    col4=currentRow.find("td:eq(3)").text();
                   var data1=col1+"\n"+col2+"\n"+col3+"\n"+col4;
                   
                   });
                   
                   $.ajax({
                    url: "load_tabledata.jsp",
                    type:'POST',
                    data:{c1: col1,c2:col2,c3:col3,c4:col4},
                    success: function (data, textStatus, jqXHR) {
                          console.log(data);
                          
                         
                     }
                    })
               
                
                
            }); 
            
        });

Problem is Ajax taking empty value of var col,col2,col3 and col4 but inside function table values retrieving.

I want to get these retrieved values in my ajax function so that I could pass these values inside the data.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Hamdan Ali
  • 53
  • 9
  • Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – traktor May 05 '21 at 14:41
  • 1
    If you need to send all values to ajax use array because you are overriding previous value with new values inside each loop . Also , put console to see if value actually there ie : `console.log(col1)`. – Swati May 05 '21 at 15:02
  • I use console.log(col1) but not showing anything on console @Swati can you please give me a code instance of how can I use the array inside the above code? – Hamdan Ali May 05 '21 at 15:18
  • For the HTML posted, there is no `td:eq(5)`, `td:eq(6)`, `td:eq(7)` or `td:eq(8)` – Musa May 05 '21 at 15:24
  • @Musa I have deleted the above fields td:eq(0),td:eq(1),td:eq(2),td:eq(3),td:eq(4) when i was posting this question. In my actual HTML Table, these fields come at the same positions as I mentioned in posted HTML but thanks let me know about I've edited according to the question now. – Hamdan Ali May 05 '21 at 15:30
  • 1
    Your td doesn't have any value its   ? and you can try like [this](https://jsfiddle.net/vep1g8dh/) – Swati May 05 '21 at 16:17
  • @Swati Sorry for the late reply but your idea works like a charm and but I was unable to use JSON.stringify() method but I wrote another code for that. Thanks – Hamdan Ali May 08 '21 at 15:27

0 Answers0