Làm thế nào tôi có thể điền một bảng với JavaScript theo cách thích hợp?
function loadTableData[] {
//0: Date
//1: Name
var row = document.getElementById["test"];
var x = row.insertCell[0];
x.innerHTML = "10/17/2018";
var x = row.insertCell[1];
x.innerHTML = "john doe";
}
date
file name
loadTableData[];
Mã hiện tại của tôi điền vào hai ô đầu tiên nhưng tôi muốn chuyển sang cột tiếp theo và điền vào hai ô khác. Tôi không chắc làm thế nào để làm điều này một cách chính xác.
Sản lượng hiện tại
Isherwood
54.5K15 Huy hiệu vàng105 Huy hiệu bạc147 Huy hiệu đồng15 gold badges105 silver badges147 bronze badges
Hỏi ngày 21 tháng 10 năm 2018 lúc 21:18Oct 21, 2018 at 21:18
1
Bí quyết là lặp qua dữ liệu của bạn và sử dụng insertRow
để tạo một hàng trước khi bạn chèn dữ liệu. Bạn có thể thấy rằng phần tử tbody
trống trong ví dụ này và mỗi phần tử tr
được tạo động.
date
file name
const items1 = [
{ date: "10/17/2018", name: "john doe" },
{ date: "10/18/2018", name: "jane doe" },
];
const items2 = [
{ date: "10/17/2019", name: "john doe" },
{ date: "10/18/2019", name: "jane doe" },
];
function loadTableData[items] {
const table = document.getElementById["testBody"];
items.forEach[ item => {
let row = table.insertRow[];
let date = row.insertCell[0];
date.innerHTML = item.date;
let name = row.insertCell[1];
name.innerHTML = item.name;
}];
}
loadTableData[items1];
loadTableData[items2];
loadTableData[[]];
Đã trả lời ngày 21 tháng 10 năm 2018 lúc 22:13Oct 21, 2018 at 22:13
Borrascadorborrascadorborrascador
5155 Huy hiệu bạc13 Huy hiệu Đồng5 silver badges13 bronze badges
4
Như những người trả lời khác đã đề cập, bạn cần làm việc với tài liệu bằng cách sử dụng DOM. Hãy coi mọi thứ như các yếu tố họ đang ở trong HTML.
var table = document.getElementById["myTable"];
var rowNode = document.createElement["tr"];
var cellNode = document.createElement["td"];
var textNode = document.createTextNode["John Doe"];
cellNode.appendChild[textNode];
rowNode.appendChild[cellNode];
table.appendChild[rowNode];
Để có thêm các tương tác với phần tử DOM bảng, thông số kỹ thuật W3C [giao diện DOM] là một tài liệu tham khảo tốt.
Đã trả lời ngày 21 tháng 10 năm 2018 lúc 22:18Oct 21, 2018 at 22:18
Sean Aitkensean AitkenSean Aitken
1.1571 Huy hiệu vàng11 Huy hiệu bạc23 Huy hiệu đồng1 gold badge11 silver badges23 bronze badges
Tôi không phải là một chuyên gia HTML, nhưng:
Tôi nghĩ rằng bạn phải sử dụng Element.AppendChild [] để nối cho đứa trẻ bạn đã tạo ra. Bạn không nên sử dụng bên trong, thay vào đó sử dụng các phương thức được tích hợp vào mô hình đối tượng tài liệu.
Đã trả lời ngày 21 tháng 10 năm 2018 lúc 21:52Oct 21, 2018 at 21:52
S Grahams GrahamS Graham
2222 Huy hiệu bạc14 Huy hiệu Đồng2 silver badges14 bronze badges
const courses = [{
"Name": "Communications",
"Date": "22 April 2022",
"Code": "CS368"
},
{
"Name": "Programming",
"Date": "22 April 2021",
"Code": "CS368"
},
{
"Name": "Networks",
"Date": "22 April 2002",
"Code": "CS368"
}]
const table = document.getElementById["tableBody"];
courses.map[course=>{
let row = table.insertRow[];
let name = row.insertCell[0];
name.innerHTML = course.Name;
let date = row.insertCell[1];
date.innerHTML = course.Date;
let code = row.insertCell[2];
code.innerHTML = course.Code;
}];
Name
Date
Code
Đã trả lời ngày 27 tháng 3 lúc 7:58Mar 27 at 7:58