jquery table操作在指定行后添加新行的例子

发布时间:2020-07-01编辑:脚本学堂
为大家介绍如何使用jquery table操作实现在指定行后添加新行的一个例子,有需要的朋友,可以参考下。

具体实现方法,大家参见代码及注释。
代码如下:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
 <HTML>  
 <HEAD>  
 <TITLE>jquery table操作在指定行后添加新行_www.jb200.com</TITLE>  
 <META NAME="Generator" CONTENT="EditPlus">  
 <META NAME="Author" CONTENT="">  
 <META NAME="Keywords" CONTENT="">  
 <META NAME="Description" CONTENT="">  
 <script src="style/lib/jquery.js"></script>  
 <script>   
    //注意input的id和tr的id要一样  
    function addRowByID(currentRowID){  
        //遍历每一行,找到指定id的行的位置i,然后在该行后添加新行  
        $.each( $('table:first tbody tr'), function(i, tr){  
            if($(this).attr('id')==currentRowID){  
                //获取当前行  
                var currentRow=$('table:first tbody tr:eq('+i+')');  
                //要添加的行的id  
                var addRowID=currentRowID+1;  
                str = "<tr id = '"+addRowID+"'><td>"+addRowID+"</td><td>row"+addRowID+"</td>"+  
                "<td><input id= '"+addRowID+"' type='button' value='添加行' onclick='addRowByID(this.id);' /></td></tr>";  
                //当前行之后插入一行  
                currentRow.after(str);  
            }  
        });  
    }  
 </script>  
 </HEAD>   
 <BODY>  
    <table border="1" bordercolor="green">  
        <thead>  
            <tr>  
                <th>id</th>  
                <th>value</th>  
                <th>button</th>  
            </tr>  
        </thead>  
        <tbody>  
            <!-- 这里是input的id和tr的id要一样 -->  
            <tr id='aaa'>  
                <td>0</td>  
                <td>row0</td>  
                <td><input id='aaa' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>  
            </tr>  
            <tr id='bbb'>  
                <td>1</td>  
                <td>row1</td>  
                <td><input id='bbb' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>  
            </tr>  
            <tr id='ccc'>  
                <td>2</td>  
                <td>row2</td>  
                <td><input id='ccc' type="button" value="添加行" onclick="addRowByID(this.id);" /></td>  
            </tr>  
        </tbody>  
    </table>  
 </BODY>  
 </HTML>

您可能感兴趣的文章:
jquery获取table中内容的代码分享
jquery操作table的实例代码
jQuery操作checkbox选择(list/table)的代码分享
jQuery入门-使用tablesorter插件(表格排序)