How to get the whole HTML table values on a click

Question

Here I am getting the table single tr values in the click of that tr . What I need is to get the whole table tr values in a single button or div click.Here is the code which I am using from this http://forums.asp.net/t/1652535.aspx

http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"

$(function () {
         var message = $('#message');
         var tr = $('#tbl').find('tr');
         tr.bind('click', function (event) {
         var values = '';
         var tds = $(this).find('td');
         $.each(tds, function (index, item) {
         values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
         });
         message.html(values);
         });
         });

and

 <form id="form1" runat="server"> 
        <table id="tbl" style="border: solid 1px black"> 
            <tr> 
                <td> 
                    1 
                </td> 
                <td> 
                    a 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    2 
                </td> 
                <td> 
                    b 
                </td> 
            </tr> 
            <tr> 
                <td> 
                    3 
                </td> 
                <td> 
                    c 
                </td> 
            </tr> 

        </table> 
        <br /> 
        <div id="message"> 
        </div> 
        </form> 

Any suggestion?

Answer 1

Try this:

$(function () {
     var message = $('#message');
     var table = $('#tbl');
     table.bind('click', function(){
         var values = '';
         var valArray = new Array();             
         var j = 0;
         var tr = $(this).find('tr');
         tr.each(function(){
             var i = 0;
             valArray[j] = new Array();
             var tds = $(this).find('td');
             $.each(tds, function (index, item) {
                 values = values + 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
                 valArray[j][i] = 'td' + (index + 1) + ':' + item.innerHTML + '<br/>';
                 i++;
             });
             j++;
         });
         message.html(values);
         //valArray is going to have your data organized in an bidimensional array style
     });                                    
 });

Answer 2

jQuery("#submit").click(function(){
 var tblValue = jQuery("#tbl1").html();
 jQuery("#hiddenInput").val(tblValue);
document.forms["myform"].submit();
});

Create an input type hidden between the form.

<form name="myform" id="tbl1">
#your table html code
<input type="hidden" id="hiddenInput" />
<input type="submit" id="submit" />
</form>