Loop through the rows in MVC3 WebGrid using jQuery

Question

I need to update all the records in my WebGrid.

Can someone suggest me how to access each row individually so that I will loop through all the rows and update them simultaneously?

Sample HTML code:

<table class="gridTable" id="WebGrid1">
    <thead>
        <tr class="gridHead">
            <th scope="col">
                <a href="/?sort=Employee+Id&amp;sortdir=ASC">Employee Id</a>
            </th>
            <th scope="col">
                <a href="/?sort=Employee+Name&amp;sortdir=ASC">Employee Name</a>
            </th>
            <th scope="col">
                <a href="/?sort=Designation&amp;sortdir=ASC">Designation</a>
            </th>
            <th scope="col">
                <a href="/?sort=Action&amp;sortdir=ASC">Action</a>
            </th>
        </tr>
    </thead>
    <tfoot>
        <tr class="gridFooter">
            <td colspan="4">
                1 <a href="/?page=2">2</a> <a href="/?page=3">3</a> <a href="/?page=2">&gt;</a>
                <a href="/?page=3">&gt;&gt;</a>
            </td>
        </tr>
    </tfoot>
    <tbody>
        <tr class="gridRow">
            <td>
                <span><span id="spanEmpId_1">1</span>
                    <input id="EmpId_1" name="EmpId_1" style="display: none" type="text" value="1">
                </span>
            </td>
            <td>
                <span><span id="spanEmpName_1">john </span>
                    <input id="EmpName_1" name="EmpName_1" style="display: none" type="text" value="john                                              ">
                </span>
            </td>
            <td>
                <span><span id="spanEmpDesg_1">CEO </span>
                    <input id="EmpDesg_1" name="EmpDesg_1" style="display: none" type="text" value="CEO                                               ">
                </span>
            </td>
            <td>
                <a href="#" id="Edit_1" class="edit">Edit</a> <a href="#" id="Update_1" style="display: none"
                    class="update">Update</a> <a href="#" id="Cancel_1" style="display: none" class="cancel">
                        Cancel</a> <a href="#" id="Save_1" style="display: none" class="save">Update</a>
                <a href="#" id="iCancel_1" style="display: none" class="icancel">Cancel</a> <a href="#"
                    id="Delete_1" class="delete">Delete</a>
            </td>
        </tr>
        <tr class="gridAltRow">
            <td>
                <span><span id="spanEmpId_2">2</span>
                    <input id="EmpId_2" name="EmpId_2" style="display: none" type="text" value="2">
                </span>
            </td>
            <td>
                <span><span id="spanEmpName_2">Marks </span>
                    <input id="EmpName_2" name="EmpName_2" style="display: none" type="text" value="Marks                                             ">
                </span>
            </td>
            <td>
                <span><span id="spanEmpDesg_2">TL </span>
                    <input id="EmpDesg_2" name="EmpDesg_2" style="display: none" type="text" value="TL                                                ">
                </span>
            </td>
            <td>
                <a href="#" id="Edit_2" class="edit">Edit</a> <a href="#" id="Update_2" style="display: none"
                    class="update">Update</a> <a href="#" id="Cancel_2" style="display: none" class="cancel">
                        Cancel</a> <a href="#" id="Save_2" style="display: none" class="save">Update</a>
                <a href="#" id="iCancel_2" style="display: none" class="icancel">Cancel</a> <a href="#"
                    id="Delete_2" class="delete">Delete</a>
            </td>
        </tr>
        <tr class="gridRow">
            <td>
                <span><span id="spanEmpId_3">3</span>
                    <input id="EmpId_3" name="EmpId_3" style="display: none" type="text" value="3">
                </span>
            </td>
            <td>
                <span><span id="spanEmpName_3">Steve </span>
                    <input id="EmpName_3" name="EmpName_3" style="display: none" type="text" value="Steve                                             ">
                </span>
            </td>
            <td>
                <span><span id="spanEmpDesg_3">PM </span>
                    <input id="EmpDesg_3" name="EmpDesg_3" style="display: none" type="text" value="PM                                                ">
                </span>
            </td>
            <td>
                <a href="#" id="Edit_3" class="edit">Edit</a> <a href="#" id="Update_3" style="display: none"
                    class="update">Update</a> <a href="#" id="Cancel_3" style="display: none" class="cancel">
                        Cancel</a> <a href="#" id="Save_3" style="display: none" class="save">Update</a>
                <a href="#" id="iCancel_3" style="display: none" class="icancel">Cancel</a> <a href="#"
                    id="Delete_3" class="delete">Delete</a>
            </td>
        </tr>
        <tr class="gridAltRow">
            <td>
                <span><span id="spanEmpId_4">4</span>
                    <input id="EmpId_4" name="EmpId_4" style="display: none" type="text" value="4">
                </span>
            </td>
            <td>
                <span><span id="spanEmpName_4">winslet </span>
                    <input id="EmpName_4" name="EmpName_4" style="display: none" type="text" value="winslet                                           ">
                </span>
            </td>
            <td>
                <span><span id="spanEmpDesg_4">DM </span>
                    <input id="EmpDesg_4" name="EmpDesg_4" style="display: none" type="text" value="DM                                                ">
                </span>
            </td>
            <td>
                <a href="#" id="Edit_4" class="edit">Edit</a> <a href="#" id="Update_4" style="display: none"
                    class="update">Update</a> <a href="#" id="Cancel_4" style="display: none" class="cancel">
                        Cancel</a> <a href="#" id="Save_4" style="display: none" class="save">Update</a>
                <a href="#" id="iCancel_4" style="display: none" class="icancel">Cancel</a> <a href="#"
                    id="Delete_4" class="delete">Delete</a>
            </td>
        </tr>
    </tbody>
</table>

@ Ravi, I am Pretty new to jQuery , I dont know the syntax of "for" in jquery especially while using iterating the webgrid rows. Could you please suggest me the syntax of iterating the webgrid rows — Sudhakar Byna
– Sudhakar Byna, Commented Jan 23, 2013 at 10:45
@RoryMcCrossan, I need to iterate my webgrid rows in JQuery . Do you want me to show my webgrid initialization code. — Sudhakar Byna
– Sudhakar Byna, Commented Jan 23, 2013 at 10:47

muthu · Accepted Answer · 2013-01-23 11:24:57Z

4

You may loop through like this

jQuery(document).ready(function(){

    jQuery("table tbody tr").each(function(){
     var get_id= jQuery(this).find('input[type=text]').attr('id');

    });


});

answered Jan 23, 2013 at 11:24

muthu

5,4892 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sudhakar Byna Over a year ago

@muthu, Here the loop is executing only once, I want the loop to be executed for all the tr's in the table

muthu Over a year ago

@SudhakarByna who told loop is executing only once please check this jsfiddle.net/muthusamy/HSdaG/2

Sudhakar Byna Over a year ago

@muthu, Could you please show me that how can i get the entire row in single iteration.

Azhar Khorasany Over a year ago

+1 Used your for loop to do something that I wanted to do. Just needed to know how the foreach works in JQuery.

muthu Over a year ago

@AzharKhorasany. Please refer stackoverflow.com/questions/13187156/….

Collectives™ on Stack Overflow

Loop through the rows in MVC3 WebGrid using jQuery

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related