-1

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

1）有更好的jQuery代码吗？

2）目前我首先找到按钮 - 然后是它的父行 - 然后是消费者 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>
4

2 回答 2

1

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

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

那么jQuery将只是

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

.data() 文档在这里

于 2012-05-29T11:39:57.590 回答
1

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

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

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

于 2012-05-29T11:40:13.923 回答