点击一行自动增加一行多列
0
最佳答案
0
没明白楼主的意思也？是否需要实现点击input[type=text]控件中为空值时，才自动增加一行，还是每次点击当前最后一个输入框，才会自动增加一行呢？然后你输入数据需要回写到数据库或者用其他方式保存数据？？
如果是纯粹的前端实现这个功能不难，代码也很好写。利用jQuery给个DEMO，自己将代码粘贴后跑一下看看是否满足你的要求，纯粹在前端实现你的要求。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRansitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dTD">
<html>
<head>
<title>demo</title>
<link href="css/typography.css" type="text/css" rel="stylesheet">
<link href="css/report20090923.css" type="text/css" rel="stylesheet">
<style>
.clickBorder {
border:1px solid #818;
}
.blurBorder {
border:1px solid #7F9DB9;
}
</style>
</head>
<body>
<form id="Form1" method="post" runat="server">
<table id="QueryDataTable" cellspacing="1" summary="百克网新闻列表" style="width:600px;">
<caption>
DEMO</caption>
<thead>
<tr>
<th width="20%">
名 称</th>
<th width="20%">
单 价</th>
<th width="20%">
数 量</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
<input type="text" name="txtGoodsName" value="测试1" />
</td>
<td>
<input type="text" name="txtPrice" value="32.00" />
</td>
<td>
<input type="text" name="txtQuantity" value="2" />
</td>
</tr>
<tr class="even">
<td>
<input type="text" name="txtGoodsName" value="测试2" />
</td>
<td>
<input type="text" name="txtPrice" value="45.00" />
</td>
<td>
<input type="text" name="txtQuantity" value="8" />
</td>
</tr>
<tr class="odd">
<td>
<input type="text" name="txtGoodsName" value="测试3" />
</td>
<td>
<input type="text" name="txtPrice" value="12.00" />
</td>
<td>
<input type="text" name="txtQuantity" value="" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript" language="javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var className = "even",
html,
obj;
$("#QueryDataTable tbody tr:last td:last input").live("click", function() {
this.className = "clickBorder";
className = ($(this).closest("tr").get(0).className == "odd") ? "even" : "odd";
html = [];
html.push("<tr class='")
html.push(className)
html.push("'>");
html.push("<td><input type='text' name='txtGoodsName' value='' /></td>");
html.push("<td><input type='text' name='txtPrice' value='' /></td>");
html.push("<td><input type='text' name='txtQuantity' value='' /></td>");
html.push("</tr>");
if ( /^\d+$/.test(this.value) ) {
$(this).closest("tr").after(html.join(''));
} else {
window.alert("请您在输入框中填写相应的数量后，再点击该输入框!");
}
$(this).blur( function() {
this.className = "blurBorder";
});
});
});
</script>
</form>
</body>
</html>
其中用到 jQuery 1.3中新增的方法。给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。这种委派的能力非常强大，使得jQuery提供强悍的生产能力，呵呵。所以楼主在拷贝我的DEMO的时候，务必下载1.3.X版本的jQuery，同时友善提醒注意我的JS引用的路径，是与HTML在同一层的javascript目录中。
给出我上述DEMO的详细地址：http://media.pec365.com/rainnoless/demo.html
收获园豆：20
要是把我a后面写的判断一下的话就更完美了
我已经按照你的要求修改了代码，你在看一遍DEMO吧，是否满足你的要求。你完全可以尝试在我的代码基础上自行修改啊。
其他回答(1)
0
要是用服务器端控件Literal就很好实现，不就在literal.text中添加一个表格的tr嘛,添加前进行一下逻辑验证。
