javascript – How to display other cell values from google published csv sheet?

0
94
html - Animation after toggling doesn't apply the second style


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.



Source link

Leave a reply

Please enter your comment!
Please enter your name here