以动态方式访问文本输入 HTML table
Access text inputs in dynamic HTML table
我正在尝试按照 Dynamically Add/Delete HTML Table Rows Using Javascript 的指南进行操作。我已将代码移植到我的需要中，但我对如何从 table 中的嵌套 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 解析库来提供帮助。然后使用类似于您的 for each 循环访问每一行的项目。
include('simple_html_dom.php');
$html = str_get_html($string); // Parse the HTML, stored as a
//string in $string
$rows = $html->find('tr'); // Find all rows in the table
//Loop through each row
foreach ($rows as $row) {
//Loop through each child (cell) of the row
foreach ($row->children() as $cell) {
echo $cell->plaintext; // Display the contents of each
//cell - this is the value you want to extract
}
}
祝你好运！
您应该修改您的表单并为其指定一个名为 onSubmit 的属性。动态访问您的输入的唯一方法是提交它。否则页面无法知道提交的内容并且不会处理这些值。对该值的任何引用都将为 null，就像页面加载时一样。
<form method="post" action onsubmit=myFunction('document.getelementbyid('param1')>
<fieldset>
<label for="label 1">Label1</label>
<input type="text" name="someName" value="" id= "param1" />
</fieldset>
<input type ="submit" value="clickMe" name="submit"/>
</form>
因为我无法在 google 脚本中使用 PHP，所以我最终找到了另一个动态行代码示例 (source)，并且能够简单地完成一个 get 工作
<html>
<head>
<script>
function sendIt() {
get_row(1);
}
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var name = document.getElementById("name_row" + no);
var country = document.getElementById("country_row" + no);
var age = document.getElementById("age_row" + no);
var name_data = name.innerHTML;
var country_data = country.innerHTML;
var age_data = age.innerHTML;
name.innerHTML =
"<input type='text' id='name_text" +
no +
"' value='" +
name_data +
"'>";
country.innerHTML =
"<input type='text' id='country_text" +
no +
"' value='" +
country_data +
"'>";
age.innerHTML =
"<input type='text' id='age_text" +
no +
"' value='" +
age_data +
"'>";
}
function save_row(no) {
var name_val = document.getElementById("name_text" + no).value;
var country_val = document.getElementById("country_text" + no).value;
var age_val = document.getElementById("age_text" + no).value;
document.getElementById("name_row" + no).innerHTML = name_val;
document.getElementById("country_row" + no).innerHTML = country_val;
document.getElementById("age_row" + no).innerHTML = age_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_name = document.getElementById("new_name").value;
var new_country = document.getElementById("new_country").value;
var new_age = document.getElementById("new_age").value;
var table = document.getElementById("data_table");
var table_len = table.rows.length - 1;
var row = (table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'>" +
new_name +
"</td><td id='country_row" +
table_len +
"'>" +
new_country +
"</td><td id='age_row" +
table_len +
"'>" +
new_age +
"</td><td><input type='button' id='edit_button" +
table_len +
"' value='Edit' class='edit' onclick='edit_row(" +
table_len +
")'> <input type='button' id='save_button" +
table_len +
"' value='Save' class='save' onclick='save_row(" +
table_len +
")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" +
table_len +
")'></td></tr>");
document.getElementById("new_name").value = "";
document.getElementById("new_country").value = "";
document.getElementById("new_age").value = "";
}
function get_row(no) {
alert(document.getElementById("name_row" + no).innerHTML);
}
</script>
</head>
<body>
<div id="wrapper">
<table
align="center"
cellspacing="2"
cellpadding="5"
id="data_table"
border="1"
>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">Ankit</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input
type="button"
id="edit_button1"
value="Edit"
class="edit"
onclick="edit_row('1')"
/>
<input
type="button"
id="save_button1"
value="Save"
class="save"
onclick="save_row('1')"
/>
<input
type="button"
value="Delete"
class="delete"
onclick="delete_row('1')"
/>
</td>
</tr>
<tr id="row2">
<td id="name_row2">Shawn</td>
<td id="country_row2">Canada</td>
<td id="age_row2">26</td>
<td>
<input
type="button"
id="edit_button2"
value="Edit"
class="edit"
onclick="edit_row('2')"
/>
<input
type="button"
id="save_button2"
value="Save"
class="save"
onclick="save_row('2')"
/>
<input
type="button"
value="Delete"
class="delete"
onclick="delete_row('2')"
/>
</td>
</tr>
<tr id="row3">
<td id="name_row3">Rahul</td>
<td id="country_row3">India</td>
<td id="age_row3">19</td>
<td>
<input
type="button"
id="edit_button3"
value="Edit"
class="edit"
onclick="edit_row('3')"
/>
<input
type="button"
id="save_button3"
value="Save"
class="save"
onclick="save_row('3')"
/>
<input
type="button"
value="Delete"
class="delete"
onclick="delete_row('3')"
/>
</td>
</tr>
<tr>
<td><input type="text" id="new_name" /></td>
<td><input type="text" id="new_country" /></td>
<td><input type="text" id="new_age" /></td>
<td>
<input
type="button"
class="add"
onclick="add_row();"
value="Add Row"
/>
</td>
</tr>
</table>
<input type="submit" onclick="sendIt();" value="submit" />
</div>
</body>
</html>
我正在尝试按照 Dynamically Add/Delete HTML Table Rows Using Javascript 的指南进行操作。我已将代码移植到我的需要中，但我对如何从 table 中的嵌套 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 解析库来提供帮助。然后使用类似于您的 for each 循环访问每一行的项目。
include('simple_html_dom.php');
$html = str_get_html($string); // Parse the HTML, stored as a
//string in $string
$rows = $html->find('tr'); // Find all rows in the table
//Loop through each row
foreach ($rows as $row) {
//Loop through each child (cell) of the row
foreach ($row->children() as $cell) {
echo $cell->plaintext; // Display the contents of each
//cell - this is the value you want to extract
}
}
祝你好运！
您应该修改您的表单并为其指定一个名为 onSubmit 的属性。动态访问您的输入的唯一方法是提交它。否则页面无法知道提交的内容并且不会处理这些值。对该值的任何引用都将为 null，就像页面加载时一样。
<form method="post" action onsubmit=myFunction('document.getelementbyid('param1')>
<fieldset>
<label for="label 1">Label1</label>
<input type="text" name="someName" value="" id= "param1" />
</fieldset>
<input type ="submit" value="clickMe" name="submit"/>
</form>
因为我无法在 google 脚本中使用 PHP，所以我最终找到了另一个动态行代码示例 (source)，并且能够简单地完成一个 get 工作
<html>
<head>
<script>
function sendIt() {
get_row(1);
}
function edit_row(no) {
document.getElementById("edit_button" + no).style.display = "none";
document.getElementById("save_button" + no).style.display = "block";
var name = document.getElementById("name_row" + no);
var country = document.getElementById("country_row" + no);
var age = document.getElementById("age_row" + no);
var name_data = name.innerHTML;
var country_data = country.innerHTML;
var age_data = age.innerHTML;
name.innerHTML =
"<input type='text' id='name_text" +
no +
"' value='" +
name_data +
"'>";
country.innerHTML =
"<input type='text' id='country_text" +
no +
"' value='" +
country_data +
"'>";
age.innerHTML =
"<input type='text' id='age_text" +
no +
"' value='" +
age_data +
"'>";
}
function save_row(no) {
var name_val = document.getElementById("name_text" + no).value;
var country_val = document.getElementById("country_text" + no).value;
var age_val = document.getElementById("age_text" + no).value;
document.getElementById("name_row" + no).innerHTML = name_val;
document.getElementById("country_row" + no).innerHTML = country_val;
document.getElementById("age_row" + no).innerHTML = age_val;
document.getElementById("edit_button" + no).style.display = "block";
document.getElementById("save_button" + no).style.display = "none";
}
function delete_row(no) {
document.getElementById("row" + no + "").outerHTML = "";
}
function add_row() {
var new_name = document.getElementById("new_name").value;
var new_country = document.getElementById("new_country").value;
var new_age = document.getElementById("new_age").value;
var table = document.getElementById("data_table");
var table_len = table.rows.length - 1;
var row = (table.insertRow(table_len).outerHTML =
"<tr id='row" +
table_len +
"'><td id='name_row" +
table_len +
"'>" +
new_name +
"</td><td id='country_row" +
table_len +
"'>" +
new_country +
"</td><td id='age_row" +
table_len +
"'>" +
new_age +
"</td><td><input type='button' id='edit_button" +
table_len +
"' value='Edit' class='edit' onclick='edit_row(" +
table_len +
")'> <input type='button' id='save_button" +
table_len +
"' value='Save' class='save' onclick='save_row(" +
table_len +
")'> <input type='button' value='Delete' class='delete' onclick='delete_row(" +
table_len +
")'></td></tr>");
document.getElementById("new_name").value = "";
document.getElementById("new_country").value = "";
document.getElementById("new_age").value = "";
}
function get_row(no) {
alert(document.getElementById("name_row" + no).innerHTML);
}
</script>
</head>
<body>
<div id="wrapper">
<table
align="center"
cellspacing="2"
cellpadding="5"
id="data_table"
border="1"
>
<tr>
<th>Name</th>
<th>Country</th>
<th>Age</th>
</tr>
<tr id="row1">
<td id="name_row1">Ankit</td>
<td id="country_row1">India</td>
<td id="age_row1">20</td>
<td>
<input
type="button"
id="edit_button1"
value="Edit"
class="edit"
onclick="edit_row('1')"
/>
<input
type="button"
id="save_button1"
value="Save"
class="save"
onclick="save_row('1')"
/>
<input
type="button"
value="Delete"
class="delete"
onclick="delete_row('1')"
/>
</td>
</tr>
<tr id="row2">
<td id="name_row2">Shawn</td>
<td id="country_row2">Canada</td>
<td id="age_row2">26</td>
<td>
<input
type="button"
id="edit_button2"
value="Edit"
class="edit"
onclick="edit_row('2')"
/>
<input
type="button"
id="save_button2"
value="Save"
class="save"
onclick="save_row('2')"
/>
<input
type="button"
value="Delete"
class="delete"
onclick="delete_row('2')"
/>
</td>
</tr>
<tr id="row3">
<td id="name_row3">Rahul</td>
<td id="country_row3">India</td>
<td id="age_row3">19</td>
<td>
<input
type="button"
id="edit_button3"
value="Edit"
class="edit"
onclick="edit_row('3')"
/>
<input
type="button"
id="save_button3"
value="Save"
class="save"
onclick="save_row('3')"
/>
<input
type="button"
value="Delete"
class="delete"
onclick="delete_row('3')"
/>
</td>
</tr>
<tr>
<td><input type="text" id="new_name" /></td>
<td><input type="text" id="new_country" /></td>
<td><input type="text" id="new_age" /></td>
<td>
<input
type="button"
class="add"
onclick="add_row();"
value="Add Row"
/>
</td>
</tr>
</table>
<input type="submit" onclick="sendIt();" value="submit" />
</div>
</body>
</html>