I want to display various cell values from google published csv sheet inside of <td></td> in my html table.
My current code can only display cell value from “B2” from published google csv sheet into the html table.
But I want to display other cell values as follows in the html table.
For example,
Test 1: Cell value of B2
Test 2: Cell value of B3
Test 3: Cell value of B4
Test 4: Cell value of B5
Test 5: Cell value of B6
Test 6: Cell value of B7
Test 7: Cell value of B8
Currently I was able to display the first cell value using my code given below:
<!DOCTYPE html>
<html>
<body>
<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; ">
<body onload='loadData()'>
<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; ">
<body onload='loadData2()'>
<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>
<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 4</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>
<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 5</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>
<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 6</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>
<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 7</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>
<script>
//google published sheet link 1
function 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);
}
</script>
<script>
//google published sheet link 2
function 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);
}
</script>
</body>
</html>
Can you please help?
Thanks in advance.
