<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<p>Start row: <input id="startRow"> Start Column: <input id="startColumn"><br/></p>
<p>End row: <input id="endRow"> End Column: <input id="endColumn"><br/></p>
<button id="sendBtn">SHOW CONTENT</button><br/>
<pre></pre>
<p id="showData"></p>
<script type="text/javascript">
startRow = $('#startRow'),
startColumn = $('#startColumn'),
endRow = $('#endRow'),
endColumn = $('#endColumn'),
sendBtn = $('#sendBtn'),
show = $('#showData');
var parameter = {};
sendBtn.on('click',function() {
parameter = {
url: "https://docs.google.com/spreadsheets/d/1RG8tZMah4scRo1Imz_eelsMJk0vzC68dvGqSfTpMNGU/edit#gid=0",
name: "Sheet1",
startRow: startRow.val()*1,
startColumn: startColumn.val()*1,
endRow: endRow.val()*1,
endColumn: endColumn.val()*1,
};
$.get("https://script.google.com/macros/s/AKfycbyuK2uhTFUOnmQ6sPfIGwc31bO0TsKXzGi-WF67qWhLxeL7a1p3vxJg8GHeWw96Cf58/exec", parameter, function(data) {
if(!data){
show.text('No data!');
}else{
show.text('');
var tableBody = $('<table></table>').append($("<tbody>"));
$.each(JSON.parse(data),function(index,record){
row = $('<tr></tr>');
$.each(record,function(i,cellValue){
var rowData = $('<td></td>').text(cellValue);
row.append(rowData);
});
tableBody.append(row).css({'width':'700px','height':'80px'});
});
show.append(tableBody);
}
});
});
</script>
</body>
</html>