Hướng dẫn how to create table in javascript - cách tạo bảng trong javascript

Dưới đây là một ví dụ về việc vẽ một bảng bằng Raphael.js. Chúng tôi có thể vẽ các bảng trực tiếp vào khung vẽ của trình duyệt bằng Raphael.js Raphael.js là một thư viện JavaScript được thiết kế dành riêng cho các nghệ sĩ và nhà thiết kế đồ họa.

    
    
    
        

    
     
    

    
paper = new Raphael[0,0,500,500];// width:500px, height:500px

var x = 100;
var y = 50;
var height = 50
var width = 100;

WriteTableRow[x,y,width*2,height,paper,"TOP Title"];// draw a table header as merged cell
y= y+height;
WriteTableRow[x,y,width,height,paper,"Score,Player"];// draw table header as individual cells
y= y+height;
for [i=1;i


    
    Build a table

Lưu tệp dưới dạng bảng xây dựng.html và tiếp tục phần tiếp theo!build-table.html and go ahead to the next section!

Cách tạo bảng với JavaScript: Tạo đầu bảng

Tạo một tệp mới có tên Build-Table.js trong cùng thư mục với Build-Table.html và khởi động tệp với mảng sau:build-table.js in the same folder as build-table.html and start the file with the following array:

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
  { name: "Monte Falterona", height: 1654, place: "Parco Foreste Casentinesi" },
  { name: "Poggio Scali", height: 1520, place: "Parco Foreste Casentinesi" },
  { name: "Pratomagno", height: 1592, place: "Parco Foreste Casentinesi" },
  { name: "Monte Amiata", height: 1738, place: "Siena" }
];

Mục tiêu đầu tiên của chúng tôi là tạo ra đầu bảng. Nhưng chúng ta hãy nghĩ một chút về nó. Chúng tôi biết rằng phương thức tự nhiên createdEement [] tạo ra bất kỳ yếu tố nào chúng tôi chuyển cho nó. Giả sử chúng tôi muốn tạo một đầu bảng, chúng tôi có thể làm tài liệu.createelement ['thead']. Nhưng chúng ta có một sự thay thế tốt hơn không?generate the table head. But let's think a moment about it. We know that the native method createElement[] creates whatever element we pass to it. Say we want to create a table head, we can do document.createElement['thead']. But do we have a better alternative?

Hãy đi đến MDN, tại tham chiếu bảng phần tử. Bạn có thể thấy rằng giao diện DOM cho bảng là HTMLTableEuity.HTMLTableElement.

Điều thú vị cho HTMLTableEuity là các phương pháp mà nó phơi bày. Trong số các phương pháp có createdethead []. Chơi lô tô! CreatEthead trả về phần tử đầu bảng được liên kết với một bảng đã cho, nhưng tốt hơn, nếu không có tiêu đề nào tồn tại trong bảng, hãy tạo ra một bảng cho chúng tôi.createTHead[]. Bingo! createTHead returns the table head element associated with a given table, but better, if no header exists in the table, createTHead creates one for us.

Được trang bị kiến ​​thức này, hãy tạo một hàm trong tệp của chúng tôi, lấy bảng làm tham số. Đưa ra bảng, chúng ta có thể tạo một cái mới bên trong nó:

function generateTableHead[table] {
  let thead = table.createTHead[];
}

Bây giờ chúng ta hãy lấy bảng của chúng tôi [hãy nhớ rằng chúng tôi có một trong bảng xây dựng.html] và chuyển nó cho chức năng của chúng tôi:

function generateTableHead[table] {
  let thead = table.createTHead[];
}

let table = document.querySelector["table"];
generateTableHead[table];

Nếu bạn gọi bảng xây dựng.html trong một trình duyệt, bạn sẽ không thấy gì trên màn hình nhưng bảng điều khiển nhà phát triển sẽ hiển thị cho bạn một ngay bên trong bàn. Chúng tôi đi một nửa để điền vào đầu bàn. Chúng tôi thấy rằng đầu bàn chứa một hàng chứa đầy một loạt [tiêu đề bảng]. Mỗi tiêu đề bảng phải ánh xạ tới một khóa mô tả những gì dữ liệu của chúng tôi được tạo ra.

Thông tin đã có ở đó, bên trong đối tượng đầu tiên trong mảng núi. Chúng ta có thể lặp lại các khóa của đối tượng đầu tiên:

let mountains = [
  { name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" },
    //
];

và tạo ra ba tiêu đề bàn với các phím nói. Nhưng trước tiên chúng ta cần thêm một hàng vào chúng tôi! Làm sao? Document.CreateEement ['TR']? Không không. HTMLTableDeroWEuity của chúng tôi đủ tốt để cung cấp một phương thức Insertrow [], để được gọi trên tiêu đề bảng của chúng tôi. Hãy tái cấu trúc một chút chức năng Generatetableead của chúng tôi:insertRow[] method, to be called on our table header. Let's refactor a bit our generateTableHead function:

function generateTableHead[table] {
  let thead = table.createTHead[];
  let row = thead.insertRow[];
}

Và trong khi chúng ta ở đó, hãy nghĩ đến việc điền vào đầu bàn. Hàng mới phải chứa ba th [tiêu đề bảng]. Chúng ta cần tạo các phần tử thứ này theo cách thủ công và cho mỗi [tiêu đề bảng], chúng ta sẽ nối một nút văn bản. Chức năng của chúng tôi có thể đưa một tham số khác để lặp lại:

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

Lưu tệp và làm mới bảng xây dựng.html: Bạn sẽ thấy đầu bảng của bạn được điền với tên, chiều cao và địa điểm dưới dạng tiêu đề bảng. Xin chúc mừng! Đôi khi cảm giác thật tuyệt khi nghỉ ngơi từ React và Vue chỉ vì mục đích nhớ lại sự thao túng trực tiếp của Dom khó khăn và cồng kềnh như thế nào. Nhưng ở lại đây! Chúng tôi chưa hoàn thành.Sometimes it feels so good to take a break from React and Vue just for the sake of recalling how hard and cumbersome direct DOM manipulation is. But stay here! We're not done yet.

Thời gian để cư trú trên bàn ...

Cách tạo bảng với JavaScript: Tạo hàng và ô

Để điền vào bảng, chúng tôi sẽ làm theo một cách tiếp cận tương tự nhưng lần này chúng tôi cần lặp lại trên mọi đối tượng trong mảng núi. Và trong khi chúng tôi ở bên trong ... của vòng lặp, chúng tôi sẽ tạo một hàng mới cho mọi mục.for...of loop we will create a new row for every item.

Để tạo hàng, bạn sẽ sử dụng Insertrow [].insertRow[].

Nhưng chúng tôi không thể dừng lại ở đây. Bên trong vòng chính, chúng ta cần một vòng bên trong, lần này là ... trong. Vòng lặp bên trong lặp lại trên mọi khóa của đối tượng hiện tại và cùng lúc đó:inner loop, this time a for...in. The inner loop iterates over every key of the current object and in the same time it:

• tạo ra một tế bào mới
• Tạo một nút văn bản mới
• nối nút văn bản vào ô

Các ô được tạo ra với một phương pháp hữu ích khác của htmltableBlerowEuity, insertCell [].insertCell[].

Đó là, với logic ở trên, chúng ta có thể điền vào bảng của mình. Mở ra Build-Table.js và tạo một hàm mới có tên Generatetable. Chữ ký có thể giống như chức năng hiện tại của chúng tôi:build-table.js and create a new function named generateTable. The signature can be the same as our existing function:

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

Để chạy chức năng này, bạn sẽ gọi nó như vậy:

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

Hãy xem mã hoàn chỉnh:

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

Bạn có nghĩ rằng nó hoạt động? Hãy cho nó một phát bắn:

Ồ. Có vẻ như các hàng của chúng tôi đang được thêm vào đầu bàn chứ không phải vào thân bàn. Ngoài ra, không có thân xe!there is no table body!

Nhưng điều gì xảy ra nếu chúng ta chuyển đổi thứ tự chức năng? Hãy thử:

{ name: "Monte Falco", height: 1658, place: "Parco Foreste Casentinesi" }

và làm mới trình duyệt một lần nữa:

Nó hoạt động! Thêm vào đó, chúng tôi có một tbody [thân bàn] miễn phí. Làm thế nào như vậy? Khi bạn gọi INSERTROW [] trên một bảng trống, các phương thức sẽ chăm sóc việc tạo TBODY cho bạn [nếu không có].

Làm tốt! Mã của chúng tôi có thể không được tổ chức tốt [quá nhiều ràng buộc toàn cầu] nhưng chúng tôi sẽ đến đó trong một trong các bài viết tiếp theo.

Đến bây giờ bạn sẽ có thể thao tác các bảng HTML mà không cần bất kỳ thư viện bên ngoài nào. Chúc mừng!you should be able to manipulate HTML tables without any external library. Congrats!

Cách tạo bảng với JavaScript: Kết thúc

Trong hướng dẫn này, chúng tôi đã thấy cách tạo một bảng với JavaScript. Một bảng HTML được biểu diễn trong DOM bằng HTMLTableEuity. Giao diện này phơi bày rất nhiều phương pháp hữu ích để thao tác đầu bảng với createdethead và các hàng bảng với insertrow.HTMLTableElement. This interface exposes a lot of useful methods for manipulating table heads with createTHead and table rows with insertRow.

Mặt khác, các hàng bảng HTML kế thừa từ htmltablerowelement. Giao diện này có hai phương thức, một trong những phương pháp quan trọng nhất là InsertCell.HTMLTableRowElement. This interface has two methods, one of the most important being insertCell.

Đưa ra một mảng các đối tượng, có thể lặp lại chúng với ... vòng lặp để tạo các hàng bảng. Sau đó, đối với mỗi đối tượng, chúng tôi có thể lặp lại với ... để tạo các ô bảng.

Cảm ơn bạn đã đọc và theo dõi!

Bạn có thể tạo một bảng trong JavaScript không?

Làm thế nào bạn có thể tạo một bảng với 4 hàng và 3 cột trong HTML đưa ra một ví dụ?