Nhận tr từ td JavaScript

jQuery Nhận giá trị TD của ô trong bảng. Bài viết này giải thích cách lấy giá trị ô của bảng khi nhấp vào sự kiện trong jquery. Các giá trị ô trong 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, nhịp, hộp văn bản]. Vì vậy, hôm nay sẽ học cách đọc các giá trị ô trong bảng này [giá trị TD] bằng cách sử dụng jquery khi chọn hàng. i. e cách nhận hoặc truy cập nội dung div bên trong TD bằng cách sử dụng jquery. Ngoài ra, sẽ xem cách lưu trữ dữ liệu bảng HTML hoàn chỉnh vào một mảng JSON

Đến cuối hướng dẫn này, chúng ta đã học cách lấy giá trị từ hàng của bảng, giá trị này có thể được sử dụng thêm để gửi dữ liệu bằng jquery ajax hoặc có thể sử dụng giá trị này để thực hiện một số phép tính dựa trên giá trị ô TD trong jquery. Có nhiều cách để lấy giá trị của TD bằng cách sử dụng jquery và chúng tôi sẽ giải thích bốn cách đơn giản để lấy giá trị ô của bảng theo hàng và cột

Để hiểu rõ hơn, tôi chia bài đăng này thành 4 phần

Trước tiên, chúng ta cần tải xuống và nhập thư viện jquery mới nhất vào thẻ đầu trang web của chúng ta. 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 lưu trữ [được khuyến nghị]

Hãy chuyển sang phần mã hóa và đi qua từng phần một

THÍ DỤ.  

Băng hình

#1. Nhận các giá trị TD của ô bảng khi nhấp 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 mình, 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 vào Bảng HTML với dữ liệu giả

Tiếp theo, chúng ta phải thêm đánh dấu HTML. i. e Bảng HTML có dữ liệu chúng tôi muốn đọc. Bạn có thể tạo một bảng HTML động trong jquery với dữ liệu JSON hoặc chỉ cần thêm đánh dấu được mã hóa cứng

Ở đây tôi đã mã hóa cứng thêm bảng HTML với cột là Id, ProductName, Description, Action và thêm một số dữ liệu giả vào đó. Vì vậy, đây là cách đánh dấu HTML của chúng tôi trông giống như được viết bên dưới

Id
Product Name
Description
Action


1
Moto G
Moto G next generation smart phone
Select


2
Iphone SE
Iphone laucnhed new phone bosy of 5s with feature of 6s
Select



3
Sony z3
This is waterproof, well designed, etc
Select



4
Moto X Play
Another class product from Moto G Family
Select



5
Samsung S7
Best smart phone, nice UI etc.
Select

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 chuột jquery trên nút chọn của chúng tôi [nút màu đỏ] mà chúng tôi đã thêm vào mỗi hàng của bảng. Hiện đang sử dụng jQuery. text[] chúng ta nhận được giá trị TD [giá trị ô của bảng]. Vì vậy, mã của chúng tôi để lấy giá trị văn bản bảng td trông giống như được viết bên dưới

$[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ị ô của bảng HTML khi nhấp vào nút

Với jQuery. text[] chúng ta nhận được văn bản của td i. e. nó chỉ trả về giá trị văn bản và bỏ qua HTML và chỉ hiển thị dữ liệu văn bản.   

Xem bản trình diễn

#2. Cách đọc giá trị ô của bảng chứa phần tử HTML tức là [div,span, textbox] bằng cách sử dụ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ẽ tìm hiểu cách lấy giá trị ô của bảng HTML chứa nội dung HTML bên trong nó

Trong một kịch bản phát triển thực tế, có một yêu cầu tiêu chuẩn, tôi. e. , để lấy nội dung HTML từ một ô của bảng. Và nối nó sau 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 mình. Đây là cách đánh dấu HTML của chúng tôi trông giống như được viết bên dưới

  
    Id
    Product Name
    Description
    Action
  
  
    1
    Moto G
    Moto G next generation smart phone
    
      Select
    
  
  
    2
    Iphone SE
    Iphone laucnhed new phone bosy of 5s with feature of 6s
    
      Select
    
  

  
    3
    Sony z3
    This is waterproof, well designed, etc
    
      Select
    
  

  
    4
    Moto X Play
    Another class product from Moto G Family
    
      Select
    
  

  
    5
    Samsung S7
    Best smart phone, nice UI etc.
    
      Select
    
  

jQuery. Mã để lấy phần tử HTML bên trong [TD ] giá trị ô của bảng khi nhấp vào nút

Đầu tiên, chúng tôi liên kết sự kiện nhấp vào nút chọn của mình và sử dụng jquery. html[] chúng tôi nhận được nội dung HTML. Trước đây 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 của ô trong bảng

Vì vậy, để trả về dữ liệu HTML, ở đây chúng tôi sử dụng. html[] phương thức tìm nạp tất cả dữ liệu HTML bên trong ô bảng của chúng tôi. Bây giờ mã của chúng tôi trông giống như được viết dưới đây

$[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 giới thiệu

#3. Làm cách nào để lấy nội dung HTML hoặc div dành riêng cho ô của bảng bằng cách sử dụ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 trong phần này, chúng ta sẽ xem cách lấy một giá trị phần tử div hoặc span cụ thể bên trong TD [ô của bảng]. Phần trước đã chỉ ra cách lấy nội dung HTML từ một ô của bảng

Bây giờ chúng ta xem cách tìm nạp một phần tử HTML cụ thể từ một ô của bảng [TD] bằng jQuery. tôi. e. , cách tìm phần tử trong hàng của bảng hoặc tìm phần tử lớp cụ thể bên trong TD bằng jQuery

  
    Id
    Product Name
    Description
    Action
  
  
    1
    Moto G
    
Moto G next generation smart phone 50$

  


    
      Select
    
  
  
    2
    Iphone SE
    
Iphone laucnhed new phone bosy of 5s with feature of 6s500$
    
      Select
    
  

  
    3
    Sony z3
    
This is waterproof, well designed, etc250$
    
      Select
    
  

  
    4
    Moto X Play
    
Another class product from Moto G Family150$
    
      Select
    
  

  
    5
    Samsung S7
    
Best smart phone, nice UI etc.450$
    
      Select
    
  

jQuery. Mã để lấy giá trị ô bảng của nội dung phần tử HTML [div hoặc span] cụ thể bằng cách sử dụng jquery

Vì chúng tôi cần truy cập nội dung div/span cụ thể bên trong bảng TD, chúng tôi sẽ sử dụng jquery. phương thức tìm[]. Sử dụng jQuery. phương thức find[] và chuyển tên lớp của một phần tử HTML cụ thể, chúng tôi có thể lấy giá trị ô bảng của nội dung div / span cụ thể

Ở đâ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 bên dưới để truy cập các phần tử cụ thể bên trong một ô của 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 giới thiệu

#4. Cách lấy tất cả các giá trị ô của hàng trong 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 tế, nhiều lần chúng ta cần gửi dữ liệu bảng hoàn chỉnh đến máy chủ. i. e tìm nạp giá trị bảng và lưu trữ nó trong mảng JSON, mảng này sau đó sẽ chuyển nó sang phía máy chủ

Hãy làm cho phần này thật đơn giản bằng cách chỉ đọc dữ liệu bảng HTML bằng cách sử dụ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 công việc kỳ diệu. i. e chuyển đổi dữ liệu bảng HTML sang đố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 bên dưới

 Click Me

  
    Id
    Product Name
    Description
    Action
  
  
    1
    Moto G
    
Moto G next generation smart phone 50$
    
      Select
    
  
  
    2
    Iphone SE
    
Iphone laucnhed new phone bosy of 5s with feature of 6s500$
    
      Select
    
  

  
    3
    Sony z3
    
This is waterproof, well designed, etc250$
    
      Select
    
  

  
    4
    Moto X Play
    
Another class product from Moto G Family150$
    
      Select
    
  

  
    5
    Samsung S7
    
Best smart phone, nice UI etc.450$
    
      Select
    
  

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

Ở đây chúng tôi tạo một biến mảng arrData nơi chúng tôi lưu trữ dữ liệu bảng HTML của mình. Ở đây chúng tôi sử dụng jQuery. each[] để lấy tất cả dữ liệu hàng của bảng

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

//*
$["#myButton"].on['click',function[]{
 
   var arrData=[];
   // loop over each table row [tr]
   $["#myTable tr"].each[function[]{
        var currentRow=$[this];
    
        var col1_value=currentRow.find["td:eq[0]"].text[];
        var col2_value=currentRow.find["td:eq[1]"].text[];
        var col3_value=currentRow.find["td:eq[2]"].text[];

         var obj={};
        obj.col1=col1_value;
        obj.col2=col2_value;
        obj.col3=col3_value;

        arrData.push[obj];
   }];
    alert[arrData];
    console.log[arrData];

}];
//*

Xem bản trình diễn

Phần kết luận. Bài viết này trình bày hướng dẫn đầy đủ về cách đọc giá trị TD của ô trong bảng HTML trong jQuery chỉ bằng một lần nhấp vào nút. Ở đây chúng tôi đã cung cấp các tình huống khác nhau để lấy dữ liệu bảng 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ừ một bảng, chúng tôi cũng học cách lấy toàn bộ dữ liệu của bảng và lưu nó vào một biến mảng

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

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

Cảm ơn bạn đã đọc, vui lòng tiếp tục truy cập blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất thích nghe ý kiến ​​​​của bạn trong phần bình luận

Làm cách nào để nhận giá trị td của hàng trong bảng trong JavaScript?

Làm cách nào để lấy dữ liệu hàng của bảng trong JavaScript?

Làm cách nào để lấy TD ID trong JavaScript?

Làm cách nào để lấy dữ liệu hàng của bảng trong JavaScript title?