将动态 HTML 表格传递给电子表格 [英] Pass dynamic HTML table to spreadsheet
问题描述
我有一个动态 HTML 表格,我想通过 GS 代码将其值传递给 Google 电子表格.
<table style="width: auto" id="myTable" class="table order-list"><!-- ### INICIO DO CODIGO DA TABELA TD = 表格数据/TR = 表格行/TH = 表格标题### --><!-- CABEÇALHO --><tr><th>参考</th><th>产品</th><th>类别</th><th>玛卡</th><th>Tipo de Venda</th><th>$礼仪</th><th>$ Real</th><th>Quantidade</th></tr><!-- 林哈斯--><tr><td><input type="text" name="refProd" size="10"/></td><td><input type="text" name="nomeProd" size="30"/></td><td><input type="text" list="categorias" name="catProd" size="15"/></td><td><input type="text" list="marcas" name="fabProd" size="10"/></td><td><input type="text" list="carater" name="tipoVenda" size="15"/></td><td><input type="number" name="vendaEtiqueta"/></td><td><input type="number" name="vendaReal"/></td><td><input type="number" name="qtd"/></td></tr>
我已经关注了这个答案:
通过HTML 表格到 Google 电子表格.从动态表中获取单元格值
并到达了我在 HTML 文件中生成数组的部分,但我不知道如何将 HTML 值以一种可以将这些值添加到电子表格的方式传递给 GS 代码.有人能帮助我吗?我是这个编程世界的初学者.
提前致谢.
关于您在下面的最后一个问题:
这是一种方法.我倾向于在服务器端做这种事情,然后将它作为一个对象传递给 html 文件.这是我以前项目的一些代码.它并非旨在完全满足您的需求,但您可以将其用作起点.
谷歌脚本:
function htmlSpreadsheet(ssO){var br='<br/>';var s='';var hdrRows=1;var ss=SpreadsheetApp.openById(ssO.id);var sht=ss.getSheetByName(ssO.name);var rng=sht.getDataRange();var rngA=rng.getValues();s+='<表>';for(var i=0;i<rngA.length;i++){s+='';for(var j=0;j'+ '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i+ ',' + j + ');"/>'+ '</th>';}别的{s+=''+ '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i+ ',' + j + ');"/>'+ '</th>';}}s+='</tr>';}s+='</table>';s+='</body></html>';var namehl=Utilities.formatString('<h1>%s</h1>', ss.getName());var shnamehl=Utilities.formatString('<h2>%s</h2>', sht.getName());var opO={hl:s,name:namehl,shname:shnamehl};返回 opO;}这是调用它的 Javascript:
$(function() {//需要适当的 JQuery 资源,或者你可以使用 windows.onloadgoogle.script.run.withSuccessHandler(updateSelect).getAllSpreadSheets();});
这是更新电子表格的 Javascript:
函数 updateSS(i,j){var str='#txt' + String(i) + String(j);var 值=$(str).val();var ssId=$('#sel1').val();var name=$('#sel2').val();var updObj={rowIndex:i,colIndex:j,value:value,id:ssId,name:name};$(str).css('背景色','#ffff00');google.script.run.withSuccessHandler(updateSheet).updateSpreadsheet(updObj);}
这是更新电子表格的 Google 脚本:
函数updateSpreadsheet(updObj){var i=updObj.rowIndex;var j=updObj.colIndex;var value=updObj.value;var ss=SpreadsheetApp.openById(updObj.id);var sht=ss.getSheetByName(updObj.name);var rng=sht.getDataRange();var rngA=rng.getValues();rngA[i][j]=值;rng.setValues(rngA);var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] 已更新', 'ridx': i, 'cidx': j};返回数据;}
I have a dynamic HTML table which I want to pass its values to a Google Spreadsheet through GS code.
<div class="container">
<table style="width: auto" id="myTable" class=" table order-list">
<!-- ### INICIO DO CODIGO DA TABELA TD = TABLE DATA / TR = TABLE ROW / TH = TABLE HEADING### -->
<!-- CABEÇALHO -->
<tr>
<th>Ref.</th>
<th>Produto</th>
<th>Categoria</th>
<th>Marca</th>
<th>Tipo de Venda</th>
<th>$ Etiqueta</th>
<th>$ Real</th>
<th>Quantidade</th>
</tr>
<!-- LINHAS -->
<tr>
<td><input type="text" name="refProd" size="10" /></td>
<td><input type="text" name="nomeProd" size="30" /></td>
<td><input type="text" list="categorias" name="catProd" size="15" /></td>
<td><input type="text" list="marcas" name="fabProd" size="10" /></td>
<td><input type="text" list="carater" name="tipoVenda" size="15" /></td>
<td><input type="number" name="vendaEtiqueta" /></td>
<td><input type="number" name="vendaReal"/></td>
<td><input type="number" name="qtd" /></td>
</tr>
</table>
</div>
I've already followed this answer:
Pass HTML Table to Google Spreadsheet. Get Cell Values out of a Dynamic Table
And reached the part where I generate the array in the HTML file, but I don't know how to pass the HTML values to the GS code in a way where I can add those values to the spreadsheet. Can someone help me please? I'm a beginner in this programming world.
Thanks in advance.
解决方案 In regard to your last question below:
This is one way to go. I tend to do this sort of thing server side and then pass it as an object to the html file. This is some code from a previous project of mine. It's not intended to be an exact match for your needs but you can use it as a starting point.
Google Script:
function htmlSpreadsheet(ssO)
{
var br='<br />';
var s='';
var hdrRows=1;
var ss=SpreadsheetApp.openById(ssO.id);
var sht=ss.getSheetByName(ssO.name);
var rng=sht.getDataRange();
var rngA=rng.getValues();
s+='<table>';
for(var i=0;i<rngA.length;i++)
{
s+='<tr>';
for(var j=0;j<rngA[i].length;j++)
{
if(i<hdrRows)
{
s+='<th id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
else
{
s+='<td id="cell' + i + j + '">' + '<input id="txt' + i + j + '" type="text" value="' + rngA[i][j] + '" size="20" onChange="updateSS(' + i + ',' + j + ');" />' + '</th>';
}
}
s+='</tr>';
}
s+='</table>';
s+='</body></html>';
var namehl=Utilities.formatString('<h1>%s</h1>', ss.getName());
var shnamehl=Utilities.formatString('<h2>%s</h2>', sht.getName());
var opO={hl:s,name:namehl,shname:shnamehl};
return opO;
}
This is the Javascript that calls it:
$(function() {//requires appropriate JQuery resource or you could us windows.onload
google.script.run
.withSuccessHandler(updateSelect)
.getAllSpreadSheets();
});
This is the Javascript that updates the spreadsheet:
function updateSS(i,j)
{
var str='#txt' + String(i) + String(j);
var value=$(str).val();
var ssId=$('#sel1').val();
var name=$('#sel2').val();
var updObj={rowIndex:i,colIndex:j,value:value,id:ssId,name:name};
$(str).css('background-color','#ffff00');
google.script.run
.withSuccessHandler(updateSheet)
.updateSpreadsheet(updObj);
}
and this is the Google Script that updates the spreadsheet:
function updateSpreadsheet(updObj)
{
var i=updObj.rowIndex;
var j=updObj.colIndex;
var value=updObj.value;
var ss=SpreadsheetApp.openById(updObj.id);
var sht=ss.getSheetByName(updObj.name);
var rng=sht.getDataRange();
var rngA=rng.getValues();
rngA[i][j]=value;
rng.setValues(rngA);
var data = {'message':'Cell[' + Number(i + 1) + '][' + Number(j + 1) + '] Has been updated', 'ridx': i, 'cidx': j};
return data;
}
这篇关于将动态 HTML 表格传递给电子表格的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆