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

Question

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.

Nội dung chính Show

Cách tạo bảng với JavaScript: Những gì bạn sẽ học
Cách tạo bảng với JavaScript: Yêu cầu
Cách tạo bảng với JavaScript: Điều tra các yêu cầu
Cách tạo bảng với JavaScript: Tạo đầu bảng
Cách tạo bảng với JavaScript: Tạo hàng và ô
Cách tạo bảng với JavaScript: Kết thúc
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ụ?
TD và TR trong JavaScript là gì?
Chúng ta có thể xây dựng bảng bằng cách sử dụng HTML không?

Vui lòng kiểm tra hình ảnh xem trước: https://i.stack.imgur.com/rafhh.png

Những gì nó cần để tạo ra một bảng với vani JavaScript? Làm thế nào khó khăn để điều khiển DOM mà không có thư viện? Hãy tìm hiểu trong hướng dẫn này!

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

Luôn luôn là thời điểm tốt để làm mới các kỹ năng JavaScript của bạn: Thao tác với DOM với API gốc là một chủ đề xuất hiện rất nhiều trong các cuộc phỏng vấn kỹ thuật.always a good time for refreshing your JavaScript skills: manipulating the DOM with the native API is a topic that comes up a lot in technical interviews.

Trong hướng dẫn sau đây, chúng tôi sẽ xem những gì cần thiết để tạo một bảng với vani JavaScript, mà không cần dùng đến bất kỳ thư viện hoặc khung nào.

Cách tạo bảng với JavaScript: Những gì bạn sẽ học

Trong hướng dẫn này, bạn sẽ học cách:

Tạo một bảng với JavaScript
Sử dụng API DOM gốc để thao tác bảng

Cách tạo bảng với JavaScript: Yêu cầu

Để làm theo với hướng dẫn này, bạn nên có một sự hiểu biết cơ bản về HTML và JavaScript.

Cách tạo bảng với JavaScript: Điều tra các yêu cầu

Bạn được yêu cầu xây dựng một bảng HTML với JavaScript. Bắt đầu từ một mảng "Núi" Nhiệm vụ của bạn là tạo bảng gán mọi phím cho một cột và một hàng trên mỗi đối tượng.array of "mountains" your task is to generate the table assigning every key to a column and one row per object.

Mỗi đối tượng có hình dạng sau:

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

Chúng tôi có một cái tên, chiều cao và một vị trí mà đỉnh nằm ở. Nhưng điều gì tạo nên một bảng HTML? Bảng HTML là một phần tử chứa dữ liệu bảng, được trình bày trong các hàng và cột. Điều đó có nghĩa là đưa ra mảng sau:

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

Chúng tôi đang mong đợi sẽ tạo ra bảng sau:

<table>
    <thead>
    <tr>
        <th>nameth>
        <th>heightth>
        <th>placeth>
    tr>
    thead>
    <tbody>
    <tr>
        <td>Monte Falcotd>
        <td>1658td>
        <td>Parco Foreste Casentinesitd>
    tr>
    <tr>
        <td>Monte Falteronatd>
        <td>1654td>
        <td>Parco Foreste Casentinesitd>
    tr>
    tbody>
table>

Như bạn có thể thấy bảng có một (đầu bảng) chứa một tr (hàng bảng), lần lượt chứa ba th (tiêu đề bảng).thead (table head) containing a tr (table row) which in turn contains three th (table header).

Sau đó, có tbody (thân bàn) chứa một loạt tr (hàng bảng). Mỗi hàng bảng chứa một số phần tử TD nhất định (ô bảng).tbody (table body) containing a bunch of tr (table rows). Each table row contains a certain number of td elements (table cells).

Với các yêu cầu này tại chỗ, chúng tôi có thể bắt đầu mã hóa tệp JavaScript của mình. Điểm khởi đầu của chúng tôi có thể là HTML sau:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Build a tabletitle>
head>
<body>
<table>

table>
body>
<script src="build-table.js">script>
html>

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

0

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

1

Để 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" }

2

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

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

3

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

4

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?

function Generatetablehead (bảng, dữ liệu) {let thead = bảng.createThead ();Đặt hàng = thead.Chèn hàng();for (Đặt khóa của dữ liệu) {hãy để th = document.createdeLement ("th");Đặt văn bản = tài liệu.

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

Bạn có thể tạo một bảng bằng phần tử.Bên trong phần tử, bạn có thể sử dụng các phần tử để tạo hàng và để tạo các cột bên trong một hàng, bạn có thể sử dụng các phần tử.Bạn cũng có thể định nghĩa một ô là tiêu đề cho một nhóm các ô bảng sử dụng phần tử.using the element. Inside the

element, you can use the elements to create rows, and to create columns inside a row you can use the

elements. You can also define a cell as a header for a group of table cells using the

element.

TD và TR trong JavaScript là gì?

Thẻ bảng HTML.

Chúng ta có thể xây dựng bảng bằng cách sử dụng HTML không?

Để tạo bảng trong HTML, sử dụng thẻ.Một bảng bao gồm các hàng và cột, có thể được đặt bằng một hoặc nhiều, và các phần tử.Một hàng bảng được xác định bởi thẻ.Để đặt tiêu đề bảng, sử dụng thẻ.use the tag. A table consist of rows and columns, which can be set using one or more , tag. To set table header, use the

tag.
, and	elements. A table row is defined by the

programming javascript Dom create table HTML table Table w3school Create table HTML HTML table border

Bài Viết Liên Quan

Cổng kết nối bluetooth v4.0 orico là gì năm 2024

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

Cách tạo bảng với JavaScript: Những gì bạn sẽ học

Cách tạo bảng với JavaScript: Yêu cầu

Cách tạo bảng với JavaScript: Điều tra các yêu cầu

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

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

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

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

TD và TR trong JavaScript là gì?

Chúng ta có thể xây dựng bảng bằng cách sử dụng HTML không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội