jquery를 사용하여 클릭 한 모든 버튼에서 데이터 속성을 가져 오는 방법

MSI

나는 jquery를 처음 접했고 내 응용 프로그램에서 사용하고 싶습니다. 다음과 같은 데이터가 포함 된 테이블이 있습니다.

<tbody>
 <tr>
  <td>Ariel <button id="edit" data-id="<?php echo $row->id_user; ?>Edit</button></td>
  <td>[email protected]</td>
  <td>27</td>
 </tr>
 <tr>
  <td>Noel <button id="edit" data-id="<?php echo $row->id_user; ?>Edit</button></td>
  <td>[email protected]</td>
  <td>31</td>
 </tr>
 <tr>
  ...
 </tr>
</tbody>

<button>클릭 했을 때 jquery를 사용하여 데이터 ID를 얻으려고합니다 . 이것은 내 코드입니다.

$(function() {
  var btn = $("#edit"),
      id = btn.data("id");
  btn.on("click", function() {
    console.log(id);
  });
});

기록 할 수있는 첫 번째 행만. 구문을 모릅니다. 어떻게해야합니까?

@ UPDATED @

ID 대신 클래스를 사용하는 솔루션을 찾았습니다. 일부 요소에서 동일한 ID를 갖는 것은 유효하지 않습니다. 그래서 나는 이것을 사용합니다.

<button class="edit" data-id="<?php echo $row->id_user; ?>">Edit</button>

그리고 내 jquery에서 몇 가지를 변경하십시오.

$(".edit").each(function() {
    var $this = $(this),
        id = $this.data("id");
    $this.on("click", function() {
      console.log(id);
    });
});
모하마드 우스만

id하나의 웹 페이지에서 같은 것을 여러 번 가질 수 없습니다 . class대신 사용하십시오 .

$(function() {
  var btn = $(".edit");
  
  btn.on("click", function() {
    var data = $(this).data("id");
    console.log(data);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tbody>
  <tr>
    <td>Ariel <button class="edit" data-id="id-1">Edit</button></td>
    <td>[email protected]</td>
    <td>27</td>
  </tr>
  <tr>
    <td>Noel <button class="edit" data-id="id-2">Edit</button></td>
    <td>[email protected]</td>
    <td>31</td>
  </tr>
  <tr>
    ...
  </tr>
</tbody>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

동일한 ID를 가진 버튼을 사용하여 버튼 클릭시 모달에 데이터 가져 오기

분류에서Dev

xmllint xpath를 사용하여 동일한 태그 이름을 가진 모든 속성을 가져 오는 방법

분류에서Dev

JQuery를 사용하여 동일한 클래스의 버튼에서 값을 가져 오는 방법

분류에서Dev

매끄러운 그리드에서 버튼을 한 번 클릭하면 모든 필터를 지우는 방법

분류에서Dev

사용자가 "가운데 버튼"을 클릭하거나 마우스 오른쪽 버튼을 클릭 한 경우에도 jquery "클릭"이벤트를 트리거하는 방법-> 새 탭에서 열기

분류에서Dev

Selenium-각 개별 항목의 모든 추가 버튼을 클릭하여 드롭 다운에서 데이터를 긁어내는 방법

분류에서Dev

VB.net의 datagridview의 모든 데이터 행에 2 개의 버튼을 삽입하여 mysql에서 데이터를 가져 오는 방법

분류에서Dev

추가 데이터를 전송하고 버튼을 클릭하여 차례로 가져 오는 방법

분류에서Dev

React Hooks를 사용하여 버튼 클릭시 데이터를 가져 오는 방법

분류에서Dev

ID를 사용하여 버튼을 가져오고 클릭 이벤트를 호출하는 방법-Angular

분류에서Dev

모든 데이터를 가져 오지 않는 데이터 속성을 사용한 양식 유효성 검사

분류에서Dev

Azure Active Directory Graph API를 사용하여 AppRole에 속한 모든 사용자를 가져 오는 방법

분류에서Dev

Knockout.js 사용자가 저장 버튼을 클릭 할 때까지 선택에서 관찰 가능한 업데이트를 비활성화하는 방법

분류에서Dev

Vuejs에서 클릭 한 모든 버튼 / 옵션에 대해 날짜 선택기를 사용하는 방법

분류에서Dev

Laravel에서 Group By (연도)를 사용하여 테이블의 모든 데이터를 가져 오는 방법

분류에서Dev

C #에서 Outlook API를 사용하여 이메일을 클릭 할 때 이메일 데이터를 가져 오는 방법

분류에서Dev

제한 SUM 값 열을 사용하여 데이터베이스에서 레코드를 가져 오는 방법

분류에서Dev

각도 2에서 버튼을 클릭하여 한 구성 요소에서 다른 구성 요소로 데이터를 보내는 방법

분류에서Dev

ajax 부분 뷰 호출을 사용하여 입력에서 뷰에서 모델 데이터 / 객체를 가져 오는 가장 간단한 방법

분류에서Dev

WPF 데이터 그리드를 사용하여 DataGridHyperlinkColumn에서 선택한 값을 가져 오는 방법

분류에서Dev

여러 클래스에서 데이터 속성 값을 가져 오는 방법

분류에서Dev

왼쪽 조인을 사용하여 마스터 테이블에서 모든 데이터를 가져 오는 방법은 무엇입니까?

분류에서Dev

모든 행에없는 속성을 가진 사용자에 대한 데이터 가져 오기 -sql

분류에서Dev

HtmlAgility Pack을 사용하여 jquery 버튼 클릭으로 페이지에서 데이터를 스크랩하는 방법

분류에서Dev

jQuery / JS를 사용하여 ID가없는 버튼을 클릭하는 방법

분류에서Dev

jquery에서 버튼을 클릭하여 이미지를 변경하는 방법

분류에서Dev

핵심 데이터-하나의 속성을 통해 모든 관련 객체를 가져 오는 방법

분류에서Dev

클래스에서 모든 데이터를 가져 오기 위해 루프에서 쿼리하는 방법

분류에서Dev

jquery의 특정 클래스가있는 모든 버튼에서 클릭 이벤트를 트리거하는 방법

Related 관련 기사

  1. 1

    동일한 ID를 가진 버튼을 사용하여 버튼 클릭시 모달에 데이터 가져 오기

  2. 2

    xmllint xpath를 사용하여 동일한 태그 이름을 가진 모든 속성을 가져 오는 방법

  3. 3

    JQuery를 사용하여 동일한 클래스의 버튼에서 값을 가져 오는 방법

  4. 4

    매끄러운 그리드에서 버튼을 한 번 클릭하면 모든 필터를 지우는 방법

  5. 5

    사용자가 "가운데 버튼"을 클릭하거나 마우스 오른쪽 버튼을 클릭 한 경우에도 jquery "클릭"이벤트를 트리거하는 방법-> 새 탭에서 열기

  6. 6

    Selenium-각 개별 항목의 모든 추가 버튼을 클릭하여 드롭 다운에서 데이터를 긁어내는 방법

  7. 7

    VB.net의 datagridview의 모든 데이터 행에 2 개의 버튼을 삽입하여 mysql에서 데이터를 가져 오는 방법

  8. 8

    추가 데이터를 전송하고 버튼을 클릭하여 차례로 가져 오는 방법

  9. 9

    React Hooks를 사용하여 버튼 클릭시 데이터를 가져 오는 방법

  10. 10

    ID를 사용하여 버튼을 가져오고 클릭 이벤트를 호출하는 방법-Angular

  11. 11

    모든 데이터를 가져 오지 않는 데이터 속성을 사용한 양식 유효성 검사

  12. 12

    Azure Active Directory Graph API를 사용하여 AppRole에 속한 모든 사용자를 가져 오는 방법

  13. 13

    Knockout.js 사용자가 저장 버튼을 클릭 할 때까지 선택에서 관찰 가능한 업데이트를 비활성화하는 방법

  14. 14

    Vuejs에서 클릭 한 모든 버튼 / 옵션에 대해 날짜 선택기를 사용하는 방법

  15. 15

    Laravel에서 Group By (연도)를 사용하여 테이블의 모든 데이터를 가져 오는 방법

  16. 16

    C #에서 Outlook API를 사용하여 이메일을 클릭 할 때 이메일 데이터를 가져 오는 방법

  17. 17

    제한 SUM 값 열을 사용하여 데이터베이스에서 레코드를 가져 오는 방법

  18. 18

    각도 2에서 버튼을 클릭하여 한 구성 요소에서 다른 구성 요소로 데이터를 보내는 방법

  19. 19

    ajax 부분 뷰 호출을 사용하여 입력에서 뷰에서 모델 데이터 / 객체를 가져 오는 가장 간단한 방법

  20. 20

    WPF 데이터 그리드를 사용하여 DataGridHyperlinkColumn에서 선택한 값을 가져 오는 방법

  21. 21

    여러 클래스에서 데이터 속성 값을 가져 오는 방법

  22. 22

    왼쪽 조인을 사용하여 마스터 테이블에서 모든 데이터를 가져 오는 방법은 무엇입니까?

  23. 23

    모든 행에없는 속성을 가진 사용자에 대한 데이터 가져 오기 -sql

  24. 24

    HtmlAgility Pack을 사용하여 jquery 버튼 클릭으로 페이지에서 데이터를 스크랩하는 방법

  25. 25

    jQuery / JS를 사용하여 ID가없는 버튼을 클릭하는 방법

  26. 26

    jquery에서 버튼을 클릭하여 이미지를 변경하는 방법

  27. 27

    핵심 데이터-하나의 속성을 통해 모든 관련 객체를 가져 오는 방법

  28. 28

    클래스에서 모든 데이터를 가져 오기 위해 루프에서 쿼리하는 방법

  29. 29

    jquery의 특정 클래스가있는 모든 버튼에서 클릭 이벤트를 트리거하는 방법

뜨겁다태그

보관