jQuery 코드 : 부모부터 자식으로 시작; 자식에서 부모가 아닙니다

-2

다음 HTML 테이블이 있습니다. 각 행의 마지막 열에 세 개의 버튼이 있습니다. 보기 버튼을 클릭하면 해당 행의 소비자 ID를 가져와야합니다. 다음 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를 저장 : 다음 jQuery를 단순히 것

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

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

Docs on .data() here

출처

2012-05-29 11:39:57 ManseUK

jQuery 코드 : 부모부터 자식으로 시작; 자식에서 부모가 아닙니다

답변

관련 문제