jquery实现增加删除行的方法

本文实例讲述了jquery实现增加删除行的方法。分享给大家供大家参考。具体分析如下：

最近做一个投票管理的模块，需要添加问题选项，为了方便，就简单地实现了表格行的添加、删除。

注：需引入jquery.js

先上效果图：(形式中默认有四行)

表单代码：复制代码代码如下： div class=' oz-form-fields ' style=' width :450 px；填充-top : 5px '表格单元格填充=' 0 '单元格间距=' 0 '样式=' width :450 px'id=' option container ' tr id=' option 0 ' TD class=' oz-form-TopLabel '所属问题c:if测试='${questionType=='radio'} '(单选)/c : if c : if test=' $ { question type==' checkbox ' } （复选)/c : if:/TD TD TD class=' oz-property ' $ { question }/TD TD/TD/tr tr tr id=' option 1 ' TD class=' oz-form-topLabel '选项1:/TD TD TD class=' oz-property '输入类型=' text ' style=' width :300 px '/TD TD TD/TD/tr tr id=' option 2 ' TD class=' oz-form-topLabel '选项2:/TD TD TD class=' oz-property '输入类型=' text ' style=' width :300 px '/TD TD TD/TD/tr id='选项3 ' TD class=' oz-form-TopBel '选项3:/TD TD TD class=' oz-property '输入类型=' text ' style=' width :300 px '/TD TD TD/TD/tr tr id=' option 4 ' TD class=' oz-form-topLabel '选项4:/td td class='oz-property '输入类型=' text ' style=' width :300 px '/TD TD/TD/tr/table div style=' text-align : center；' a href='#' onclick='addRow()'添加一行/a/div/

射流研究…代码：复制代码代码如下： var行数=4；//行数默认四行//添加行函数AddRow(){ row count；var NewRow=' tr id=' option ' RowCount ' ' TD class=' oz-form-TopLabel '选项行数':/tdtd class=' oz-property '输入类型=' text ' style=' width :300 px '/tdtdtdtda href=' # ' onclick=Delrow('行数')删除/a/TD/tr '；$('#optionContainer ').追加(NewRow)；} //删除行函数delrow(RowIndex){ $(" # option " RowIndex).移除();行数-；}

需要注意的是，表单的tr中需要定义身份证，如果默认有行的，就如代码所示有规律地定义好身份证，这样可以方便添加一行的时候定义新行身份证。

射流研究…中要定义一个行数变量，因为我的表单中默认了四行（第一行，即id='option0 '这行可以不用管),所以射流研究…中定义的行数默认为4.

好的，完事。就如此的简单。

另外，如果需要在指定位置增加行，需要这么写复制代码代码如下：美元(' #tab tr ').等式(-2)。在(“tr style=”border : none style=”width : 120 pxborder 3360 none align=“right”strong关键词名称：/strong/tdtd style=' width : 225 px；'' border:none '输入类型=' text ' name=' name ' id=' smsName ' style=' width : 135 px；/span class=' red ' */span/TD/tr ')；

-2就是在倒数第二个tr后面增加行选项卡。是表格的编号

希望本文所述对大家的jQuery程序设计有所帮助。