jquery实现增加删除行的方法

编程学习 2021-07-04 21:47www.dzhlxh.cn编程入门
这篇文章主要介绍了jquery实现增加删除行的方法,涉及表格中行的增加与删除技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

注:需引入jquery.js

先上效果图:(form中默认有4行)

表单代码:

代码如下:
<div class="oz-form-fields"  style="width:450px;padding-top: 5px"> 
    <table cellpadding="0" cellspacing="0" style="width:450px;" id="optionContainer"> 
        <tr id="option0">  
            <td class="oz-form-topLabel">所属问题 
                <c:if test="${questionType=='radio'}">(单选)</c:if> 
                <c:if test="${questionType=='checkbox'}">(复选)</c:if>: 
            </td> 
            <td class="oz-property" > 
                ${question} 
            </td> 
            <td></td> 
        </tr> 
        <tr id="option1">  
            <td class="oz-form-topLabel">选项1:</td> 
            <td class="oz-property" > 
                <input type="text"  style="width:300px"> 
            </td> 
            <td></td> 
        </tr> 
        <tr id="option2">  
            <td class="oz-form-topLabel">选项2:</td> 
            <td class="oz-property" > 
                <input type="text"  style="width:300px" > 
            </td> 
            <td></td> 
        </tr> 
        <tr id="option3">  
            <td class="oz-form-topLabel">选项3:</td> 
            <td class="oz-property" > 
                <input type="text"  style="width:300px"> 
            </td> 
            <td></td> 
        </tr> 
        <tr id="option4">  
            <td class="oz-form-topLabel">选项4:</td> 
            <td class="oz-property" > 
                <input type="text"  style="width:300px"> 
            </td> 
            <td></td> 
        </tr> 
    </table> 
    <div style="text-align: center;"> 
        <a href="#" onclick="addRow()">添加一行</a> 
    </div> 
</div>

JS代码:

代码如下:
var rowCount=4;  //行数默认4行 
  
//添加行 
function addRow(){ 
    rowCount++; 
    var newRow='<tr id="option'+rowCount+'"><td class="oz-form-topLabel">选项'+rowCount+':</td><td class="oz-property" ><input type="text"  style="width:300px"></td><td><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>'; 
    $('#optionContainer').append(newRow); 

 
//删除行 
function delRow(rowIndex){ 
    $("#option"+rowIndex).remove(); 
    rowCount--; 
}

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

JS中要定义一个行数变量,因为我的表单中默认了4行(第一行,即id='option0'这行可以不用管),所以JS中定义的rowCount默认为4.

OK,完事。就如此的简单。

另外,如果需要在指定位置增加行,需要这么写

代码如下:
$("#tab tr").eq(-2).after("<tr style='border:none;'><td style='width: 120px;border:none;' align='right'><strong>关键词名称:</strong></td><td style='width: 225px;border:none;'><input type='text' name='name' id='smsName' style='width: 135px;'/> <span class='red'> *</span></td></tr>");

-2就是在倒数第二个tr后面增加行。
tab是表格的id

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

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板