为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 使用jquery实现表格的动态添加和删除

使用jquery实现表格的动态添加和删除

2018.08.30 23:22 2343浏览

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>

    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-1.1.3.pack.js"></script>
    </head>

    <body>
        <table id="tableBody" name="tableBody" border='1'>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr id="trBody" name="trBody">
                <td id="1">1</td>
                <td id="2">2</td>
                <td id="3">3</td>
            </tr>
        </table>
        <input type="button" onClick="addTr();" value="add" />
    </body>
   
    <script type="text/javascript">
        function addTr(){

//使用克隆的方法动态创建表格
            var trClone = $("#trBody").clone(true);
            trClone.find("#1").text("1");
            trClone.find("#2").text("2");
            trClone.find("#3").text("3");
            trClone.find("#3").bind("click",function(){deleteTr(this)});
            trClone.attr("id","trnum");
            trClone.appendTo("#tableBody");
        }
       
        function deleteTr(elemt){

//获取要删除行的对象后调用删除方法remove()
            $(elemt).parent().remove();
        }
    </script>
 </html>
 

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
38
获赞与收藏
130

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消