js 动态行(增/删)示例

框架：Jquery MVC模式

实现方案：
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="增加图纸" οnclick="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="删除" οnclick="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;

       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+"保存成功");

       }

       } 

// 数据量大，不适合。速度慢。 用层的处理相对好些。