Tôi cần trích xuất chi tiết của từng cột trong bảng của mình. Ví dụ: cột "Tên / Số".

• Bảng chứa một số địa chỉ
• Cột cuối cùng của mỗi hàng có một nút cho phép người dùng chọn một địa chỉ được liệt kê.

Vấn đề: Mã của tôi chỉ chọn mã đầu tiên <td>có một lớp nr. Làm cách nào để tôi làm việc này?

Đây là bit jQuery:

$(".use-address").click(function() {
    var id = $("#choose-address-table").find(".nr:first").text();
    $("#resultas").append(id); // Testing: append the contents of the td to a div
});

Bàn:

<table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
            <th>Town</th>
            <th>Postcode</th>
            <th>Country</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="nr"><span>50</span>
            </td>
            <td>Some Street 1</td>
            <td>Leeds</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
        <tr>
            <td class="nr">49</td>
            <td>Some Street 2</td>
            <td>Lancaster</td>
            <td>L0 0XX</td>
            <td>United Kingdom</td>
            <td>
                <button type="button" class="use-address" />
            </td>
        </tr>
    </tbody>
</table>

Đối tượng của bài tập là tìm hàng có chứa thông tin. Khi chúng tôi đến đó, chúng tôi có thể dễ dàng trích xuất thông tin cần thiết.

Câu trả lời

$(".use-address").click(function() {
    var $item = $(this).closest("tr")   // Finds the closest row <tr> 
                       .find(".nr")     // Gets a descendent with class="nr"
                       .text();         // Retrieves the text within <td>

    $("#resultas").append($item);       // Outputs the answer
});

XEM DEMO

Bây giờ chúng ta hãy tập trung vào một số câu hỏi thường gặp trong những tình huống như vậy.

Làm thế nào để tìm hàng gần nhất?

Sử dụng .closest():

var $row = $(this).closest("tr");

Sử dụng .parent():

Bạn cũng có thể di chuyển cây DOM lên bằng .parent()phương thức. Đây chỉ là một sự thay thế đôi khi được sử dụng cùng với .prev()và .next().

var $row = $(this).parent()             // Moves up from <button> to <td>
                  .parent();            // Moves up from <td> to <tr>

Nhận tất cả các <td>giá trị ô trong bảng

Vì vậy, chúng tôi có của chúng tôi $rowvà chúng tôi muốn xuất văn bản ô trong bảng:

var $row = $(this).closest("tr"),       // Finds the closest row <tr> 
    $tds = $row.find("td");             // Finds all children <td> elements

$.each($tds, function() {               // Visits every single <td> element
    console.log($(this).text());        // Prints out the text within the <td>
});

XEM DEMO

Nhận một <td>giá trị cụ thể

Tương tự như phần trước, tuy nhiên chúng ta có thể chỉ định chỉ mục của <td>phần tử con .

var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)"); // Finds the 2nd <td> element

$.each($tds, function() {                // Visits every single <td> element
    console.log($(this).text());         // Prints out the text within the <td>
});

XEM DEMO

Phương pháp hữu ích

• .closest() - lấy phần tử đầu tiên phù hợp với bộ chọn
• .parent() - lấy cha của mỗi phần tử trong tập hợp các phần tử phù hợp hiện tại
• .parents() - lấy tổ tiên của mỗi phần tử trong tập hợp các phần tử phù hợp hiện tại
• .children() - lấy con của mỗi phần tử trong tập hợp các phần tử phù hợp
• .siblings() - lấy anh chị em của mỗi phần tử trong tập hợp các phần tử phù hợp
• .find() - lấy con cháu của mỗi phần tử trong tập hợp các phần tử phù hợp hiện tại
• .next() - lấy ngay sau anh chị em của mỗi phần tử trong tập hợp các phần tử phù hợp
• .prev() - lấy anh chị em ngay trước của mỗi phần tử trong tập hợp các phần tử phù hợp

Thử đi:

$(".use-address").click(function() {
   $(this).closest('tr').find('td').each(function() {
        var textval = $(this).text(); // this will be the text of each <td>
   });
});

Thao tác này sẽ tìm nút gần nhất tr(đi lên qua DOM) của nút hiện được nhấp và sau đó lặp lại từngtd - bạn có thể muốn tạo một chuỗi / mảng với các giá trị.

Ví dụ ở đây

Lấy địa chỉ đầy đủ bằng cách sử dụng một ví dụ mảng ở đây

Bạn cần thay đổi mã của mình để tìm hàng liên quan đến nút đã được nhấp. Thử đi:

$(".use-address").click(function() {
    var id = $(this).closest("tr").find(".nr").text();
    $("#resultas").append(id);
});

Ví dụ fiddle

function useAdress () { 
var id = $("#choose-address-table").find(".nr:first").text();
alert (id);
$("#resultas").append(id); // Testing: append the contents of the td to a div
};

sau đó trên nút của bạn:

onclick="useAdress()"

Bộ chọn ".nr:first"đang tìm kiếm cụ thể phần tử đầu tiên và chỉ phần tử đầu tiên có lớp "nr"trong phần tử bảng đã chọn. Nếu bạn gọi thay vào đó, .find(".nr")bạn sẽ nhận được tất cả các phần tử trong bảng có lớp "nr". Khi bạn có tất cả các phần tử đó, bạn có thể sử dụng phương thức .each để lặp lại chúng. Ví dụ:

$(".use-address").click(function() {
    $("#choose-address-table").find(".nr").each(function(i, nrElt) {
        var id = nrElt.text();
        $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
    });
});

Tuy nhiên, điều đó sẽ giúp bạn nhận được tất cả các td.nrphần tử trong bảng, không chỉ phần tử trong hàng được nhấp. Để giới hạn thêm lựa chọn của bạn cho hàng chứa nút được nhấp, hãy sử dụng phương thức .closest , như sau:

$(".use-address").click(function() {
    $(this).closest("tr").find(".nr").each(function(i, nrElt) {
        var id = nrElt.text();
        $("#resultas").append("<p>" + id + "</p>"); // Testing: append the contents of the td to a div
    });
});

Tìm phần tử có id trong hàng bằng jquery

$(document).ready(function () {
$("button").click(function() {
    //find content of different elements inside a row.
    var nameTxt = $(this).closest('tr').find('.name').text();
    var emailTxt = $(this).closest('tr').find('.email').text();
    //assign above variables text1,text2 values to other elements.
    $("#name").val( nameTxt );
    $("#email").val( emailTxt );
    });
});

var values = [];
var count = 0;
$("#tblName").on("click", "tbody tr", function (event) {
   $(this).find("td").each(function () {
       values[count] = $(this).text();
       count++;
    });
});

Bây giờ mảng giá trị chứa tất cả các giá trị ô của hàng đó có thể được sử dụng như giá trị [0] giá trị ô đầu tiên của hàng được nhấp

Đây là mã hoàn chỉnh cho ví dụ đơn giản về ủy quyền

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
        <td>click</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
        <td>click</td>
      </tr>

    </tbody>
  </table>
  <script>
  $(document).ready(function(){
  $("div").delegate("table tbody tr td:nth-child(4)", "click", function(){
  var $row = $(this).closest("tr"),        // Finds the closest row <tr> 
    $tds = $row.find("td:nth-child(2)");
     $.each($tds, function() {
        console.log($(this).text());
        var x = $(this).text();
        alert(x);
    });
    });
});
  </script>
</div>

</body>
</html>