Làm cách nào để tạo bảng nút js trong html?

Lệnh CREATE TABLE dùng để tạo bảng trong MySQL. Bạn phải đảm bảo rằng bạn đã xác định tên của cơ sở dữ liệu khi tạo kết nối

Ví dụ

Để tạo bảng có tên "nhân viên"

Tạo một tệp js có tên là nhân viên. js có dữ liệu sau trong thư mục DBexample

Bây giờ hãy mở lệnh terminal và chạy lệnh sau

xác minh

Để xác minh xem bảng đã được tạo hay chưa, hãy sử dụng lệnh SHOW TABLES

Bạn cũng có thể kiểm tra cấu trúc của bảng bằng lệnh DESC

Tạo bảng có khóa chính

Tạo khóa chính trong bảng mới

Hãy tạo một bảng mới tên là "employee2" có id là khóa chính

Tạo một tệp js có tên là employee2. js có dữ liệu sau trong thư mục DBexample

Bây giờ hãy mở lệnh terminal và chạy lệnh sau

xác minh

Để xác minh xem bảng đã được tạo hay chưa, hãy sử dụng lệnh SHOW TABLES

Bạn cũng có thể kiểm tra cấu trúc của bảng bằng lệnh DESC để xem id có phải là khóa chính không

Thêm cột trong Bảng hiện có

Câu lệnh ALTER TABLE được sử dụng để thêm một cột trong một bảng hiện có. Lấy bảng "employee2" đã tạo và sử dụng cột lương mới

Cần những gì để tạo một bảng với vanilla JavaScript?

Đây 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 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

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

Cách tạo bảng bằng 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 bảng bằng JavaScript
• sử dụng API DOM gốc để thao tác với bảng

Cách tạo bảng bằng JavaScript. yêu cầu

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

Cách tạo bảng bằng JavaScript. điều tra các yêu cầu

Bạn được yêu cầu tạo một bảng HTML bằng 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 khóa cho một cột và một hàng cho mỗi đối tượng

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à vị trí của đỉnh nằm trong. Nhưng điều gì tạo nên một bảng HTML? . Đ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 để tạo ra bảng sau

    
    
        name
        height
        place
    
    
    
    
        Monte Falco
        1658
        Parco Foreste Casentinesi
    
    
        Monte Falterona
        1654
        Parco Foreste Casentinesi
    
    

Như bạn có thể thấy bảng có một thead [đầu bảng] chứa một tr [hàng của bảng] mà lần lượt chứa ba thứ [tiêu đề bảng]

Sau đó, có tbody [thân bảng] chứa một loạt tr [hàng của bảng]. Mỗi hàng của bảng chứa một số phần tử td nhất định [các ô của bảng]

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

DOCTYPE html>


    
    Build a table

Lưu tệp dưới dạng bảng xây dựng. html và chuyển sang phần tiếp theo

Cách tạo bảng bằng JavaScript. tạo đầu bảng

Tạo một tệp mới có tên là bảng xây dựng. js trong cùng thư mục với bảng xây dựng. html và bắt đầu tệp với mảng sau

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 đầu bảng. Nhưng chúng ta hãy suy nghĩ một chút về nó. Chúng ta biết rằng phương thức gốc createElement[] tạo ra bất kỳ phần tử nào mà chúng ta truyền vào nó. Giả sử chúng ta muốn tạo một đầu bảng, chúng ta có thể làm tài liệu. createElement['đầu']. Nhưng chúng ta có một sự thay thế tốt hơn?

Hãy chuyển sang MDN, tại phần tham khảo bảng thành phần. Bạn có thể thấy rằng giao diện DOM cho bảng là HTMLTableElement

Điều thú vị đối với HTMLTableElement là các phương thức mà nó hiển thị. Trong số các phương thức có createTHead[]. Chơi lô tô. createTHead trả về phần tử đầu bảng được liên kết với một bảng nhất định, nhưng tốt hơn, nếu không có tiêu đề nào tồn tại trong bảng, thì createTHead sẽ tạo một tiêu đề cho chúng tôi

Đượ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 thead mới bên trong nó

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

Bây giờ, hãy lấy bảng của chúng ta [hãy nhớ rằng chúng ta có một cái trong bảng xây dựng. html] và chuyển nó vào 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 build-table. html trong 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 dành cho nhà phát triển sẽ hiển thị cho bạn một quảng cáo ngay bên trong bảng. Chúng tôi đang đi được một nửa chặng đường để điền vào đầu bảng. Chúng tôi thấy rằng đầu bảng chứa một hàng chứa đầy thứ [tiêu đề bảng]. Mỗi tiêu đề bảng phải ánh xạ tới một khóa mô tả dữ liệu của chúng tôi được tạo từ gì

Thông tin đã có sẵn, 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 ba tiêu đề bảng với các khóa đã nói. Nhưng trước tiên chúng ta cần thêm một hàng vào quảng cáo của mình. Thế nào? . createElement['tr']? . HTMLTableRowElement của chúng tôi đủ tử tế để cung cấp phương thức insertRow[], được gọi trên tiêu đề bảng của chúng tôi. Hãy cấu trúc lại một chút hàm generateTableHead của chúng ta

________số 8

Và trong khi chúng tôi ở đó, hãy nghĩ đến việc điền vào đầu bảng. 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à với mỗi thứ [tiêu đề bảng], chúng ta sẽ thêm một nút văn bản. Hàm của chúng tôi có thể lấy một tham số khác để lặp lại

function generateTableHead[table, data] {
  let thead = table.createTHead[];
  let row = thead.insertRow[];
  for [let key of data] {
    let th = document.createElement["th"];
    let text = document.createTextNode[key];
    th.appendChild[text];
    row.appendChild[th];
  }
}

let table = document.querySelector["table"];
let data = Object.keys[mountains[0]];
generateTableHead[table, data];

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 mình được điền tên, chiều cao và vị trí làm tiêu đề bảng. Xin chúc mừng. Đôi khi, thật tuyệt khi tạm dừng React và Vue chỉ để nhớ lại việc thao tác DOM trực tiếp khó khăn và cồng kềnh như thế nào. Nhưng ở lại đây. Chúng tôi vẫn chưa hoàn thành

Thời gian điền vào bảng

Cách tạo bảng bằng JavaScript. tạo hàng và ô

Để điền vào bảng, chúng ta sẽ thực hiện theo một cách tiếp cận tương tự nhưng lần này chúng ta cần lặp lại mọi đối tượng trong mảng núi. Và trong khi chúng tôi đang ở bên trong cho. của vòng lặp, chúng tôi sẽ tạo một hàng mới cho mọi mục

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

Nhưng chúng ta không thể dừng lại ở đây. Bên trong vòng lặp chính, chúng ta cần một vòng lặp bên trong, lần này là for. Trong. Vòng lặp bên trong lặp qua mọi khóa của đối tượng hiện tại và đồng thời nó

• tạo một ô mới
• tạo một nút văn bản mới
• nối thêm nút văn bản vào ô

Các ô được tạo bằng một phương thức hữu ích khác của HTMLTableRowElement, insertCell[]

Đó là, với logic ở trên, chúng ta có thể điền vào bảng của mình. Mở bảng xây dựng. js và tạo một hàm mới có tên là generateTable. Chữ ký có thể giống như chức năng hiện có của chúng tôi

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

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

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

Chúng ta hãy xem mã hoàn chỉnh

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

Bạn có nghĩ rằng nó hoạt động?

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

Nhưng điều gì sẽ xảy ra nếu chúng ta thay đổi thứ tự chức năng?

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

và làm mới lại trình duyệt

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 vậy?

Tốt lắm. 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ẽ đề cập đến vấn đề đó ở một trong các bài đăng tiếp theo

Bây giờ bạn có thể thao tác với 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

Cách tạo bảng bằng JavaScript. kết thúc

Trong hướng dẫn này, chúng ta đã thấy cách tạo bảng bằng JavaScript. Một bảng HTML được biểu diễn trong DOM bởi HTMLTableElement. Giao diện này hiển thị rất nhiều phương thức hữu ích để thao tác với các đầu bảng bằng createTHead và các hàng của bảng bằng insertRow

Mặt khác, các hàng của 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 thức quan trọng nhất là insertCell

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

Làm cách nào để tạo bảng bằng nút js?

Tôi có thể sử dụng Nodejs với HTML không?

Làm cách nào để tạo bảng trong HTML?

Làm cách nào để tạo bảng bằng JavaScript trong HTML?