英文:
How can I add table with javascript to a html page here is my trying
问题
Here's the translated code portion:
function generateTable() {
const table = document.createElement("table");
table.classList.add("table", "table-striped");
const thead = document.createElement("thead");
const tr = document.createElement("tr");
const tbody = document.createElement("tbody");
const titles = [
"Name",
"Manufacturer",
"Type",
"Packaging",
"Quantity",
"Price",
];
for (const title of titles) {
const th = document.createElement("th");
th.innerText = title;
tr.appendChild(th);
thead.appendChild(tr);
table.appendChild(thead);
}
table.appendChild(tbody);
for (const prod of products) {
const tr = generateRow(tea);
tbody.appendChild(tr);
}
return table;
}
Regarding your question about the for loops:
-
The first for loop iterates over an array of titles (presumably column headers for the table). It creates a
th(table header) element for each title, sets the text of thethelement to the title, and appends it to the table header row (tr). Then, it appends the header row to thetheadelement, which is in turn appended to thetable. -
The second for loop seems to be intended to iterate over an array named
products, generating table rows for each product using a function calledgenerateRow. However, there seems to be an issue in this loop, asteais used as the argument forgenerateRow, which might be a typo or an undefined variable. It should likely be replaced withprodto correctly generate rows for each product.
If you have more specific questions about how these loops work or need further clarification, please let me know.
英文:
function generateTable() {
const table = document.createElement("table")
table.classList.add("table", "table-striped")
const thead = document.createElement("thead")
const tr = document.createElement("tr")
const tbody = document.createElement("tbody")
const titles = [
"Name",
"Manufacturer",
"Type",
"Packaging",
"Quantity",
"Price",
];
for(const title of titles){
const th = document.createElement("th")
th.innerText = title
tr.append(th)
thead.append(tr)
table.append(thead)
}
table.append(tbody)
for (const prod of products) {
const tr = generateRow(tea)
tbody.appendChild(tr)
}
return table
}
I want it for my exampe, but need some fetch api.
So this code actually works but I dont understand everything.
I dont understand the for loops work. Can somebody explaine it?
答案1
得分: 1
在这段代码中，您正在逐步进行操作：
这里，您正在定义一些变量，表示每个变量都将包含一个HTML标记。
const table = document.createElement("table") //equals a table
const thead = document.createElement("thead") //equal a thead tag (header)
const tr = document.createElement("tr") //equals a table row
然后，在这里，您为常量table添加了class 'table'和'table-striped'。
table.classList.add("table", "table-striped") //you add the class 'table' and 'table-striped' appended to your constant table.
在结构化编程中，循环是一种执行某些操作直到满足条件的方式。在这种情况下，使用循环遍历您的titles数组，如下所示：
for (const title of titles)
从这一刻开始，创建了常量title，它仅接受titles中某个元素的特定位置，也就是说，在第一个标题中，它将等于titles[0]，或者更具体地说，将是"name"。
（请注意，每次进入循环时，值都会更改并移动到下一个位置。）
对于每个数组元素，您执行以下过程：
const th = document.createElement("th") //creates the column title element (th)
th.innerText = title //this is the text contained within the th, which is the value within the titles array
tr.append(th) //assign your th to the table row
thead.append(tr) //assign your tr to thead
table.append(thead) //assign your thead to the html table
如果没有这样做，您将需要为每个元素重复您的代码，只需更改title为字段名。
接下来，对于此示例代码中未完全定义的其他变量，情况也是如此。对于函数的末尾，您返回了您的表格。
如果您想深入了解内容，我建议阅读以下链接，它们将详细解释该过程并提供示例。
英文:
Let's do it by steps:
Here, you are defining some variables, indicating that each one of them will contain an HTML tag.
const table = document.createElement("table") //equals a table
const thead = document.createElement("thead") //equal a thead tag (header)
const tr = document.createElement("tr") //equals a table row
And here:
table.classList.add("table", "table-striped") //you add the class 'table' and 'table-striped' appended to your constant table.
In structured programming, a loop is a way to perform certain actions until the condition is satisfied.
In this case, use the loop on your titles array to loop through as follows:
for(const title of titles)
From this moment on, the title constant is created, which takes only the specific position of one of the elements within titles, that is, in your first title it will be equal a titles[0] or having a more specific value, will be "name".
(Note that each time it enters the loop, the value will change and move on to the next position.)
After this for each array element, you do the following process:
const th = document.createElement("th") //creates the column title element (th)
th.innerText = title //this is the text contained within the th, which is the value within the titles array
tr.append(th) //assign your th to the table row
thead.append(tr) //assign your tr to thead
table.append(thead) //assign your thead to the html table
If this was not done, you would need to repeat your code once for each element, changing only the title to the field name.
In sequence the same happens with other variables that were not fully defined in this example code. The explanation is the same for all. And at the end of the function, you return your table.
If you want to go deeper into the content, I recommend reading these links, which will explain the process in detail and with an example.
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code
https://www.w3schools.com/js/js_loop_for.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
https://www.w3schools.com/html/html_tables.asp
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论