Tôi đang cố gắng tạo một bảng HTML bằng Node.js. Tôi sẽ gửi dữ liệu JSON từ máy chủ đến trang HTML. Sau đó, tôi đang nghĩ đến việc biến JSON này thành một bảng nhưng tôi không thể chạy bất kỳ phương pháp nào trên internet.
Vấn đề của tôi chính xác như thế này:
1- Bảng của tôi chứa các lớp CSS khác nhau. Làm cách nào để thêm các lớp này vào bảng tôi sẽ tạo với JavaScript?
2- Tôi muốn sử dụng các công cụ mẫu như pug, ejs nhưng chỉ cho bảng. Tôi có thể nhúng mã PUG hoặc EJS bên trong trang HTML thông thường không?
Nói tóm lại, cách dễ nhất để tạo ra một bảng cho node.js là gì? [mà không mất thiết kế CSS]
hỏi ngày 21 tháng 1 năm 2020 lúc 20:09Jan 21, 2020 at 20:09
2
Vì câu hỏi của bạn rất chung chung, tôi giả sử một số điều và cung cấp một giải pháp
Giả sử bạn nhận được mảng json từ máy chủ như bên dưới
[
{
name:'John',
surname:'Doe',
age:25
},
{
name:'Jane',
surname:'War',
age:21
},
{
name:'Shane',
surname:'Meyer',
age:22
}
]
Bạn có HTML như dưới đây
Name
Surname
Age
Viết JavaScript như bên dưới để thêm hàng bên trong bảng
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
Đã trả lời ngày 22 tháng 1 năm 2020 lúc 12:20Jan 22, 2020 at 12:20
SarfraazsarfraazSarfraaz
1.2433 huy hiệu bạc15 huy hiệu đồng3 silver badges15 bronze badges
Bài viết này là một cái nhìn tổng quan về một số phương pháp DOM cấp 1 cơ bản, mạnh mẽ và cách sử dụng chúng từ JavaScript. Bạn sẽ học cách tạo, truy cập và kiểm soát và loại bỏ các phần tử HTML một cách linh hoạt. Các phương thức DOM được trình bày ở đây không cụ thể cho HTML; Họ cũng áp dụng cho XML. Các cuộc biểu tình được cung cấp ở đây sẽ hoạt động tốt trong bất kỳ trình duyệt hiện đại nào. LƯU Ý: Các phương thức DOM được trình bày ở đây là một phần của thông số kỹ thuật cấp 1 của mô hình đối tượng tài liệu [CORE]. DOM Cấp 1 bao gồm cả hai phương thức để truy cập tài liệu chung và thao tác [lõi DOM 1] cũng như các phương thức cụ thể cho các tài liệu HTML [DOM 1 HTML]. The DOM methods presented here are part of the Document
Object Model [Core] level 1 specification. DOM level 1 includes both methods for generic document access and manipulation [DOM 1 Core] as well as methods specific to HTML documents [DOM 1 HTML]. Trong ví dụ này, chúng tôi thêm một bảng mới vào trang khi nhấp vào nút.Tạo bảng HTML một cách linh hoạt
Thí dụ
HTML
JavaScript
function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
1, là con của các yếu tố forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8.Đối với mỗi phần tử
1, sau đó chúng tôi đã tạo nút văn bản với văn bản của ô bảng. Khi chúng tôi đã tạo các phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
5, forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
6, forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8 và
1, và sau đó là nút văn bản, sau đó chúng tôi nối từng đối tượng vào cha mẹ của nó theo thứ tự ngược lại:- Đầu tiên, chúng tôi đính kèm từng nút văn bản vào phần tử
1 của nó bằng cách sử dụngcell.appendChild[cellText];
- Tiếp theo, chúng tôi đính kèm từng phần tử
1 vào phần tử cha mẹ của nó bằng cách sử dụng - Tiếp theo, chúng tôi đính kèm từng phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8 vào phần tử cha mẹ forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
6 bằng cách sử dụngtblBody.appendChild[row];
- Tiếp theo, chúng tôi đính kèm phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
6 vào phần tử forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
5 của nó bằng cách sử dụngtbl.appendChild[tblBody];
- Tiếp theo, chúng tôi đính kèm phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
5 vào phần tử function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
1]. Cuối cùng, mỗi
1 có một con: một nút văn bản.Đặt màu nền của một đoạn văn
Thí dụ
Trong ví dụ này, chúng tôi thêm một bảng mới vào trang khi nhấp vào nút.
HTML
Name
Surname
Age
1JavaScript
Name
Surname
Age
2Kết quả
Giải trình
Lưu ý thứ tự chúng tôi đã tạo các phần tử và nút văn bản:
Đầu tiên chúng tôi tạo ra phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
5.
- Tiếp theo, chúng tôi đã tạo ra phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
6, là một đứa trẻ của phần tử forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
5.
Name
Surname
Age
3 - Tiếp theo, chúng tôi đã sử dụng một vòng lặp để tạo ra các yếu tố
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8, là con của yếu tố forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
6.
Name
Surname
Age
4
- Đối với mỗi yếu tố
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8, chúng tôi đã sử dụng một vòng lặp để tạo ra các phần tử
1, là con của các yếu tố forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8.
Name
Surname
Age
5
Đối với mỗi phần tử
1, sau đó chúng tôi đã tạo nút văn bản với văn bản của ô bảng.
Khi chúng tôi đã tạo các phần tử
forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
5, forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
6, forEach[let row in array] {
$['#my_table'].append[`
${row.name}
${row.surname}
${row.age}
`];
}
8 và
1, và sau đó là nút văn bản, sau đó chúng tôi nối từng đối tượng vào cha mẹ của nó theo thứ tự ngược lại:
Name
Surname
Age
6Điều này có nghĩa là bạn đã tạo một nút thuộc loại
cell.appendChild[cellText];
5 [một đoạn văn bản] có dữ liệu văn bản là cell.appendChild[cellText];
6 và cell.appendChild[cellText];
7 là tham chiếu của bạn về đối tượng nút này. Để chèn văn bản này vào trang HTML của bạn, bạn cần biến nút văn bản này thành một đứa trẻ của một số yếu tố nút khác.Chèn các yếu tố với Phụ lục [..]
Vì vậy, bằng cách gọi
cell.appendChild[cellText];
8, bạn đang biến phần tử thành một đứa con mới của yếu tố cell.appendChild[cellText];
9 thứ hai.
Name
Surname
Age
7Sau khi thử nghiệm mẫu này, lưu ý rằng các từ xin chào và thế giới cùng nhau: Helloworld. Vì vậy, về mặt trực quan, khi bạn thấy trang HTML, có vẻ như hai nút văn bản Hello và World là một nút duy nhất, nhưng hãy nhớ rằng trong mô hình tài liệu, có hai nút. Nút thứ hai là một nút mới loại
cell.appendChild[cellText];
5 và nó là con thứ hai của thẻ cell.appendChild[cellText];
9 thứ hai. Hình dưới đây cho thấy đối tượng nút văn bản được tạo gần đây bên trong cây tài liệu.
Lưu ý: tblBody.appendChild[row];
2 và tblBody.appendChild[row];
3 là một cách đơn giản để bao gồm không gian trắng giữa các từ xin chào và thế giới. Một lưu ý quan trọng khác là phương pháp tblBody.appendChild[row];
4 sẽ nối cho đứa trẻ sau đứa trẻ cuối cùng, giống như thế giới từ đã được thêm vào sau từ Hello. Vì vậy, nếu bạn muốn nối thêm một nút văn bản giữa Hello và World, bạn sẽ cần sử dụng tblBody.appendChild[row];
5 thay vì tblBody.appendChild[row];
4.
tblBody.appendChild[row];
2 and tblBody.appendChild[row];
3 is a simple way to include white space between the words hello and world. Another important note is that the tblBody.appendChild[row];
4 method will append the child after the last child,
just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world, you will need to use tblBody.appendChild[row];
5 instead of tblBody.appendChild[row];
4.Tạo các yếu tố mới với đối tượng tài liệu và phương thức createdEuity [..]
Bạn có thể tạo các phần tử HTML mới hoặc bất kỳ yếu tố nào khác bạn muốn với
tblBody.appendChild[row];
7. Ví dụ: nếu bạn muốn tạo một phần tử cell.appendChild[cellText];
9 mới với tư cách là con của phần tử function generateTable[] {
// creates a element and a element
const tbl = document.createElement["table"];
const tblBody = document.createElement["tbody"];
// creating all cells
for [let i = 0; i
Chủ Đề