简体   繁体   中英

Save all data in each table row using ajax jquery

How can I save each data in each table row using ajax jquery I have this table

在此处输入图片说明 I want to save this as the same in my sql database or atleast just get each table row and loop it every number of rows let say I'll save all value in row reference ID 1. How is that? I want to save this whole data as the same as its outputted So far I'm getting all value in all datacell.

using this code

$('table tr td').each(function(){
    arr.push($(this).text());                                                       
    });
    $.each(arr,function(index,value){
        alert(arr[index]);
    });  

I can give you another solution.
1. save your data in array
2. Convert that in JSON string.
3. Using NewtonSoft library convert JSON string into DataSet.

And now you can save that DataSet into your database(use Stored Procedure to save)

*Advantage is you can save your whole table in one call.

You can use this way :

<table id="testTable">
    <tr><td>Name</td><td>Class</td></tr>
    <tr><td>Test Name 1</td><td>Class 1</td></tr>
    <tr><td>Test Name 2</td><td>Class 2</td></tr>
    <tr><td>Test Name 3</td><td>Class 3</td></tr>
    <tr><td>Test Name 4</td><td>Class 4</td></tr>
</table>

<script>

    $(document).ready(function(){

        headings=[];
        tableRowData=[];        

        $('#testTable tr').eq(0).each(function(){

            $(this).find('td').each(function(){

                tdText=$(this).text();                  
                headings.push(tdText);
            });

        });

        tableRowData=[];            
        $.each(headings , function(i, val) { 
            tableRowData[i]=[]; 
        });

        $('#testTable tr').not(':first').each(function(){

            i=0;
            $(this).find('td').each(function(){

                tdText=$(this).text();

                tableRowData[i].push(tdText);
                i++;
            });

        });         

        console.log(headings);
        console.log(tableRowData);

        $.ajax({
            url: 'test.php',
            type: 'get',
            async: false,               
            data: {headings:headings,tableRowData:tableRowData,},
            success: function(response_msg){                        

                //Success                                       
            },
            error:function(){

                alert('Failure, some problem');

            }
        });

    });

</script>

In this way to can get table data to PHP server page in the form of Array , mapping of headings & headings data can be done using key of both array.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM