服务器端获取客户端动态添加的表格行数据的一个简单示例
有朋友问道:如何获取客户端js添加的表格行数据?
这里提供一种方案:
aspx文件:
<form id="form1" runat="server">
<div>
<table width="100%" border="0" cellpadding="2" cellspacing="1" id="SignFrame" >
<tr id="trHeader" align="center">
<td width="60" height="25px;" align="center" bgcolor="#1C5E55" style="color: #FFFFFF">
序号
</td>
<td bgcolor="#1C5E55" align="center" style="color: #FFFFFF">
</td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加行" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<br />
<span class="notetext">注:最多只能3行</span>
</div>
<asp:Button ID="btnInsert" Text="确认添加" runat="server" OnClick="btnInsert_Click" />
</form>
<div>
<table width="100%" border="0" cellpadding="2" cellspacing="1" id="SignFrame" >
<tr id="trHeader" align="center">
<td width="60" height="25px;" align="center" bgcolor="#1C5E55" style="color: #FFFFFF">
序号
</td>
<td bgcolor="#1C5E55" align="center" style="color: #FFFFFF">
</td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加行" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
<br />
<span class="notetext">注:最多只能3行</span>
</div>
<asp:Button ID="btnInsert" Text="确认添加" runat="server" OnClick="btnInsert_Click" />
</form>
js脚本:
<script type="text/javascript" language="javascript">
<!--
var TempCount = 1; //不可删除!downmoon 2010701
// Example: obj = findObj("image1");
function findObj(theObj, theDoc) {
var p, i, foundObj;
if (!theDoc) theDoc = document;
if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document;
theObj = theObj.substring(0, p);
}
if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i = 0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj, theDoc.layers[i].document);
if (!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function AddSignRow() {
if (TempCount > 3) return;
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame", document);
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
var newNameTD = newTR.insertCell(0);
newNameTD.innerHTML = newTR.rowIndex.toString();
var newNameTD = newTR.insertCell(1);
newNameTD.innerHTML = "<input name='MyFile" + rowID + "' id='MyFile" + rowID + "' type='text' />";
txtTRLastIndex.value = (rowID + 1).toString();
TempCount = TempCount + 1;
}
function DeleteSignRow(rowid) {
var signFrame = findObj("SignFrame", document);
var signItem = findObj(rowid, document);
var rowIndex = signItem.rowIndex;
signFrame.deleteRow(rowIndex);
for (i = rowIndex; i < signFrame.rows.length; i++) {
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}
function ClearAllSign() {
if (confirm('确定要清空所有输入框吗?')) {
var signFrame = findObj("SignFrame", document);
var rowscount = signFrame.rows.length;
for (i = rowscount - 1; i > 0; i--) {
signFrame.deleteRow(i);
}
var txtTRLastIndex = findObj("txtTRLastIndex", document);
txtTRLastIndex.value = "1";
TempCount = 1;
AddSignRow();
}
}
//-->
</script>
<!--
var TempCount = 1; //不可删除!downmoon 2010701
// Example: obj = findObj("image1");
function findObj(theObj, theDoc) {
var p, i, foundObj;
if (!theDoc) theDoc = document;
if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
theDoc = parent.frames[theObj.substring(p + 1)].document;
theObj = theObj.substring(0, p);
}
if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i = 0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj, theDoc.layers[i].document);
if (!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function AddSignRow() {
if (TempCount > 3) return;
var txtTRLastIndex = findObj("txtTRLastIndex", document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame", document);
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
var newNameTD = newTR.insertCell(0);
newNameTD.innerHTML = newTR.rowIndex.toString();
var newNameTD = newTR.insertCell(1);
newNameTD.innerHTML = "<input name='MyFile" + rowID + "' id='MyFile" + rowID + "' type='text' />";
txtTRLastIndex.value = (rowID + 1).toString();
TempCount = TempCount + 1;
}
function DeleteSignRow(rowid) {
var signFrame = findObj("SignFrame", document);
var signItem = findObj(rowid, document);
var rowIndex = signItem.rowIndex;
signFrame.deleteRow(rowIndex);
for (i = rowIndex; i < signFrame.rows.length; i++) {
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}
function ClearAllSign() {
if (confirm('确定要清空所有输入框吗?')) {
var signFrame = findObj("SignFrame", document);
var rowscount = signFrame.rows.length;
for (i = rowscount - 1; i > 0; i--) {
signFrame.deleteRow(i);
}
var txtTRLastIndex = findObj("txtTRLastIndex", document);
txtTRLastIndex.value = "1";
TempCount = 1;
AddSignRow();
}
}
//-->
</script>
后台代码:
protected void btnInsert_Click(object sender, EventArgs e)
{
int index = int.Parse(Request.Form["txtTRLastIndex"]) - 1;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
if (index > 0)
{
for (int i = 1; i <= index; i++)
{
sb.Append(string.Format("SignFrame表格行第{0}行的{1}的值为:{2}<br/>", i, "MyFile" + i, Request.Form["MyFile" + i.ToString()]));
}
}
Response.Write(sb.ToString());
}
{
int index = int.Parse(Request.Form["txtTRLastIndex"]) - 1;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
if (index > 0)
{
for (int i = 1; i <= index; i++)
{
sb.Append(string.Format("SignFrame表格行第{0}行的{1}的值为:{2}<br/>", i, "MyFile" + i, Request.Form["MyFile" + i.ToString()]));
}
}
Response.Write(sb.ToString());
}
演示效果:
如果要想实现像google,163,QQ类似的上传文件效果,可以看这里:
http://www.cnblogs.com/downmoon/archive/2008/07/23/1249410.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
2009-07-01 在webForm中WebRequest\WebClient\WebBrowser获取远程页面源码的三种方式(downmoon)