Can jQuery Parse an HTML Table and Load Its Contents To a Database?

Hello experts.  I have a simple ASP.NET page that renders (for purposes of this discussion) a simple table:
<table>
   <tr>
      <td class='fieldA'>1</td><td class='fieldB'>2</td><td class='fieldC'>3</td>
   </tr>
   <tr>
      <td class='fieldA'>3</td><td class='fieldB'>6</td><td class='fieldC'>9</td>
   </tr>
   <tr>
      <td class='fieldA'>5</td><td class='fieldB'>10</td><td class='fieldC'>15</td>
   </tr>
</table>

I'd like to know if it is possible (and if so, how) to use jQuery to do two things:
   1.  Read/parse the contents of the cells, and
   2.  Take the parsed data and insert (or trigger an event which inserts) it into a SQL Server database table.

Assume a button click to initiate the process.  Thanks much all..
MinnRickAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

 
Samuel LiewCommented:
Short answer: Yes and Yes.

Note: jQuery is just a JavaScript framework. It can be done using normal JavaScript also.

1.  Read/parse the contents of the cells

- Quite easy to do this. Create a statement that loops through all cells in the table, and serialize the data to whatever format your database stores it in. Use an onclick event on a button to perform this action.

2.  Take the parsed data and insert (or trigger an event which inserts) it into a SQL Server database table.

- You can use a normal form submit to post the data to a backend page/script which does this. You may use hidden fields to pass the generated content from #1 to the server.
0
 
DalHorinekCommented:
It might work as follows:

var insert_data = new Array();
$("table#the_table").find("tr").each ( function() {
    $(this).find("td").each( function() {
         insert_data.push($(this).html());
   });
});

and then send it using ajax to server side script to store it into database.

0

Experts Exchange Solution brought to you by ConnectWise

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
 
Gurvinder Pal SinghCommented:
Yes,  there are many jquery plugins available for table parsing through jquery
http://www.webdesignbooth.com/15-great-jquery-plugins-for-better-table-manipulation/

by the way, you do not need a specific api's for table elements parsing. You can simply treat it as a html element and give a selector to the jquery
http://www.learningjquery.com/2006/11/how-to-get-anything-you-want-part-1



0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MinnRickAuthor Commented:
Dal -
Thanks for the parsing code - just what I was looking for for #1.  Would you be able to provide some additional sample code that performs the last bit (send using AJAX..)?  That piece of the process has always been the most obscure to me.  Much appreciated..
0
 
Gurvinder Pal SinghCommented:
if you simply want to submit the comma separated values (in a get request) to the server,

makeAjaxCall(url, escape(insert_data.join(",")));

function makeAjaxCall(url, values)
{
      if (window.XMLHttpRequest)
      {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
      }
      else
      {
            // code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()
      {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                  document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
      }
      xmlhttp.open("GET", url + "?values=" + values ,true);
      xmlhttp.send();
}
0
 
DalHorinekCommented:
Or you can use jquery's ajax function.

$.ajax({
   url: "script_which_saves_data.php",
   type: "POST",
   data: "values="+insert_data.join(","),
   success: function(result) { window.alert("stored") },
   error: function (req, errorText, errorThrown) { window.alert("error " + errorText) }
}),


if you want to send it as GET, remove type or change it to GET.

More information about this call u can find here http://api.jquery.com/jQuery.ajax/
0
 
MinnRickAuthor Commented:
Thanks all - very helpful.
0
 
MinnRickAuthor Commented:
Fully and clearly answered my two questions.  Excellent assistance.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.