【发布时间】：2021-11-03 03:42:58
【问题描述】：
我正在尝试遵循Dynamically Add/Delete HTML Table Rows Using Javascript 的指南。我已将代码移植到我的需要，但我对如何从表中的嵌套 html 中获取我的数据感到困惑。理想情况下，我想将其作为数组导出到 Google Script。
我的测试涉及为表单填写一行，然后提交（运行函数 sendIT），但是当我尝试检查（带有警报）每个单独的单元格值时，我得到了这个：
<input type="text" name="tag[]" value=""> //i.e. no value?!
我期待在那里找到输入的值并开始为每一列构建数组。
如何访问输入值？
非常感谢。
HTML 代码 + Google 脚本
<script type="text/javascript">
function addRows(){
var table = document.getElementById('emptbl');
var rowCount = table.rows.length;
var cellCount = table.rows[0].cells.length;
var row = table.insertRow(rowCount);
for(var i =0; i <= cellCount; i++){
var cell = 'cell'+i;
cell = row.insertCell(i);
var copycel = document.getElementById('col'+i).innerHTML;
cell.innerHTML=copycel;
}
}
function deleteRows(){
var table = document.getElementById('emptbl');
var rowCount = table.rows.length;
if(rowCount > '2'){
var row = table.deleteRow(rowCount-1);
rowCount--;
}
else{
alert('There should be atleast one row');
}
}
function sendIt(){
var oTable = document.getElementById('emptbl');
//gets rows of table
var rowLength = oTable.rows.length;
//loops through rows
for (i = 0; i < rowLength; i++){
//gets cells of current row
var oCells = oTable.rows.item(i).cells;
//gets amount of cells of current row
var cellLength = oCells.length;
//loops through each cell in current row
for(var j = 0; j < cellLength; j++){
// get your cell info here
var cellVal = oCells.item(j).innerHTML;
alert(cellVal);
alert(cellVal.value)
}
}
//alert("hello from sendit");
google.script.run.appendRowFromTableSubmit(document.getElementById('emptbl'));
alert("hello2");
}
</script>
</head>
<body>
<form action="#" method="post">
<table id="emptbl">
<tr>
<th>Tag</th>
<th>Size</th>
<th>Notes</th>
<th>Species</th>
<th>Gender</th>
</tr>
<tr>
<td id="col0"><input type="text" name="tag[]" value="" /></td>
<td id="col1"><input type="text" name="size[]" value="" /></td>
<td id="col2"><input type="text" name="notes[]" value="" /></td>
<td id="col3">
<select name="species[]" id="species">
<option value="0">Select Species</option>
<option value="1">Lobster</option>
<option value="2">Brown</option>
<option value="3">Velvet</option>
</select>
</td>
<td id="col4"> <input type="text" name="gender[]" value="" /></td>
</tr>
</table>
<table>
<tr>
<td><input type="button" value="Add Row" onclick="addRows()" /></td>
<td><input type="button" value="Delete Row" onclick="deleteRows()" /></td>
<td><input type="submit" value="Submit1" onclick="sendIt()" /></td>
</tr>
</table>
</form>
</body>
<div >
<input type="button" value="Submit" onclick="submitForm();">
</form>
</div>
</div>
<div id="thanks" style="display: none;">
<p>Thank you for sumbitting! The specimen data has now been populated, please fill in the specifics.</p>
</div>
</body>
【问题讨论】：
标签： html forms google-apps-script html-table