Loop through the rows in MVC3 WebGrid using jQuery

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>

Answers


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');

    });


});

Need Your Help

Python: How to click on the screen at a specific place in python, MAC OS

python osx

I want to use a python program to move the cursor around on the screen and click on a specific location in Mac OS.

Converting multiple paths into one big 'connected' path in Expression Blend

wpf xaml expression-blend

I drew a shape with lots of 'lines' in Expression blend. In the XAML this gave me lots of small Paths.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.