I have a table within a form that looks like this:
The HTML and JavaScript
<form>
<table border="1" id="tblSample">
<tr>
<th>Col_one</th>
<th>Col_two</th>
<th>Col_three</th>
</tr>
<tr>
<td><input type="text" name="txtRowa1"
id="txtRowa1" size="5" /></td>
<td>
<input type="text" name="txtRowb1"
id="txtRowb1" size="15" /> </td>
<td>
<input type="text" name="txtRowc1"
id="txtRowc1" size="15" /> </td>
</tr>
<tr>
<td><input type="text" name="txtRowa2"
id="txtRowa2" size="5" /></td>
<td>
<input type="text" name="txtRowb2"
id="txtRowb2" size="15" /> </td>
<td>
<input type="text" name="txtRowc2"
id="txtRowc2" size="15" /> </td>
</tr>
<tr>
<td><input type="text" name="txtRowa3"
id="txtRowa3" size="5" /></td>
<td>
<input type="text" name="txtRowb3"
id="txtRowb3" size="15" /> </td>
<td>
<input type="text" name="txtRowc3"
id="txtRowc3" size="15" /> </td>
</tr>
</table>
</form>
<p>
<input onclick="formSubmit()" type="button" value="Send data" />
</p>
<script type="text/javascript">
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
}
</script>This table needs to be put on a spreadsheet, the gs file is:
//getValuesFromForm
function getValuesFromForm(form){
var tempa1 = form.txtRowa1,
tempb1 = form.txtRowb1,
tempc1 = form.txtRowc1,
tempa2 = form.txtRowa2,
tempb2 = form.txtRowb2,
tempc2 = form.txtRowc2,
tempa3 = form.txtRowa3,
tempb3 = form.txtRowb3,
tempc3 = form.txtRowc3,
sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.appendRow([tempa1, tempb1, tempc1]);
sheet.appendRow([tempb1, tempb2, tempc2]);
sheet.appendRow([tempc1, tempc2, tempc3]);
}
But the thing is: the table is dynamic and i dont know how many rows is going to have (in this case there are 3 rows) How do I get the values out of the table?
I would get the data out of the table, in the browser, from the client side using DOM methods and properties. This code processes your table before it is sent to the server side gs code. It’s dynamic, so it doesn’t matter what the table length or row length is. And you don’t need to name your inputs with names or ids in order to reference them. This code has two loops in it. One FOR loop nested inside the other. The code goes through each row in the table, and for each row, gets all the inputs in that row. Then it creates a two dimensional array to send to the gs code. You might ask, “why not do the processing in the gs code?” Processing the data in the client side allows you to use the method getElementsByTagName(). You can’t do that with server side code.
You could work with the FORM object in either the client side or server side JavaScript as an alternative, but there is a lot of data in the Form Object, and it’s difficult to figure out and understand how the data in that Form Object is structured.
The end result of this code is an array of cell values inside another array.
[ [Row1_Cell1, Row1_Cell2], [Row2_Cell1, Row2_Cell2], etc ]
You will also need a nested FOR loop in the gs code. The FOR loops will eliminate the need to hard code lots of variable names for each row and cell.
Client side JavaScript
<script type="text/javascript">
function formSubmit() {
console.log('formSubmit ran');
var allTableRows = document.getElementsByTagName("tr");
console.log('allTableRows: ' + allTableRows);
var numbrOfRows = allTableRows.length;
console.log('numbrOfRows: ' + numbrOfRows);
var thisCellValue = "";
var arryMaster = [];
var arryOfTableRowVals = [];
var thisRowData = "";
for (var i = 1; i < numbrOfRows; i++) {// START with i = 1
console.log('row count: ' + i);
thisRowData = allTableRows[i].getElementsByTagName('input');
console.log('thisRowData: ' + thisRowData);
console.log('thisRowData.length: ' + thisRowData.length);
arryOfTableRowVals = []; //reset the array
for (var j = 0; j < thisRowData.length; j++) {
console.log('---- count j: ' + j);
thisCellValue = thisRowData[j].value;
arryOfTableRowVals.push(thisCellValue);
console.log('---- arryOfTableRowVals: ' + arryOfTableRowVals[j]);
};
arryMaster.push(arryOfTableRowVals);
}
console.log(arryMaster[2][2]);
google.script.run.getValuesFromForm(arryMaster);
}
</script>
I put lots of console.log() statements in the code so that you can see the results of the code in your browsers console. The results will print to the console. You might want to comment those out, or delete them.