-1

次のHTMLテーブルがあります。各行の最後の列には 3 つのボタンがあります。表示ボタンをクリックすると、対応する行のコンシューマ 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>
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 に答える