[JavaScript知识库]js jQuery实现动态增加和删除 愿望清单 全部代码（百度网盘自取）

<script>
        $(function () {
            //点击j_btnAddData，显示mask和form表单;
            $("#j_btnAddData").click(function () {
                $('.mask,.form-add').slideDown();
            });
            //点击j_hideFormAdd，隐藏mask和form表单;
            $("#j_hideFormAdd").click(function () {
                $('.mask,.form-add').slideUp();
            });
            //点击j_btnAdd，添加一个tr到tbody中;
            $("#j_btnAdd").click(function () {
                //获取两个input里面的值
                var val1 = $("#j_txtLesson").val();
                var val2 = $("#j_txtBelSch").val();
                //如果两个值为空字符串或者空格，不能添加
                if (val1.length == 0 || val2.length == 0) {
                    alert('请输入愿望');
                    return;
                }
                var tr = $("<tr></tr>");
                var str = "<td>" + val1 + "</td><td>" + val2 + "</td><td><a href='javascrip: ; ' class='get'>GET</a></td>";
                tr.html(str)
                console.log(tr.html(str));
                // 把 tr 添加到tbody中
                $("#j_tb").append(tr);
                $("#j_txtLesson").val('');
                $("#j_txtBelSch").val('找到好工作');
                //隐藏页面
                $('.mask,.form-add').slideUp();
            });
            //点击a.get，删除他所在的tr;
            $("#j_tb").on("click", ".get", function () {
                $(this).parents("tr").remove();
            })
        })

    </script>

链接：https://pan.baidu.com/s/1d67mmV7A7WmlvjlskW2zsg 提取码：dco2

关注博主即可阅读全文