使用jQuery循环遍历MVC3 WebGrid中的行

Question

我需要更新WebGrid中的所有记录。

有人可以建议我如何单独访问每一行，以便循环遍历所有行并同时更新它们吗？

示例HTML代码：

<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>

Answer 1

你可以像这样循环

jQuery(document).ready(function(){

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

    });


});