js,点击加号增加一行,点击减号删除一行

各位,怎实现这个功能,jsp的,请求支援,不白帮,如果看代码,可以找我

img

题主要的代码如下

<style>
    table.good{border-collapse:collapse}
    table.good td{border:solid 1px #ccc}
    input.button{border:solid 1px #333;border-radius:50%;padding:0;margin:0;width:auto;font-size:15px;width:20px;height:20px}
</style>
<table class="good">
    <tbody id="tbEM">
        <tr><td align="right">是否提醒</td><td><input type="checkbox" /></td></tr>
        <tr><td align="right">收件邮箱</td><td><input type="text" id="txtEM" /> <input type="button" value="+" class="button" onclick="add()" /></td></tr>
    </tbody>
</table>
<script>
    var tbEM = document.querySelector('#tbEM');
    var txtEM = document.querySelector('#txtEM');
    function add() {
        if (txtEM.value == '' || txtEM.value.indexOf('@') == -1) { alert('请输入邮箱地址并且包含@!'); txtEM.select(); return false }
        var tr = document.createElement('tr');
        tr.innerHTML = '<td></td><td><input type="text" value="' + txtEM.value + '" /> <input type="button" value="-" class="button" onclick="remove(this)" /></td>';
        tbEM.appendChild(tr);
        txtEM.value = '';
    }
    function remove(el) {
        if (confirm('确认删除?!')) {
            tbEM.removeChild(el.parentNode.parentNode);
        }
    }
</script>

img


有其他问题可以继续交流~

用document.createElement方法创建,参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> 动态创建控件 </title>
    <script type="text/javascript">
        function add(){

            //alert(document.getElementById("p1").innerHTML);
            //alert(document.getElementById("div1").innerHTML);
            //alert(document.getElementById("item").innerHTML);
            //获取td标签
            var item = document.getElementById("item");

            //innerHTML属性可以获取非表单标签的文本内容
            //创建3个标签控件,br,file,button
            var br = document.createElement("br");
            var input = document.createElement("input");
            var btnDel = document.createElement("input");
            var input2 = document.createElement("input");
            //设置控件的名称和类型
            input2.type="text";
            input2.name="username";
            input.type="file";
            input.name="file2";
            btnDel.type="button";
            btnDel.value="删除";
            //为按钮增加单击事件(click)
            btnDel.onclick=function(){
                alert(input2.value);
                item.removeChild(br);
                item.removeChild(input2);
                item.removeChild(input);
                item.removeChild(btnDel);
            }
            //追加到td标签内部
            item.appendChild(br);
            item.appendChild(input2);
            item.appendChild(input);
            item.appendChild(btnDel);
        }
    </script>
 </head>

 <body>
  <h1>动态创建控件</h1>
  <hr>
  <table border="1" width="800">
    <tr>
        <td>文件上传</td>
        <td id="item"><input type="file" name="file1"><input type="button" name="btnAdd" value="添加" onclick="add();"></td>
    </tr>
  </table>

  <p id="p1">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
  <div id="div1">我是div1标签内的文本内容</div>
 </body>
</html>


如果是jq的话,
新增就是先新建一个节点,然后插入就行了,移除就是获取到选中的那个节点然后把它移除就行了,大概是想就是这样,太久没写jq了,代码不一定对,但是思路就是这样了.

例如

// 新增节点
var $mail = $("<input class="email" />");

var $parent = $("ul");                             // 获取父节点

// 这里还要写好加号按钮的点击事件,那个按钮点击的时候就插入到父节点后面就行了
$parent.append($mail);                         // 插入到最后面

// 移除节点
$parent.onclick = function(ev){
 var ev = ev || window.event;
 var target = ev.target || ev.srcElement;
 if(target.nodeName.toLowerCase() == 'input'){
    target.remove()
 }
}
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632