Lấy nội dung của hàng trong bảng bằng một nút bấm

Question

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

• Bảng này chứa một số lượng đị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ỉ nhặt <td> đầu tiên mà có một lớp nr. Làm cách nào để làm việc này?

Dưới đây là các 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ảng:

<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> 

Answer 1

Đối tượng của cuộc tập trận là tìm hàng 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 yêu 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 
}); 

VIEW 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 tình huống như vậy.

Cách 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 lên cây DOM sử dụng .parent() phương pháp. Đây chỉ là một 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> 

Bắt tất cả các ô trong bảng <td> giá trị

Vì vậy, chúng tôi có của chúng tôi $row và chúng tôi muốn đầu ra 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> 
}); 

VIEW DEMO

Bắt giá trị <td> cụ thể

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

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> 
}); 

VIEW DEMO

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

• .closest() - được những yếu tố đầu tiên mà phù hợp với selector
• .parent() - được cha mẹ của mỗi phần tử trong tập hợp hiện tại của yếu tố phù hợp
• .parents() - nhận tổ tiên của mỗi phần tử trong tập hợp hiện tại của các yếu tố phù hợp
• .children() - nhận con cái của mỗi phần tử trong tập hợp các yếu tố phù hợp
• .siblings() - có được anh chị em ruột của mỗi phần tử trong tập hợp các lần xuất hiện yếu tố
• .find() - có được hậu duệ của mỗi phần tử trong tập hợp hiện tại của các yếu tố phù hợp
• .next() - có được anh chị em ngay lập tức sau mỗi phần tử trong tập hợp các yếu tố phù hợp
• .prev() - lấy anh chị em trước đó ngay lập tức của từng phần tử trong tập các phần tử phù hợp

Answer 2

Hãy thử điều này:

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

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

Example here

Getting the full address using an array example here

Answer 3

Bạn cần thay đổi mã của bạn để tìm ra hàng liên quan đến các nút mà được nhấp. Hãy thử điều này:

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

Example fiddle

Answer 4

Bộ chọn ".nr:first" được đặc biệt tìm kiếm đầu tiên, và chỉ là người đầu tiên, yếu tố có lớp "nr" bên trong phần tử bảng chọn. Nếu bạn gọi số .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 yếu 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 có được tất cả của td.nr yếu tố trong bảng, không chỉ là một trong hàng được nhấp. Để hạn chế hơn nữa lựa chọn của bạn để hàng chứa nút nhấp, sử dụng phương pháp .closest, như vậy:

$(".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 
    }); 
}); 

Answer 5

 

    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 đó vào nút của bạn:

onclick="useAdress()"