gpt4 book ai didi

javascript - 我使用了 HTML + JAVAScript,但我只能看到 JAVAScript

转载 作者:行者123 更新时间:2023-12-02 21:08:34 25 4
gpt4 key购买 nike

我在一个页面中使用了 HTML 和 JAVAscript。

但是当我进入网站时,看到了。

我只能看到 JAVAscript,看不到 HTML 源代码。

有几行HTML字符串,和一个创建表格的jaascript

在页面中,我只能看到表格,而不是一些HTML字符串

在下面的正文代码中,

只有我可以看到“script ~~/script”!我在网页中看不到下面的内容。

    <br>
<a href="./admin.html">Back to admin main page</a> <br>
<a href="./food_list.html">Go to food list </a> <br>
<a href="./food_detail_list.html">Go to food detail list </a> <br>

这是正文代码

    <body>
<br>
<a href="./admin.html">Back to admin main page</a> <br>
<a href="./food_list.html">Go to food list </a> <br>
<a href="./food_detail_list.html">Go to food detail list </a> <br>

<script>showFoodList();</script>

</body>

这是完整的代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>

<script language="javascript">

// this function is used to ask food to server and take a data with json
function showFoodList(){
var para = document.location.search;
fetch("http://gyrjs07.dothome.co.kr/what_to_eat/foodlist.php")
.then(function(response) {
return response.json();
})
.then(function(myJson) {
creatTable(myJson);
});

}

function creatTable(data){
document.write("<table width='80%' border='1' style='margin: auto; text-align: center'>");

// for문 시작
for ( var i=0; i<data.length ; i++) {
document.write("<tr>"); // <tr> : 행추가
// 이중 for문 시작
for ( var j=0; j<data[i].length ; j++) {
var txt=data[i][j]; // 테이블각 셀에값을 출력
document.write("<td>"+ txt +"</td>"); // <td> : 열추가.
}
document.write("</tr>");
} //end for i
document.write("</table>"); // 테이블 태그를 닫는다.
}

</script>
</head>

<body>
<br>
<a href="./admin.html">Back to admin main page</a> <br>
<a href="./food_list.html">Go to food list </a> <br>
<a href="./food_detail_list.html">Go to food detail list </a> <br>

<script>showFoodList()</script>;

</body>
</html>

最佳答案

发生这种情况是因为您使用了 document.write 方法。它会自动调用 document.open 来删除文档中的所有现有节点。Document.write() 的文档和 Document.open()

更好的方法是将子节点附加到某个预定义的节点,如下面的代码片段所示。

const fakeApiResponse = [
["number", "name", "q-ty"],
["1.", "soda", "2"],
["2.", "beer", "3"],
["3", "pizza", "3"]
];

// this function is used to ask food to server and take a data with json
function showFoodList() {
// Emulate api call to get data
Promise.resolve(fakeApiResponse).then(function(myJson) {
creatTable(myJson);
});
}

function creatTable(data) {
// Get mountig node from HTML
const mountingPoind = document.getElementById("food-list");

// Create Table element and set some attributes
const table = document.createElement("table");
table.setAttribute("width", "80%");
table.setAttribute("border", "1");
table.setAttribute("style", "margin: auto; text-align: center");

// Start iterate over data to create table structure
for (let i = 0; i < data.length; i++) {
createTableRow(table, data[i]);
}

// Append table structure to mounting point
mountingPoind.appendChild(table);
}

// Creates row. Add text call createCell function to generate cells with data
// and append it to parent
function createTableRow(parent, rowData) {
const row = document.createElement("tr");
for (let j = 0; j < rowData.length; j++) {
createCell(row, rowData[j]);
}
parent.appendChild(row);
}

// Creates cell. Add text data to it and append it to parent
function createCell(parent, cellData) {
const cell = document.createElement("td");
cell.innerText = cellData;
parent.appendChild(cell);
}

showFoodList();
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>

<body>
<br />
<a href="./admin.html">Back to admin main page</a> <br />
<a href="./food_list.html">Go to food list </a> <br />
<a href="./food_detail_list.html">Go to food detail list </a> <br />
<br />
<div id="food-list"></div>

<script src="src/index.js"></script>
</body>
</html>

关于javascript - 我使用了 HTML + JAVAScript,但我只能看到 JAVAScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61159423/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com