Hướng dẫn get all td in table javascript - lấy tất cả td trong bảng javascript

Tôi biết đây là câu hỏi rất dễ dàng, nhưng tôi không thể tìm thấy câu trả lời ở bất cứ đâu. Chỉ có câu trả lời là những người sử dụng jQuery, không phải JS thuần túy. Tôi đã thử mã bên dưới và nó không hoạt động. Tôi không biết tại sao.

var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.getElementsByTagName("td");

Điều này cũng không hoạt động:

var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.childNodes;

Tôi đang làm gì sai? Cách tốt nhất để làm việc này là gì?

Chỉnh sửa: Tôi thực sự có ID của bảng bảng của tôi. Preety ngớ ngẩn tôi biết. Đây là cách HTML của tôi trông:

<table id="table">
            <tr>
                <td id="c1">1</td>
                <td id="c2">2</td>
                <td id="c3">3</td>
            </tr>
            <tr>
                <td id="b1">4</td>
                <td id="b2">5</td>
                <td id="b3">6</td>
            </tr>
            <tr>
                <td id="a1">7</td>
                <td id="a2">8</td>
                <td id="a3">9</td>
            </tr>
</table>

To explain my intentions more clearly > I wish to make a tic tac toe game. For starters, I wish to click on the < td > and be able extract the id of that particular < td >. How to do it most efficiently?

JQuery Nhận bảng giá trị TD Cell TD: & NBSP; Bài viết này giải thích cách nhận giá trị ô bảng trên sự kiện nhấp vào trong jQuery. Các giá trị ô bảng của chúng tôi có thể chứa các giá trị văn bản đơn giản hoặc một số phần tử HTML .I.E (Div, Span, TextBox). Vì vậy, hôm nay sẽ tìm hiểu cách đọc các giá trị ô bảng (giá trị TD) này bằng cách sử dụng jQuery trên lựa chọn hàng .I.E Cách nhận hoặc truy cập nội dung div bên trong & nbsp; td & nbsp; sử dụng jQuery. & nbsp; Ngoài ra, sẽ xem cách lưu trữ dữ liệu bảng HTML hoàn chỉnh vào mảng JSON.This article explains how to get table cell value on click event in jquery. Our table cell values may contain simple text values or some HTML element .i.e (div,span, textbox). So today will learn how to read these table cell value (TD value) using jquery on row selection .i.e how to get or accessing div content inside the TD using jquery.  Also, will see how to store complete HTML table data into a JSON array.

Vào cuối hướng dẫn này, chúng tôi đã học cách lấy các giá trị từ hàng bảng, có thể được sử dụng thêm để gửi dữ liệu bằng cách sử dụng jQuery Ajax hoặc nó có thể được sử dụng để thực hiện một số tính toán dựa trên các giá trị ô TD trong jQuery. Có nhiều cách để có được giá trị của TD & NBSP; sử dụng jQuery và chúng tôi sẽ giải thích bốn cách đơn giản để nhận & nbsp; giá trị ô bảng theo hàng và cột.send data using jquery ajax or it can be used to perform some calculation based on TD cell values in jquery. There are many ways to get a value of a TD  using jquery and we going to explain four simple ways to get table cell value by row and column.

Để hiểu rõ hơn, tôi chia bài viết này thành 4 phần.

1. Cách nhận các giá trị TD ô bảng trên nhấp chuột bằng cách sử dụng jQuery
2. Cách đọc ô bảng chứa phần tử HTML IE (DIV, Span, TextBox) bằng jQuery.
3. Làm thế nào để có được nhịp cụ thể của ô hoặc nội dung HTML div bằng jQuery.
4. Cách lấy tất cả các giá trị ô hàng bảng bằng jQuery. & Nbsp; & nbsp; & nbsp; & nbsp;     

Đầu tiên, chúng tôi cần tải xuống và nhập thư viện jQuery mới nhất trong thẻ Head trang web của chúng tôi. Bạn có thể nhập từ tệp jQuery do máy chủ lưu trữ hoặc bạn cũng có thể sử dụng nó từ trang web do Google-do sử dụng (được đề xuất).

Hãy hướng đến phần mã hóa và đi qua từng phần từng bước.

EXAMPLE: 

Video:

#1: Nhận các giá trị TD ô bảng trên nhấp chuột bằng cách sử dụng jQuery

Khi chúng tôi tải xuống và nhập tệp jquery JS vào trang web của chúng tôi, bây giờ chúng tôi đã sẵn sàng để sử dụng chức năng jQuery.

Đánh dấu HTML: Thêm bảng HTML với dữ liệu giả.

Tiếp theo, chúng ta phải thêm bảng đánh dấu HTML .I.E HTML có dữ liệu chúng ta muốn đọc. Bạn có thể tạo một bảng HTML động trong jQuery với jsondata hoặc chỉ đơn giản là thêm đánh dấu cứng.create a dynamic HTML table in jquery with JSONdata, or simply add hardcoded markup.

Ở đây tôi đã mã hóa HTML bảng với cột là ID, Sản phẩm, mô tả, hành động và thêm một số dữ liệu giả vào đó.

<table border='1' id="myTable">
<tr>
<th>Id</th>
<th>Product Name</th>
<th>Description</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Moto G</td>
<td>Moto G next generation smart phone</td>
<td><button class="btnSelect">Select</button></td>
</tr>
<tr>
<td>2</td>
<td>Iphone SE</td>
<td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>3</td>
<td>Sony z3</td>
<td>This is waterproof, well designed, etc</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>4</td>
<td>Moto X Play</td>
<td>Another class product from Moto G Family</td>
<td><button class="btnSelect">Select</button></td>
</tr>

<tr>
<td>5</td>
<td>Samsung S7</td>
<td>Best smart phone, nice UI etc.</td>
<td><button class="btnSelect">Select</button></td>
</tr>
</table>

JQuery: Mã để nhận giá trị văn bản TD khi nhấp vào nút.

Bây giờ chúng tôi liên kết một sự kiện nhấp vào jQuery trên nút Chọn (nút màu đỏ) mà chúng tôi đã thêm trong mỗi hàng bảng. & Nbsp; bây giờ sử dụng phương thức jQuery .text (), chúng tôi nhận được giá trị TD (giá trị ô bảng). Vì vậy, mã của chúng tôi & nbsp; để nhận bảng giá trị văn bản td & nbsp; trông giống như được viết dưới đây.bind a jquery click event on our select button (red color button) which we already added in each table row. Now using the jQuery .text() method we get the TD value (table cell value). So our code to get table td text value looks like as written below.

$(document).ready(function(){

    // code to read selected table row cell data (values).
    $("#myTable").on('click','.btnSelect',function(){
         // get the current row
         var currentRow=$(this).closest("tr"); 
         
         var col1=currentRow.find("td:eq(0)").text(); // get current row 1st TD value
         var col2=currentRow.find("td:eq(1)").text(); // get current row 2nd TD
         var col3=currentRow.find("td:eq(2)").text(); // get current row 3rd TD
         var data=col1+"\n"+col2+"\n"+col3;
         
         alert(data);
    });
});

Vì vậy, bằng cách sử dụng mã jQuery ở trên, chúng tôi có thể đọc giá trị ô bảng HTML khi nhấp vào nút.

Với phương thức jQuery .text (), chúng tôi nhận được văn bản của TD, tức là nó chỉ trả về giá trị văn bản và bỏ qua HTML và Show & NBSP; Chỉ dữ liệu văn bản. & nbsp; & nbsp;.text() method we get the text of td i.e. it returns only text value and skips the HTML and shows  only text data.  

Xem bản demo

#2: Cách đọc giá trị ô bảng có chứa phần tử HTML IE (Div, Span, TextBox) bằng jQuery.

Đánh dấu HTML: Thêm bảng HTML và dữ liệu với một số phần tử HTML.

Ở đây chúng ta sẽ học cách lấy giá trị ô bảng HTML có chứa nội dung HTML bên trong nó.

Trong một kịch bản phát triển thực sự, có một yêu cầu tiêu chuẩn, tức là, để tìm nạp nội dung HTML từ một ô bảng. Và nối nó sau này vào một phần tử HTML khác.

Ở đây chúng tôi đã thêm dữ liệu HTML vào bảng của chúng tôi. Đây là cách đánh dấu HTML của chúng tôi trông giống như được viết dưới đây.

<table border='1' id="myTable">
  <tr>
    <th>Id</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><strong>Moto G</strong></td>
    <td>Moto G next generation smart phone</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
  <tr>
    <td><span>2</span></td>
    <td><strong>Iphone SE</strong></td>
    <td>Iphone laucnhed new phone bosy of 5s with feature of 6s</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>3</span></td>
    <td><strong>Sony z3</strong></td>
    <td>This is waterproof, well designed, etc</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>4</span></td>
    <td><strong>Moto X Play</strong></td>
    <td>Another class product from Moto G Family</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>5</span></td>
    <td><strong>Samsung S7</strong></td>
    <td>Best smart phone, nice UI etc.</td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
</table>

JQuery: Mã để có phần tử HTML bên trong (TD) Giá trị ô bảng & nbsp; trên nút nhấp chuột.

Trước tiên, chúng tôi liên kết nhấp vào sự kiện trên nút Chọn của chúng tôi và sử dụng phương thức jQuery .html () Chúng tôi nhận được nội dung HTML. Trước đó, chúng tôi sử dụng phương thức .Text () trả về dữ liệu văn bản của giá trị TD ô bảng..text() method which returns on text data of table cell td value.

Vì vậy, để trả về dữ liệu HTML, ở đây chúng tôi sử dụng phương thức & nbsp;.html() method which fetches all the HTML data inside our table cell. Now our code looks like as written below

$(document).ready(function(){

    // code to read selected table row cell data (values).
    $("#myTable").on('click','.btnSelect',function(){
         // get the current row
         var currentRow=$(this).closest("tr"); 
         
         var col1=currentRow.find("td:eq(0)").html(); // get current row 1st table cell TD value
         var col2=currentRow.find("td:eq(1)").html(); // get current row 2nd table cell TD value
         var col3=currentRow.find("td:eq(2)").html(); // get current row 3rd table cell  TD value
         var data=col1+"\n"+col2+"\n"+col3;
         
         alert(data);
    });
});

Xem bản demo

#2: Cách đọc giá trị ô bảng có chứa phần tử HTML IE (Div, Span, TextBox) bằng jQuery.

Đánh dấu HTML: Thêm bảng HTML và dữ liệu với một số phần tử HTML.

Ở đây chúng ta sẽ học cách lấy giá trị ô bảng HTML có chứa nội dung HTML bên trong nó.

Trong một kịch bản phát triển thực sự, có một yêu cầu tiêu chuẩn, tức là, để tìm nạp nội dung HTML từ một ô bảng. Và nối nó sau này vào một phần tử HTML khác.

<table border='1' id="myTable">
  <tr>
    <th>Id</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><strong class='pd-name'>Moto G</strong></td>
    <td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
  <tr>
    <td><span>2</span></td>
    <td><strong class='pd-name'>Iphone SE</strong></td>
    <td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>3</span></td>
    <td><strong class='pd-name'>Sony z3</strong></td>
    <td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>4</span></td>
    <td><strong class='pd-name'>Moto X Play</strong></td>
    <td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>5</span></td>
    <td><strong class='pd-name'>Samsung S7</strong></td>
    <td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
</table>

JQuery: Mã để nhận giá trị ô bảng của nội dung phần tử HTML cụ thể (DIV hoặc Span) bằng jQuery.

Vì chúng ta cần truy cập nội dung div/span cụ thể bên trong bảng TD, chúng ta sẽ sử dụng phương thức jQuery .find (). Sử dụng phương thức jQuery & nbsp;.find() method and pass class-name of a specific HTML element we able to get the table cell value of specific div / span content.

Ở đây chúng tôi chỉ muốn lấy giá trị giá từ ô bảng cuối cùng. Vì vậy, bây giờ mã của chúng tôi trông giống như được viết dưới đây để truy cập các yếu tố cụ thể bên trong ô bảng.

//*
$(document).ready(function(){

    $("#myTable").on('click', '.btnSelect', function() {
  // get the current row
  var currentRow = $(this).closest("tr");

  var col1 = currentRow.find(".pd-price").html(); // get current row 1st table cell TD value
  var col2 = currentRow.find(".pd-name").html(); // get current row 2nd table cell TD value

  var data = col1 + "\n" + col2;

  alert(data);
});
});
//*

Xem bản demo

#4: Làm thế nào để có được tất cả các giá trị ô hàng của bảng bằng jQuery.

Ở đây bây giờ chúng tôi đọc tất cả dữ liệu của một bảng HTML nhất định. Trong một kịch bản thực sự nhiều lần chúng ta cần gửi dữ liệu bảng đầy đủ đến máy chủ .I.E giá trị bảng và lưu trữ nó trong mảng JSON, sau đó chuyển nó sang phía máy chủ.fetch table value and store it in JSON array, which later passes it to the server-side.

Hãy để phần này rất đơn giản bằng cách chỉ đọc dữ liệu bảng HTML bằng jQuery và lưu trữ nó trong một đối tượng JSON.

Đầu tiên, chúng tôi tạo một bảng HTML với dữ liệu giả và một nút thực hiện phép thuật hoạt động .I.E chuyển đổi dữ liệu bảng HTML thành đối tượng JSON.

Vì vậy, đây là cách đánh dấu bảng HTML của chúng tôi trông giống như được viết dưới đây:

<button id="myButton"> Click Me</button>
<table border='1' id="myTable">
  <tr>
    <th>Id</th>
    <th>Product Name</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td><span>1</span></td>
    <td><strong class='pd-name'>Moto G</strong></td>
    <td><p>Moto G next generation smart phone <span class="pd-price">50$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
  <tr>
    <td><span>2</span></td>
    <td><strong class='pd-name'>Iphone SE</strong></td>
    <td><p>Iphone laucnhed new phone bosy of 5s with feature of 6s<span class="pd-price">500$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>3</span></td>
    <td><strong class='pd-name'>Sony z3</strong></td>
    <td><p>This is waterproof, well designed, etc<span class="pd-price">250$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>4</span></td>
    <td><strong class='pd-name'>Moto X Play</strong></td>
    <td><p>Another class product from Moto G Family<span class="pd-price">150$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>

  <tr>
    <td><span>5</span></td>
    <td><strong class='pd-name'>Samsung S7</strong></td>
    <td><p>Best smart phone, nice UI etc.<span class="pd-price">450$</span><p></td>
    <td>
      <button class="btnSelect">Select</button>
    </td>
  </tr>
</table>

jQuery: & nbsp; mã để tìm nạp các giá trị dữ liệu bảng HTML và lưu trong đối tượng JSON.

Ở đây chúng tôi tạo một biến số mảng Arrdata nơi chúng tôi lưu trữ dữ liệu bảng HTML của chúng tôi. & NBSP; Ở đây chúng tôi sử dụng phương thức jQuery .each () để lấy tất cả dữ liệu hàng bảng.arrData where we store our HTML table data.  Here we use the jQuery .each() method to get all table row data.

Với mã jQuery được viết dưới đây, chúng tôi có thể lưu dữ liệu bảng HTML hoàn chỉnh của chúng tôi vào một đối tượng mảng JavaScript.

var t = document.getElementById("table"),
    d = t.getElementsByTagName("tr"),
    r = d.childNodes;

Xem bản demo

#4: Làm thế nào để có được tất cả các giá trị ô hàng của bảng bằng jQuery.This article covers a complete tutorial on how to read an HTML table cell TD value in jQuery on a button click. Here we provided different scenarios to get table td data with the live demo example. We are able to understand how to get HTML content from a table, also we learn how to get whole table data and save it into an array variable.

Ở đây bây giờ chúng tôi đọc tất cả dữ liệu của một bảng HTML nhất định. Trong một kịch bản thực sự nhiều lần chúng ta cần gửi dữ liệu bảng đầy đủ đến máy chủ .I.E giá trị bảng và lưu trữ nó trong mảng JSON, sau đó chuyển nó sang phía máy chủ.

1. Hãy để phần này rất đơn giản bằng cách chỉ đọc dữ liệu bảng HTML bằng jQuery và lưu trữ nó trong một đối tượng JSON.
2. Đầu tiên, chúng tôi tạo một bảng HTML với dữ liệu giả và một nút thực hiện phép thuật hoạt động .I.E chuyển đổi dữ liệu bảng HTML thành đối tượng JSON.

Vì vậy, đây là cách đánh dấu bảng HTML của chúng tôi trông giống như được viết dưới đây:

1. jQuery: & nbsp; mã để tìm nạp các giá trị dữ liệu bảng HTML và lưu trong đối tượng JSON.
2. Ở đây chúng tôi tạo một biến số mảng Arrdata nơi chúng tôi lưu trữ dữ liệu bảng HTML của chúng tôi. & NBSP; Ở đây chúng tôi sử dụng phương thức jQuery .each () để lấy tất cả dữ liệu hàng bảng.
3. Với mã jQuery được viết dưới đây, chúng tôi có thể lưu dữ liệu bảng HTML hoàn chỉnh của chúng tôi vào một đối tượng mảng JavaScript.
4. Kết luận: & nbsp; Bài viết này bao gồm một hướng dẫn hoàn chỉnh & nbsp; về cách đọc giá trị TD ô bảng HTML trong jQuery khi nhấp vào nút. Ở đây chúng tôi đã cung cấp các kịch bản khác nhau để lấy dữ liệu TD TD với ví dụ Demo trực tiếp. Chúng tôi có thể hiểu cách lấy nội dung HTML từ bảng, chúng tôi cũng học cách lấy toàn bộ dữ liệu bảng và lưu nó vào một biến mảng.

Tài liệu tham khảo khác:

jQuery - Nhận nội dung và thuộc tính & nbsp; If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Phương thức JQuery Text () to our newsletter

Bạn cũng có thể kiểm tra các bài viết sau:

Làm thế nào để chọn TD của bảng với JavaScript?

Làm thế nào tôi có thể nhận được giá trị TD?

Làm thế nào để có được giá trị TD được chọn trong JavaScript?

Làm thế nào để tôi có được TD trong HTML?