动态添加和删除表格行！

 

 这几天一直再做动态添加表格行，也查阅了许多资料，许多例子可以借鉴，但是还是觉得真正有用的是运用于项目中的。

以下是代码示例：

      //添加新行

    $(document).ready(function() {

       //隐藏模板tr

       //$(".tb tr").eq(0).hide();

       //添加序号

       //var tb_js=$('.tb').get(0);

       // var i = tb_js.rows.length;

      

       //复制一行

  $(".tb1 tr").append("<td width='6%'><input name=\"sd\" type=\"checkbox\"/></td>");

       $("#btnadd").bind('click', function() {

           var tr = $(".tb1 tr").eq(0).clone(true);

            // tb1即是我要复制的那一个表格行代码

           // tr.find("td").get(0).innerHTML = ++i;

           tr.show();

           tr.appendTo($(".tb"));

        //     tb则是原来的表格行

       });

      

    });

   

    //删除新行

    $(document).ready(function() {

       $("#btndelnew").bind("click", function(){

            alert($("input:checkbox:checked"));

            $("input:checkbox:checked").parent().parent().remove(); 

       });

    });

 

如下代码行：

<div class="" id="showbao">

                  <div>

                     <a class="conbut_divbut" type="button" id="btnadd">新增一行</a>

                    <a class="conbut_divbut" type="button" id="btndel"  οnclick="deleteall();">删除</a>

                     <a class="conbut_divbut" type="button" id="btndelnew">删除新行</a>

                  </div>

                  <br><br>

                  <s:if test="#request.list==null">

                      <table width="100%" class="tb" id="content">

                         <tr>

                            <input type="hidden" name="id" id="id" />

                            <td width="10%"><input type="text" name="minact" id="minact"

                                class="coninput911" parentname="month" />

                            </td>

                            <td width="10%"> < 用户数  < </td>

                            <td width="10%"><input type="text" name="maxact" id="maxact"

                                class="coninput911" parentname="month" />

                            </td>

                            <td width="10%">基本费用</td>

                            <td width="10%"><input type="text" name="basefees"

                                id="basefees" class="coninput911" parentname="month" />

                            </td>

                            <td width="7%">元/月</td>

                            <td width="10%"><input type="text" name="singlefees"

                                id="singlefees" class="coninput911" parentname="month" />

                            </td>

                            <td width="10%">元/月，终端</td>

                            <td width="10%"><input type="text" name="zhekou"

                                id="zhekou" class="coninput911" parentname="month" />

                            </td>

                            <td width="7%">%折扣  <input type="hidden" name="feesid"> </td>

                            <td width="6%"><input type="checkbox" id="sd"> </td>基础行，被追加的table

                         </tr>

                     </table>

                  </s:if>

                  <s:else>

                     <table class="tb">

                         <s:iterator id="list" value="#request.list">

                            <tr>

                                <td width="10%"><input type="text" name="minact"

                                   id="minact" value="<s:property value="#list.minact"/>"

                                 parentname="month"   class="coninput911" /></td>

                                <td width="10%"> < 用户数  < </td>

                                <td width="10%"><input type="text" name="maxact"

                                   id="maxact" value="<s:property value="#list.maxact"/>"

                                parentname="month"   class="coninput911" />

                                </td>

                                <td width="10%">基本费用</td>

                                <td width="10%"><input type="text" name="basefees"

                                   id="basefees" value="<s:property value="#list.basefees"/>"

                                parentname="month"   class="coninput911" />

                                </td>

                                <td width="7%">元/月，</td>

                                <td width="10%"><input type="text" name="singlefees"

                                   id="singlefees" value="<s:property value="#list.singlefees"/>"

                                parentname="month"   class="coninput911" />

                                </td>

                                <td width="10%">元/月，终端</td>

                                <td width="10%"><input type="text" name="zhekou"

                                   id="zhekou" value="<s:property value="#list.zhekou*100"/>"

                                parentname="month"   class="coninput911" /></td>

                                <td width="7%">%折扣</td>

                                 <td width="6%">

                                  <input type="hidden" name="id" value="<s:property value="#list.id"/>">

                                   <input type="checkbox" class="concheckbox1" name="delfee" value="<s:property value="#list.feesid"/>"/>

                                   <input type="hidden" id="comments" value="<s:property value="#list.comments"/>"/>

                                </td>

                            </tr>

                            <input type="hidden" name="feesid"

                                value="<s:property value="#list.feesid"/>">

                         </s:iterator>

                     </table>

                  </s:else>

              </div>

           </div>

           <div>

              <table width="100%">

                  <tr align="center">

                     <td colspan="5" width="50%" >

                        <a class="conbut_divbut" id="validate" οnclick="add()" href="#">保存</a>

                     </td>

                     <td colspan="6" width="50%">

                        <a class="conbut_divbut" οnclick="back()" href="#">取消返回</a>

                     </td>

                  </tr>

              </table>

           </div>

           <div style="display: none;">

                     <table class="tb1">

                         <tr>

                            <td width="10%"><input type="text" name="minact" id="minact"

                                class="coninput911" parentname="month" /></td>

                            <td width="10%"> < 用户数 < </td>

                            <td width="10%"><input type="text" name="maxact" id="maxact"

                                class="coninput911" parentname="month" /></td>

                            <td width="10%">基本费用:</td>

                            <td width="10%"><input type="text" name="basefees"

                                id="basefees" class="coninput911" parentname="month" /></td>

                            <td width="7%">元/月，</td>

                            <td width="10%"><input type="text" name="singlefees"

                                id="singlefees" class="coninput911" parentname="month" /></td>

                            <td width="10%">元/月，终端</td>

                            <td width="10%"><input type="text" name="zhekou"

                                id="zhekou" class="coninput911" parentname="month" /></td>

                            <td width="7%">%折扣</td>

                         </tr>

                     </table>

                  </div>

    </form>

    </div>

 

Jquery很能节省代码行数，而且可以很好，很轻松的表达出你想要的效果，所以关键点还要有对jquery的熟练和运用到项目中。