Question

我有以下HTML表格。在每行的最后一列中有三个按钮。单击视图按钮时，我需要获取相应行的使用者ID。我有以下jQuery代码。 http://jsfiddle.net/Lijo/nUbB2/

1）是否有更好的jQuery代码？

2）目前我首先找到按钮 - 然后是其父行 - 然后是Consumer ID列。有没有办法从行开始，然后分别找到按钮和消费者ID列？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>

 </title>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
<script type="text/javascript">

    $(document).ready(function () {

        $('.resultGridTable tr > td > .actionButtonView').click(function () {
            //TRaversing to get the parent row and then the required columns in the row
            var consumerID = $(this).parents('tr:first').find('td:first').text();
            var consumerName = $(this).parents('tr:first').find('td:nth-child(2)').text();
            var configID = $(this).parents('tr:first').find('td:nth-child(5)').text();

            alert(consumerID + "," + consumerName + "," + configID);

            //window.location.href("SubscribedAssociates.aspx?ConsumerID=" + consumerID + "&consumerName=" + consumerName + "&configID=" + configID);
            return false;

        });

    });
</script>
</head>


<body>
<table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdConsumers"
    style="border-collapse: collapse;">
    <thead>
        <tr>
            <th scope="col">
                <a>Consumer ID</a>
            </th>
            <th scope="col">
                <a>Consumer Name</a>
            </th>
            <th scope="col">
                <a>Consumer URL</a>
            </th>
            <th scope="col">
                <a>Status</a>
            </th>
            <th scope="col">
                <a>Config ID</a>
            </th>
            <th scope="col">
                Action
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <a href="SubscribedAssociates.aspx?ConsumerID=101">101</a>
            </td>
            <td>
                Consumer1
            </td>
            <td>
                http://Consumer1.compnay.com/wps/payroll
            </td>
            <td>
                Active
            </td>
            <td>
                101
            </td>
            <td>
                <input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl02$btnView"
                    value="VIEW" id="detailContentPlaceholder_grdConsumers_btnView_0" class="actionButtonView"
                    style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
                <input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl02$btnEdit"
                    value="EDIT" id="detailContentPlaceholder_grdConsumers_btnEdit_0" class="actionButtonEdit"
                    style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
                <input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl02$btnDelete"
                    value="DELETE" id="detailContentPlaceholder_grdConsumers_btnDelete_0" class="actionButtonDelete"
                    style="color: White; background-color: Orange; font-weight: bold; width: 45px" />
            </td>
        </tr>
        <tr style="background-color: #E5E5E5;">
            <td>
                <a href="SubscribedAssociates.aspx?ConsumerID=102">102</a>
            </td>
            <td>
                Consumer2
            </td>
            <td>
                http://Consumer2.compnay.com/prd/sap/operations
            </td>
            <td>
                Active
            </td>
            <td>
                102
            </td>
            <td>
                <input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl03$btnView"
                    value="VIEW" id="detailContentPlaceholder_grdConsumers_btnView_1" class="actionButtonView"
                    style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
                <input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl03$btnEdit"
                    value="EDIT" id="detailContentPlaceholder_grdConsumers_btnEdit_1" class="actionButtonEdit"
                    style="color: White; background-color: Orange; font-weight: bold; width: 35px" />
                <input type="submit" name="ctl00$detailContentPlaceholder$grdConsumers$ctl03$btnDelete"
                    value="DELETE" id="detailContentPlaceholder_grdConsumers_btnDelete_1" class="actionButtonDelete"
                    style="color: White; background-color: Orange; font-weight: bold; width: 45px" />
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

Answer 1

更改HTML以将客户ID存储为按钮中的数据属性，例如：

<input type="button" value="Add" class="actionButtonView " data-customer="101"/>

那么jQuery就是

var customerid = ('.actionButtonView').data('customer');

Docs on .data() here

Answer 2

你需要进行一些遍历，但你可以通过缓存行来减少它......

var row = $(this).closest('tr')[0],
    consumerID = $(row.cells[0]).text(),
    consumerName = $(row.cells[1]).text(),
    configID = $(row.cells[4]).text();

我还直接使用DOM元素来获取子行。

jQuery代码：从Parent到Child;不是从孩子到父母

2 个答案: