jQuery代碼：從父母到孩子;不是從孩子到家長

-2

我有以下的HTML表格。在每行的最後一列有三個按鈕。當單擊查看按鈕時，我需要獲取相應行的用戶標識。我有以下jQuery代碼。 http://jsfiddle.net/Lijo/nUbB2/jQuery代碼：從父母到孩子;不是從孩子到家長

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>

來源

2012-05-29 Lijo

你可以改變按鈕的HTML？使用'data'屬性並將客戶編號存儲在按鈕中 - 輕鬆了很多 – ManseUK

對誰低估了這個問題的人。請解釋投票的原因 – Lijo

你需要做一些遍歷，但是你可以通過緩存行來減少它...

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

我還直接使用DOM元素來獲取子行。

來源

2012-05-29 11:40:13

更改HTML保存客戶ID，例如按鈕中的數據屬性：

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

然後jQuery的，簡直是

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

Docs on .data() here

來源

2012-05-29 11:39:57 ManseUK

jQuery代碼：從父母到孩子;不是從孩子到家長

回答

相關問題