【发布时间】：2022-01-07 18:25:14
【问题描述】：
我正在使用一个带有 javascript 函数的 HTML 表格从谷歌发布的 CSV 表格中获取单元格值到我的 HTML 表格中。
正如您在我的表格屏幕截图中看到的那样，单元格值显示不正确。
因为
Test 1 应该显示值 10（为此有一个名为 loadData() 的函数）
Test 2 应该显示值 20（为此有一个名为 loadData2() 的函数）
但现在它只显示 20，它来自名为 loadData2() 的函数，用于 Test 1 和 Test 2 行。
也许我的 onload 函数调用不正常。
能否请您重新检查我的代码这里出了什么问题？我是编码新手。我不知道如何解决它。
这是我的 javascript 代码：
function loadData() {
console.log('loadData');
var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRxRr2GAVpZAtGlpG3vQVDIwqjHjWq3z2Y-NQOf5Tu9IoEZDRQAQwevq8LSIXgwcql6EMyINFf04Dp2/pub?gid=0&single=true&range=B2&output=csv";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("display").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function loadData2() {
console.log('loadData2');
var url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRxRr2GAVpZAtGlpG3vQVDIwqjHjWq3z2Y-NQOf5Tu9IoEZDRQAQwevq8LSIXgwcql6EMyINFf04Dp2/pub?gid=0&single=true&range=B3&output=csv";
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("display2").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function start() {
loadData();
loadData2();
}
我的html代码代码：
<body onload="start()">
<form name="Cpro">
<table border="0" margin="0" padding="0" cellspacing="0" cellpadding="0">
<tr height="20"px; style="border:0px;" >
<td style="height:20px; width: 61.539px; background-color:#D6DCE4; border-top: solid 1px #8EA9DB; border-bottom: solid 1px #8EA9DB; border-right: solid 1px #8EA9DB; border-left: solid 1px #8EA9DB; font-size: 16px; font-family:Arial; color:#000000; text-align: left; ">Test 1</td>
<td style="height:20px; width: 118.917px; background-color:#FFF2CC; border-top: solid 1px #8EA9DB; border-bottom: solid 1px #8EA9DB; border-right: solid 1px #8EA9DB; border-left: solid 1px #8EA9DB; font-size: 16px; font-family:Arial; color:#000000; text-align: right; ">
<div id="display"></div>
</td>
</tr>
<tr height=" 23.994px;" style="border:0px;" >
<td style="height:20px; width: 61.539px; background-color:#D6DCE4; border-top: solid 1px #8EA9DB; border-bottom: solid 1px #8EA9DB; border-right: solid 1px #8EA9DB; border-left: solid 1px #8EA9DB; font-size: 16px; font-family:Arial; color:#000000; text-align: left; ">Test 2</td>
<td style="height:20px; width: 118.917px; background-color:#FFF2CC; border-top: solid 1px #8EA9DB; border-bottom: solid 1px #8EA9DB; border-right: solid 1px #8EA9DB; border-left: solid 1px #8EA9DB; font-size: 16px; font-family:Arial; color:#000000; text-align: right; ">
<div id="display2"></div>
</td>
</tr>
<tr height=" 23.994px;" style="border:0px;" >
<td style="height:20px; width: 61.539px; background-color:#D6DCE4; border-top: solid 1px #8EA9DB; border-bottom: solid 1px #8EA9DB; border-right: solid 1px #8EA9DB; border-left: solid 1px #8EA9DB; font-size: 16px; font-family:Arial; color:#000000; text-align: left; ">Test 3</td>
<td style="height:20px; width: 118.917px; background-color:#FFF2CC; border-top: solid 1px #8EA9DB; border-bottom: solid 1px #8EA9DB; border-right: solid 1px #8EA9DB; border-left: solid 1px #8EA9DB; font-size: 16px; font-family:Arial; color:#000000; text-align: right; ">
</td>
</tr>
</table>
</form>
</body>
请帮忙。 谢谢
【问题讨论】：
-
每个文档可以有一个
body标签，当然不能有body标签作为td的子标签。使用有效的 HTML 会让你走得更远 -
@DanielPaul 伙计，我是编码新手。这就是我需要帮助的原因。我以后会学习的。您现在可以帮忙修复我的代码吗？谢谢
-
请帮助我们清理您的代码。不要使用内联样式，缩进你的代码，只提供重现问题所需的内容。
-
@JonP 我不知道如何修复我的代码。因为我对编码很陌生。你能修复并发布你的完整代码吗？非常感谢。
-
你才刚刚开始，现在是学习基础知识的时候了。
标签： javascript html