Solved

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

Posted on 2010-09-07
8
674 Views
Last Modified: 2012-05-10
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..
0
Comment
Question by:MinnRick
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 33624689
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
 
LVL 6

Accepted Solution

by:
DalHorinek earned 500 total points
ID: 33624731
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33625152
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
 

Author Comment

by:MinnRick
ID: 33630571
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33630852
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
 
LVL 6

Assisted Solution

by:DalHorinek
DalHorinek earned 500 total points
ID: 33634477
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
 

Author Comment

by:MinnRick
ID: 33654426
Thanks all - very helpful.
0
 

Author Closing Comment

by:MinnRick
ID: 33654429
Fully and clearly answered my two questions.  Excellent assistance.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now