Hướng dẫn get data in table javascript - lấy dữ liệu trong bảng javascript

31

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Làm cách nào để kéo dữ liệu [chuỗi] từ một cột gọi là "giới hạn" trong bảng ["DisplayTable"] trong JavaScript?

var table = document.getElementById['displayTable'];    
var rowCount = table.rows.length;    
for [var i = 1; i < rowCount - 1; i++] {    
     var row = table.rows[i]["Limit"].ToString[];
     alert[row];
     ...
}

Trilarion

10.2k9 Huy hiệu vàng63 Huy hiệu bạc101 Huy hiệu Đồng9 gold badges63 silver badges101 bronze badges

hỏi ngày 14 tháng 7 năm 2010 lúc 17:38Jul 14, 2010 at 17:38

Đây là cách tôi hoàn thành việc đọc một bảng trong JavaScript. Về cơ bản, tôi đã khoan xuống các hàng và sau đó tôi có thể đi sâu vào các ô riêng lẻ cho mỗi hàng. Điều này sẽ cho bạn một ý tưởng

//gets table
var oTable = document.getElementById['myTable'];

//gets rows of table
var rowLength = oTable.rows.length;

//loops through rows    
for [i = 0; i < rowLength; i++]{

   //gets cells of current row
   var oCells = oTable.rows.item[i].cells;

   //gets amount of cells of current row
   var cellLength = oCells.length;

   //loops through each cell in current row
   for[var j = 0; j < cellLength; j++]{
      /* get your cell info here */
      /* var cellVal = oCells.item[j].innerHTML; */
   }
}

Cập nhật - tập lệnh được kiểm tra

    

        
A1
        
A2
        
A3
    
    

        
B1
        
B2
        
B3
    


    //gets table
    var oTable = document.getElementById['myTable'];

    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows    
    for [i = 0; i < rowLength; i++]{

      //gets cells of current row  
       var oCells = oTable.rows.item[i].cells;

       //gets amount of cells of current row
       var cellLength = oCells.length;

       //loops through each cell in current row
       for[var j = 0; j < cellLength; j++]{

              // get your cell info here

              var cellVal = oCells.item[j].innerHTML;
              alert[cellVal];
           }
    }

Đã trả lời ngày 14 tháng 7 năm 2010 lúc 17:51Jul 14, 2010 at 17:51

webdad3webdad3webdad3

8.78829 Huy hiệu vàng120 Huy hiệu bạc218 Huy hiệu đồng29 gold badges120 silver badges218 bronze badges

6

Trong mã này data là một mảng dữ liệu bảng hai chiều

let oTable = document.getElementById['datatable-id'];
let data = [...oTable.rows].map[t => [...t.children].map[u => u.innerText]]

Đã trả lời ngày 16 tháng 7 năm 2019 lúc 8:38Jul 16, 2019 at 8:38

Sử dụng JSON & JQuery. Nó dễ dàng hơn so với JavaScript cũ

function savedata1[] { 

var obj = $['#myTable tbody tr'].map[function[] {
var $row = $[this];
var t1 = $row.find[':nth-child[1]'].text[];
var t2 = $row.find[':nth-child[2]'].text[];
var t3 = $row.find[':nth-child[3]'].text[];
return {
    td_1: $row.find[':nth-child[1]'].text[],
    td_2: $row.find[':nth-child[2]'].text[],
    td_3: $row.find[':nth-child[3]'].text[]
   };
}].get[];

webdad3

8.78829 Huy hiệu vàng120 Huy hiệu bạc218 Huy hiệu đồng29 gold badges120 silver badges218 bronze badges

Trong mã này data là một mảng dữ liệu bảng hai chiềuMay 7, 2013 at 9:09

Đã trả lời ngày 16 tháng 7 năm 2019 lúc 8:38Anjana

Sử dụng JSON & JQuery. Nó dễ dàng hơn so với JavaScript cũ1 silver badge4 bronze badges

Nếu bạn vẫn đang sử dụng HTML để hiển thị dữ liệu trên trang web của mình, bài đăng này và ví dụ của nó sẽ hữu ích. Trước đây tôi đã đăng một bài viết giải thích cách chuyển đổi dữ liệu JSON một cách linh hoạt sang bảng HTML bằng JavaScript. Bây giờ, ở đây tôi đang chia sẻ một tập lệnh đơn giản cho thấy cách đọc dữ liệu từ bảng HTML bằng JavaScript.

Đầu tiên, tôi sẽ tạo một bảng nhỏ với tiêu đề và một vài hàng trong đó. Dữ liệu được mã hóa cứng.

Đánh dấu

    Read Data from HTML Table uisng JavaScript
    
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    


    
            ID
                Employee Name
                    Age
        

        

        

            
01
                
Alpha
                    
37
        
        

            
02
                
Bravo
                    
29
        
    

    

    




    function showTableData[] {
        document.getElementById['info'].innerHTML = "";
        var myTab = document.getElementById['empTable'];

        
        for [i = 1; i < myTab.rows.length; i++] {

            
            var objCells = myTab.rows.item[i].cells;

            
            for [var j = 0; j < objCells.length; j++] {
                info.innerHTML = info.innerHTML + ' ' + objCells.item[j].innerHTML;
            }
            info.innerHTML = info.innerHTML + '
';     
        }
    }

Thử nó

Nó sẽ gọi chức năng khi ai đó nhấn nút. Tôi đang tạo một đối tượng của bảng bằng phương thức document.getEuityById []. Khi đối tượng được tạo, tôi sẽ có quyền truy cập vào tất cả các thuộc tính của bảng.

Tiếp theo, tôi đang chạy một vòng lặp để đọc từng hàng của bảng. Tuy nhiên, tôi đang bỏ qua hàng đầu tiên, vì nó có tiêu đề bảng. Do đó, trong vòng lặp For, tôi đã gán giá trị 1 cho biến i.for loop to read each row of the table. However, I am ignoring the first row, since it has the table header. Therefore, in the for loop, I have assigned value 1 to the variable i.

Cách chuyển đổi toàn bộ bảng HTML thành tài liệu PDF bằng JavaScript mà không cần trình cắm

Sau đó bên trong vòng lặp đầu tiên, tôi sẽ nhận được bộ sưu tập các ô của mỗi hàng. Bộ sưu tập [đối tượng] cung cấp các thuộc tính và giá trị của mỗi ô trong một hàng. Để trích xuất các giá trị từ mỗi ô, tôi đang chạy một vòng khác.cells collection of each row. The collection [object] provides the properties and values of each cell in a row. To extract values from each cell, I am running another for loop.

Đọc một dữ liệu cột cụ thể

Nếu bạn muốn trích xuất dữ liệu từ một cột cụ thể, thì bạn chỉ có thể gán giá trị cho biến J trong vòng lặp thứ hai. Mỗi cột hoặc có giá trị chỉ mục duy nhất bắt đầu từ 0.particular column, then you can simply assign value to the variable j in the second loop. Each column or has a unique index value starting from 0.

Ví dụ: nếu bạn muốn hiển thị các giá trị của tuổi cột, thì bạn có thể gán giá trị 2 cho biến j. Như thế này,Age, then you can assign value 2 to the variable j. Like this,

for [var j = 2; j < objCells.length; j++] {
    info.innerHTML = info.innerHTML + ' ' + objCells.item[j].innerHTML;
}

Đầu ra bạn nhận được là 37 và 29 [từ ví dụ trên].

Đọc dữ liệu cột bằng thuộc tính "Cellindex"

Có một cách khác, bạn có thể nhận được giá trị ô cho một cột cụ thể mà không cần mã hóa cứng một số. Bạn có thể gán ID duy nhất cho mỗi tiêu đề [] trong đánh dấu và nhận các giá trị chỉ mục bằng phương thức document.getEuityById [].without hard coding a number. You can assign unique id’s to each header [] in the markup and get the index values using the document.getElementById[] method.

Đánh dấu

    Read Data from HTML Table uisng JavaScript
    
        table, th, td 
        {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }
        th {
            font-weight:bold;
        }
    



        
            ID
                Employee Name
                    Age
        

        

        
01
Alpha
37
        
02
Bravo
29
        
03
Charlie
32
    

    

        --Select a Value--
        ID
        Employee Name
        Age
    

    
    



    
    function showTableData[] { 
        document.getElementById['info'].innerHTML = ""; 
        var myTab = document.getElementById['empTable']; 
        var opt = document.getElementById["opt"].value; 
        var index = document.getElementById[opt].cellIndex; 
        
        for [i = 1; i < myTab.rows.length; i++] { 
            var objCells = myTab.rows.item[i].cells; 
            
            for [var j = index; j