asp.net js点击按钮自动加一行

asp.net js点击按钮自动加一行,第1张

基于你的代码,先说前端部分,想要id里面带有数字变量,需要你在js函数外面定义一个计数器,在函数里面递增(或者根据DOM元素动态计算)。

后端部分,可以遍历Request.Form键值(动态添加的这些行要包裹在一个form里面)以获取页面输入值。

代码类似于:

<script type="text/javascript">

var lineCount = 1

function add() {

var tt = "<div class=\"sss\">" +

"<input id='_changdi" + lineCount + "' runat='server' />" +

"<input id='_time" + lineCount + "' runat='server' />" +

"<input class='_jine' type='text' disabled='disabled' >" +

"<input type='button' class='b_del' onclick='del(this)' />" +

"</div>"

$("#content").append(tt)

lineCount++

}

</script>

--------------------------

取值类似于:

for(int i = 0i <Request.Form.AllKeys.Lengthi++)

{

if(Request.Form.AllKeys[i].StartsWith("_changdi"))

{

// xx = Request.Form[Request.Form.AllKeys[i]]

}

else if(Request.Form.AllKeys[i].StartsWith("_time"))

{

// yy = Request.Form[Request.Form.AllKeys[i]]

}

}

因为TABLE的初始状态只有一个 借据号 万元的表头,无论按钮怎么点,都只会触发一次Button_Add_Click,添加一行。以后每次点击,初始状态都只有表头,所以点击之后只会有一行。

所以要用一个东西把你的点击记录存储起来。你可以用VIEWSTATE来存这个TABLE变量,每次PAGE_LOAD的时候把它读出来,每次ONCLICK添加完行之后把TABLE存入VIEWSTATE,这样就OK了。不要随便用静态变量,它会产生一些很BUG的问题。

另外如果VIEWSTATE你觉得不好就用SESSION。总之,在每次POSTBACK后把TABLE存起来就OK了。

,保存数据时可以用ajax来做。以下代码可参考

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">

<title>增加Table行</title>

</head>

<script>

function addRow(obj)

{

//添加一行

var newTr = testTbl.insertRow()

//添加两列

var newTd0 = newTr.insertCell()

var newTd1 = newTr.insertCell()

//设置列内容和属性

newTd0.innerHTML = '<input type=checkbox id="box4">'

newTd1.innerText= '新加行'

}

</script>

<body>

<table id="testTbl" border=1>

<tr id="tr1">

<td ><input type=checkbox id="box1"></td>

<td id="b">第一行</td>

</tr>

<tr id="tr2">

<td ><input type=checkbox id="box2"></td>

<td id="b">第二行</td>

</tr>

<tr id="tr3">

<td ><input type=checkbox id="box3"></td>

<td>第三行</td>

</tr>

</table>

<br />

<input type="button" id="add" onclick="addRow()" value="Add Row" />

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11867573.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存