js 动态行(增/删)示例
来源:互联网 发布:淘宝"钓鱼 编辑:程序博客网 时间:2024/05/21 04:22
框架:Jquery MVC模式
实现方案:
1、js文件:
2、前端jsp引用:
3、后台获取
通过js传入后台:示例:
// 数据量大,不适合。速度慢。 用层的处理相对好些。
实现方案:
1、js文件:
//添加行
function sys_addTr(tableId){
var trInfo=$("#"+tableId+" tbody tr:last").html();
trInfo=trInfo.replace(/{.*?}/g,"_");//清空没有数据的单元格
$("#"+tableId+" tbody tr:last").after("<tr>"+
trInfo+
"</tr>");
$("#"+tableId+" tbody tr:last input").each(function(){
if($(this).val()!=='删除') $(this).val('');
});
}
//删除行,删除元素所在的表格行,用于可增删行的表格
function sys_delTr1(elem){
var tr = elem.parentNode.parentNode;
var table = tr.parentNode;
var index = tr.rowIndex;
if($(table).find("tr").size()==2){
alert("至少保留一条记录");
}else{
table.deleteRow(tr.rowIndex);
}
//alert(tr.innerHTML);
}
2、前端jsp引用:
<table class="c_form_table" align="center" width="99%" border="1"
cellspacing="0">
<tr>
<td align="left" class="c_form_text">
图纸名称
</td>
<td align="left" class="c_form_text">
图号
</td>
<td align="left" class="c_form_text">
图纸页数
</td>
<td align="left" class="c_form_text">
<input type="button" value="增加图纸" onclick="sys_addTr('table_edit')" />
</td>
</tr>
</table>
<table id="table_edit" class="c_form_table" align="center" width="99%" border="1"
cellspacing="0">
<tr style="display:none">
<td align="center">
<input type="text" id="tzmc" name='tzmc' maxlength="20" name="tzmc" />
</td>
<td align="center">
<input type="text" id="th" name='th' maxlength="20" name="th" />
</td>
<td align="center">
<input type="text" id="tzys" name='tzys' maxlength="20" name="tzys" />
</td>
<td align="center">
<input type="button" value="删除" onclick="sys_delTr1(this)" />
</td>
</tr>
</table> 3、后台获取
通过js传入后台:示例:
//保存
$("#btn_save").click(function(){
$("#table_edit tr:gt(1)").remove();
var queryString=$("#form_show").serialize();
//调用保存控制器里的保存方法
if (!Validate.CheckForm($("#form_show")[0])) {return;}//数据校验
var queryString=$("#form_show").serialize();//序列化,(Jquery自动处理值 最后值以11~22 显示)。
sys_ajaxPostDirect("/tzjsdjb/default.do?method=save",queryString,function(json){
ajaxAlert(json.msg);
query($("#form_query"));
sys_showButton("btn_add,btn_del,btn_zf_show,btn_xf_show");
});
$(".panel-tool-close").click();//该方法为调用div层自动生成的关闭按钮。
}); //获取的值,示例:~11~22。 例子处理:
int count=String.valueOf(map.get("tzmc")).split("~").length;
int count=String.valueOf(map.get("tzmc")).split("~").length;
if(count>0){
for(int i=1;i<count;i++){
StringBuffer insertSql = new StringBuffer();
StringBuffer valSql = new StringBuffer();
String tzmc=String.valueOf(map.get("tzmc")).split("~")[i];
String th=String.valueOf(map.get("th")).split("~")[i];
String tzys=String.valueOf(map.get("tzys")).split("~")[i];
insertSql.append("insert into t_jsgl_tzffdjb (zzid,bmid,gwid,yhid,guid,ssjz,sssz,sssgdw,wjmc,wh,whfjid,tzmc,th,thfjid,tzys,ffrq,ffr,fwfs,jsdw,qsr,bz");
valSql.append(" values(:zzid,:bmid,:gwid,:yhid,:guid,:ssjz,:sssz,:sssgdw,:wjmc,:wh,:whfjid,:tzmc1,:th1,:thfjid,:tzys1,:ffrq,:ffr,:fwfs,:jsdw,:qsr,:bz");
insertSql.append(")");
valSql.append(")");
insertSql.append(valSql);
map.put("tzmc1", tzmc);
map.put("th1", th);
map.put("tzys1", tzys);
this.getNpjtN().update(insertSql.toString(),map);
jjd.setResult(true, "保存成功");
log.info("第"+count+"保存成功");
}
} // 数据量大,不适合。速度慢。 用层的处理相对好些。
- js 动态行(增/删)示例
- 动态为事件添加js代码示例
- 动态为事件添加js代码示例
- js动态改变下拉菜单内容示例
- js动态创建dom元素示例
- JS动态调用方法名示例
- js动态添加事件并可传参数示例代码
- js动态绑定与解绑事件示例
- jquery及js动态添加删除option示例
- 动态改变下拉菜单内容示例 js 二位数组示例
- asp.net利用json填充下拉框及js动态添加表格行、删除表格行的示例
- js动态添加行
- JS动态增删行
- JS动态添加行
- 【js】动态添加行
- js动态创建行
- JS动态添加行
- JS动态增加行
- div应用示例 --简单内容填充
- 黑马程序员:Java基础总结----接口 Collection<E>&iterator
- Libcurl与MASM32汇编
- 尝鲜Jekyll
- UUID与GUID
- js 动态行(增/删)示例
- 黑马程序员:Java基础总结----子接口 List<E>及其实现类
- Codeforces Round 190 div.2 322C 321A Ciel and Robot
- 【rmzt推荐:精美桌面主题 】
- 黑马程序员:Java基础总结----子接口 set<E>及其实现类
- 何时会发生db file sequential read等待事件?
- org.apache.ibatis.reflection.ReflectionException: There is no getter for property named 'xxx' in
- window.opener无效与《java web 开发实战经典》
- Python strip lstrip rstrip使用方