asp.net 点击按钮生成表格一行

liuxin_0725 2010-11-22 01:09:44
aspx页面上有一个表格
列如


然后我要 每次点一下添加按钮的时候 变成
http://hi.csdn.net/attachment/201011/22/5614328_12904024549ORa.jpg

反正就是每次点击都要生成一行。



应该这么做? 而且怎么获取它生成的文本框输入的值


求代码, 希望写全 希望有注释
...全文
286 13 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
liuxin_0725 2010-11-22
  • 打赏
  • 举报
回复
[Quote=引用 12 楼 mingl11 的回复:]
引用 9 楼 liuxin_0725 的回复:
引用 7 楼 mingl11 的回复:
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DT……
[/Quote]

我就是动态添加行, 添加了多少行, 我就要获取多少行的数据, 但我不知道怎么获取table一共生成了多少行啊, 你告诉我的只能限定死想要知道的一行数据而已。
mingl11 2010-11-22
  • 打赏
  • 举报
回复
[Quote=引用 9 楼 liuxin_0725 的回复:]
引用 7 楼 mingl11 的回复:
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/……
[/Quote]
后台通过 Request.Form["文本框名字"]获取控件值,不过要在添加input是为每个文本框添加不同的名字,我改了下js代码,刚才的对火狐兼容也有点问题,修改了下:后台使用Request.Form["centerStation1"] 数字1为添加的第几行了


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="fundraising.TestPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function addTr() {
var listTable = document.getElementById("list");
var listTbody = listTable.lastChild;
var trNum;
navigator.userAgent.toLowerCase().indexOf('firefox') > 0 ? trNum = listTbody.childNodes.length - 1 : trNum = listTbody.childNodes.length; //使火狐和IE生成相同的name
var listTr = document.createElement("tr");
var listTd1 = document.createElement("td");
var listTd2 = document.createElement("td");
var listTd3 = document.createElement("td");
listTd1.innerHTML = "<input name='centerStation" + trNum + "' type='text'/>";
listTd2.innerHTML = "<input name='getTime" + trNum + "' type='text'/>";
listTd3.innerHTML = "<input type='button' onclick='delTr(this)' value='删除' />";
listTr.appendChild(listTd1);
listTr.appendChild(listTd2);
listTr.appendChild(listTd3);
listTbody.appendChild(listTr);
}

function delTr(obj) {
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
</script>
<style type="text/css">
#list
{
border-collapse: collapse;
width: 500px;
}
#list tr th
{
background: #F0F5FB;
}
#list tr th, #list tr td
{
border: slid 1px #EDEDED;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="addTr()" value="添加" />
<table id="list">
<tr>
<th>
中途站名
</th>
<th>
到站时刻
</th>
<th>
操作
</th>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>

paul_its 2010-11-22
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 vanceinfo_zhao 的回复:]
使用JS最好,因为这样不会刷新。不刷新则前面输入的值依然存在。
<script type="text/javascript" language="javascript">
var rows=1;
function addRow(tableName) //传你的表名,就是你要给它增加行的表
{
var row=tableName.insertRow(tableName.rows.lengt……
[/Quote]

在后台获取值时,你要循环当前Table的行数。后台获取客户端控件的值我在vb中是这样写的。

For i As Integer = 1 To rowCount '循环当前Table的行数
If (Request.Form("name" & i)<>"") Then '判断他的值是否为空
Dim str as string= Request.Form("name" & i)
End If
Next
fellowcheng 2010-11-22
  • 打赏
  • 举报
回复
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="dynamicAdd.aspx.cs" Inherits="WebApp.dynamicAdd" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script type="text/javascript">
function addFile() {
var _table = document.createElement("table");
var _tbody = document.createElement("TBODY");
var _row;
var _cell;
var rlen = parseInt(document.getElementById("rowlen").value);
for (var i = 0; i < rlen; i++) {
_row = document.createElement("tr");
for (var j = 0; j < 3; j++) {
_cell = document.createElement("td");
var div = document.createElement("div");
var f = document.createElement("input");
f.setAttribute("type", "text")
f.setAttribute("name", "txtCardNo")
f.setAttribute("size", "20")
div.appendChild(f)
var d = document.createElement("input");
d.setAttribute("type", "button")
d.setAttribute("onclick", "deteFile(this)");
d.setAttribute("value", "移除")
div.appendChild(d)
_cell.appendChild(div);
_row.appendChild(_cell);
}
_tbody.appendChild(_row);
}
_table.appendChild(_tbody);
var con = document.getElementById("_container");
con.innerHTML = "";
con.appendChild(_table);
}

function deteFile(o) {
while (o.tagName != "DIV") o = o.parentNode;
o.parentNode.removeChild(o);
}

function getAllTd() {
document.getElementsByTagName("td")[0].style.backgroundImage = 'url(http://img.baidu.com/img/logo-zhidao.gif)';
}
</script>

</head>
<body>
<form id="form1" runat="server">
<select id="rowlen">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input value="add" type="button" onclick="addFile()" />
<div id="_container">
</div>
<input type="button" value="ok" onclick="getAllTd()" />
</form>
</body>
</html>

后台用
if (!string.IsNullOrEmpty(Request["txtCardNo"])) {
string[] strCardes = Request["txtCardNo"].Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries);
foreach (string strCard in strCardes) {
//to do
}
}
liuxin_0725 2010-11-22
  • 打赏
  • 举报
回复
[Quote=引用 7 楼 mingl11 的回复:]
HTML code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o……
[/Quote]


怎么获取文本框的值呀
paul_its 2010-11-22
  • 打赏
  • 举报
回复
使用JS最好,因为这样不会刷新。不刷新则前面输入的值依然存在。
<script type="text/javascript" language="javascript">
var rows=1;
function addRow(tableName) //传你的表名,就是你要给它增加行的表
{
var row=tableName.insertRow(tableName.rows.length);
rows++;
var col;
col=row.insertCell(0);
col.innerHTML=rows;
col=row.insertCell(1);
col.innerHTML="<input type='text' readonly class='box2' id='' name='name"+rows+"'/>";
col=row.insertCell(2);
col.innerHTML="<img style='' src='' alt=''/></a>";

}
</script>
mingl11 2010-11-22
  • 打赏
  • 举报
回复

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="fundraising.Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function addTr() {
var listTable = document.getElementById("list");
var listTbody = listTable.childNodes[0];
var listTr = document.createElement("tr");
var listTd1 = document.createElement("td");
var listTd2 = document.createElement("td");
var listTd3 = document.createElement("td");
listTd1.innerHTML = "<input name='centerStation' type='text'/>";
listTd2.innerHTML = "<input name='getTime' type='text'/>";
listTd3.innerHTML = "<input type='button' onclick='delTr(this)' value='删除' />";
listTr.appendChild(listTd1);
listTr.appendChild(listTd2);
listTr.appendChild(listTd3);
listTbody.appendChild(listTr);
}

function delTr(obj) {
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
</script>
<style type="text/css">
#list{ border-collapse:collapse; width:500px;}
#list tr th{ background:#F0F5FB}
#list tr th,#list tr td{ border:slid 1px #EDEDED;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="list">
<tr><th>中途站名</th><th>到站时刻</th><th>操作</th></tr>
</table>
</div>
</form>
</body>
</html>

带删除方法的
师太请留步 2010-11-22
  • 打赏
  • 举报
回复
你用repeater就行了,点击后自动刷新一下就会多一条,这个功能我刚刚做过,就是用这种方法实现的
liuxin_0725 2010-11-22
  • 打赏
  • 举报
回复
还有个啊, 点删除按钮的时候 删除那行
巧巧 2010-11-22
  • 打赏
  • 举报
回复
en 2楼的很详细啊
ycproc 2010-11-22
  • 打赏
  • 举报
回复
楼上 很详细了
hch126163 2010-11-22
  • 打赏
  • 举报
回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style>
*{ margin:0; padding:0; font-size:13px;}
body {background:#fff;font-size:13px;font-family:宋体,Verdana;color:#666;height:100%; width:100%}
select{width:120px;}
</style>
</head>
<script type="text/javascript">
var index = 1;
function addContorl()
{
var divContorl = document.createElement("div");
divContorl.style.cssText = "width:770px;height:25px; margin:5px; ";
divContorl.id="divContorl_"+index;
divContorl.innerHTML = "<input type='text' value='"+index+"' onkeyup='setLength(this)'> <input type='text' value='"+index+"'><input type='text' value='"+index+"'><input type='button' value='删除' onclick='removeContorl("+index+")'>";
document.getElementById("div_contorls").appendChild(divContorl);
index++;
}
function removeContorl(contorlIndex)
{
var divContorl = document.getElementById("divContorl_"+contorlIndex);
document.getElementById("div_contorls").removeChild(divContorl);
}
function setLength(objText){
alert(objText.value.length);
}
function getPoint(e,obj){
e=e||event;
var x=getOffsetX(e);
if(obj.offsetWidth/2 > x ){
alert(-1);// 左
}else{
alert(1); // 右
}
}

function getOffsetX(evt){
if( evt.offsetX ) return evt.offsetX;

var ele = evt.target || evt.srcElement;
var o = ele;

var x=0;
while( o.offsetParent )
{
x += o.offsetLeft;
o=o.offsetParent;
}
// 处理当元素处于滚动之后的情况
var left = 0;
while( ele.parentNode )
{
left += ele.scrollLeft;
ele=ele.parentNode;
}

return evt.pageX + left - x;
}





</script>


<body>



<textarea id="txtProDesc" cols="45" rows="5" runat="server" class="validate[required,length[1,500]"] onkeyup="document.getElementById('spanLength').innerHTML=this.value.length"></textarea>

<br />限<span class="spanred">500</span>个中文字符,您已输入<span class="spanred" id="spanLength">25</span>个字符。
<input type=text onkeypress="getKeyCodes(event)" />
<div style="width:980px; height:auto; margin:10px auto;border:1px solid blue;">
<div style="width:800px; height:auto;border:1px solid #eee; margin-left:100px; ">
<div style="width:750px;height:20px; margin:10px;"> <a href="javascript:addContorl();">添加</a></div>
<div id="div_contorls" style="width:780px;height:auto; margin:10px;border:1px solid red;">


</div>
<div style="width:780px;height:auto; margin:10px;border:1px solid green; line-height:22px;" onclick='getPoint(event,this);'>

<div id="div_LanguageList" style="width:760px;margin:10px;height:auto; " >
<div style="width:760px; height:25px;margin:5px;" >
语言名称:<select ><option value='语言1' selected=selected>语言1</option><option value='语言2'>语言2</option><option value='语言3'>语言3</option></select>    语言能力:<select ><option value='能力1' selected=selected>能力1</option><option value='能力2'>能力2</option><option value='能力3'>能力3</option></select>
</div>
</div>
<div style="width:760px;height:25px;margin:5px; ">
<a href="javascript:void(0);" onclick="addLang()">添加新语言</a>    <a href="javascript:void(0);" onclick="submitLangs()">提交</a>
</div>

</div>
</div>
<a href="javascript:void(0);" onclick="openChat('http://www.baidu.com')">链接baidu</a>
<p></p>
<div class="kk" id="divKK" >
<div class="m" onclick="show()">x</div>
<ul class="z" id="sL" style="background-color:Blue;">
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
<li>yyyyyyy</li>
</ul>
</div>


</body>
<script type="text/javascript">
var langNameHtml = "<option value='1' selected=selected>语言1</option><option value='2'>语言2</option><option value='3'>语言3</option>";
var langLevelHtml = "<option value='能力1' selected=selected>能力1</option><option value='能力2'>能力2</option><option value='能力3'>能力3</option>";
var div_LanguageList;
function addLang()
{
var divContorl = document.createElement("div");
divContorl.style.cssText = "width:760px; height:25px;margin:5px;";
divContorl.innerHTML = "语言名称:<select>"+langNameHtml+"</select>    语言能力:<select >"+langLevelHtml+"</select>    <a href='javascript:void(0);' onclick='deleteLang(this)'>删除</a>";
div_LanguageList.appendChild(divContorl);
}
function deleteLang(obj)
{
obj.parentNode.parentNode. removeChild(obj.parentNode);
}
function submitLangs()
{
var slcList = div_LanguageList.getElementsByTagName("select");
var pram=[];
for(var i=0;i<slcList.length;i+=2)
{
pram.push('langName:'+slcList[i].value +'\tlangLevel:'+slcList[i+1].value );
}
alert("值:"+pram.join("\n"));
}
( function(){
div_LanguageList = document.getElementById("div_LanguageList");
})();





</script>







</html>



liuxin_0725 2010-11-22
  • 打赏
  • 举报
回复
点击添加变成这样

62,244

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧