如何收集动态添加的行(HTML 表)的值(数据)?使用 php 和 XAMPP
Posted
技术标签:
【中文标题】如何收集动态添加的行(HTML 表)的值(数据)?使用 php 和 XAMPP【英文标题】:How to collect values (data) of dynamically added rows (HTML table) ? Using php & XAMPP 【发布时间】:2013-02-27 15:36:10 【问题描述】:我创建了一个带有动态表格的简单表单。此表行由用户输入值递增,因此每次创建新行时我都需要递增组合框或选择(选项),因此它应该类似于默认组合框值。注意:这个选择或组合框是列属性的一部分,记住行增量,但没有列。
第二个问题:
我想收集这个表的列数据或值,不管它的行数是多少,并使用 php 将它存储到 XAMPP 数据库中。我知道如何从单个表单中收集数据,但我不知道如何从动态表单中收集数据。
代码如下:
function AddRows()
var tableelement = document.getElementById("mytable")
var rows = document.getElementById("noofrows").value;
var tablerowcount = tableelement.rows.length;
var currowcount = tablerowcount;
for(i = 1; i < rows; i++)
var row = tableelement.insertRow(currowcount);
var cellid = row.insertCell(0);
cellid.innerhtml = "<b>" + currowcount +"</b>";
var cellid2 = row.insertCell(1);
cellid2.innerHTML = "<input value='' id='" + currowcount +"_name' /> ";
var cellid3 = row.insertCell(1);
cellid3.innerHTML = "<input value='' id='" + currowcount +"_name' /> ";
var cellid4 = row.insertCell(1);
cellid4.innerHTML = "<input value='' id='" + currowcount +"_name' /> ";
var cellid5 = row.insertCell(1);
cellid5.innerHTML = "<input value='' id='" +currowcount +"_name' /> ";
var cellid6 = row.insertCell(1);
cellid6.innerHTML = "<input value='' id='" +currowcount+"_name' /> ";
var currowcountcurrowcount = currowcount++;
</script>
</head>
<body>
<form method="post" action="insert.php>
Carton Number :<input type="text" name="cn"> <br>
Business Unit :<input type="text" name="bu"> <br>
No of Files :<input type="noofrows" id="noofrows" value="1" name="nof" />
<input name="add" id="add" type="button" value="Add" onClick="AddRows()"/>
<table name="mytable" id="mytable" border=1>
<tr>
<td>
<b>SN</b>
</td>
<td>
<b>From</b>
</td>
<td>
<b>To</b>
</td>
<td>
<b>Range</b>
</td>
<td>
<b>Document Category</b>
</td>
<td>
<b>Document Type</b>
</td>
</tr>
<tr>
<td>
<b>1</b>
</td>
<td>
<input value="" id='1_name' >
</b>
</td>
<td>
<input value="" id='1_name'/>
</b>
</td>
<td>
<input value="" id='1_name' />
</b>
</td>
<td>
<Select id='select' />
<option name="option" value="finance">Finance Documents</option>
<option name="option" value="hr">HR Documents</option>
<option name="option" value="test">test</option
</Select>
</b>
</td>
<td>
<Select id='select' />
<option name="option" value="CP">Cash movement</option>
<option name="option" value="PV">Payment Voucher</option>
<option name="option" value="RV">RV</option
</Select>
</b>
</td>
</tr>
</table>
<br/>
【问题讨论】:
只是对您的 HTML 的评论:id
属性应该是唯一的。您有两个 select
元素,其中“选择”为 id
这不是最终代码,我只是在宣布我的想法 :)
【参考方案1】:
function AddRows()
var tableelement = document.getElementById("mytable")
var rows = document.getElementById("noofrows").value;
var tablerowcount = tableelement.rows.length;
var currowcount = tablerowcount;
for(i = 1; i < rows; i++)
var row = tableelement.insertRow(currowcount);
var cellid = row.insertCell(0);
cellid.innerHTML = "<b>" + currowcount +"</b>";
var cellid2 = row.insertCell(1);
cellid2.innerHTML = "<Select id='select' /><option name='option' value='CP'>Cash movement</option><option name='option' value='PV'>Payment Voucher</option> <option name='option' value='RV'>RV</option></Select> ";
var cellid3 = row.insertCell(1);
cellid3.innerHTML = "<Select id='select' /><option name='option' value='finance'>Finance Documents</option><option name='option' value='hr'>HR Documents</option><option name='option' value='test'>test</option</Select> ";
var cellid4 = row.insertCell(1);
cellid4.innerHTML = "<input value='' id='" + currowcount +"_name' /> ";
var cellid5 = row.insertCell(1);
cellid5.innerHTML = "<input value='' id='" +currowcount +"_name' /> ";
var cellid6 = row.insertCell(1);
cellid6.innerHTML = "<input value='' id='" +currowcount+"_name' /> ";
var currowcountcurrowcount = currowcount++;
</script>
改变你的函数以获得每一行的选择 并首先保存数据,您将所有输入和选择 id 更改为数组变量 ex id='1_name_Range[]' 表示范围。功能也有变化 重命名保存的代码你知道的。使用数组变量保存在数据库中
【讨论】:
以上是关于如何收集动态添加的行(HTML 表)的值(数据)?使用 php 和 XAMPP的主要内容,如果未能解决你的问题,请参考以下文章