jquery 动态table

最新推荐文章于 2022-03-31 16:56:35 发布

高成浩

最新推荐文章于 2022-03-31 16:56:35 发布

阅读量991

点赞数

分类专栏： javascript 文章标签： jquery class button function input border

本文链接：https://blog.csdn.net/gaochh01/article/details/7517643

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<style>
.buttonAdd{

}
</style>
</head>
<body>
<table id ="contentTable" border="1">
                                  <tr>
                                     <td>
                                        <textarea class="textarea" name="content" id="content" cols="50" rows="3"></textarea>
                                     </td>
                                     <td id="add" class="pubt">
                                        <input class="buttonAdd" type="button" value="+" id="add" />
                                       </td>
                                        <td >
                                       </td>
                                  </tr>
                                  <tr>
                                     <td>
                                        <textarea class="textarea" name="content" id="content" cols="50" rows="3"></textarea>
                                     </td>
                                     <td id="add" class="pubt">
                                        <input class="buttonAdd" type="button" value="+" id="add" />
                                       </td>
                                        <td id="drop" class="pubt">
                                        <input class="buttonAdd" type="button" value="-" id="drop" />
                                       </td>
                                  </tr>
                                </table>

</body>

</html>
<script type="text/javascript">

$(document).ready(function() {
    $(".buttonAdd").live("click",function(){
        var trSeq = $(this).parent().parent().parent().find("tr").index($(this).parent().parent()[0]);
        if(this.id == "add"){
             var newRow = '<tr><td><textarea class="textarea" name="content" id="content" cols="50" rows="3"></textarea></td><td id="add" class="pubt"><input class="buttonAdd" type="button" value="+" id="add" /></td><td id="drop" class="pubt"><input class="buttonAdd" type="button" value="-" id="drop" /></td></tr>';
             $(newRow).insertAfter($("#contentTable tr:eq("+trSeq+")"));
        }else if(this.id == "drop"){
            $("#contentTable tr:eq("+trSeq+")").remove();
        }
       });
    });

    $(":button").click(function(){
        $("#contentTable td").click(function(){
           var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]);
           if(this.id == "add"){
               var newRow = '<tr><td><textarea class="textarea" name="content" id="content" cols="50" rows="3"></textarea></td><td id="add" class="pubt"><input class="button" type="button" value="+" id="addButton" /></td><td id="drop" class="pubt"><input class="button" type="button" value="-" id="dropButton" /></td></tr>';
               $(newRow).insertAfter($("#contentTable tr:eq("+trSeq+")"));
           }else if(this.id == "drop"){
               $("#contentTable tr:eq("+trSeq+")").remove();
           }

            //var tdSeq = $(this).parent().find("td").index($(this)[0]);
            ///var trSeq = $(this).parent().parent().find("tr").index($(this).parent()[0]);

            //$("#contentTable tr:eq("+trSeq+")").remove();

            //$(row).insertAfter($("#table1 tr:eq("+rownum+")"));


            //alert("第" + (trSeq + 1) + "行，第" + (tdSeq + 1) + "列");
        });
   });

});

js动态生成的dom元素得用live进行事件委托，如
$(".t").live("click",function(){
    alert(this);
});
这样样式为t的元素就能触发click事件，不管是页面加载完前生成的还是之后js动态生成的。

高成浩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 动态table

.buttonAdd{}
复制链接

扫一扫

专栏目录