表格内容的增删（原创）

Html

Css

table {
	text-align:center;
}
thead td {
	width:100px;
	height:30px;
	background:#ccc;
}
tbody td {
	height:25px;
}
input {
	width:70px;
	height:20px;
}
.button {
	width:70px;
	height:30px;
	margin:10px 0 10px 0;
}

//注册点击事件，添加
    zy$("btn2").onclick = function() {
        //创建一行
        var trObj = document.createElement("tr");
        //追加到tbody中
        zy$("tbd").appendChild(trObj);
        //创建列
        //一列
        var td1 = document.createElement("td");
        trObj.appendChild(td1);
        var input1 = document.createElement("input");
        td1.appendChild(input1);
        //二列
        var td2 = document.createElement("td");
        trObj.appendChild(td2);
        var input2 = document.createElement("input");
        td2.appendChild(input2);
        //三列
        var td3 = document.createElement("td");
        trObj.appendChild(td3);
        var input3 = document.createElement("input");
        td3.appendChild(input3);
        //四列
        var td4 = document.createElement("td");
        trObj.appendChild(td4);
        //a标签确定标签
        var aObj = document.createElement("a");
        td4.appendChild(aObj);
        aObj.href = "javascript:void(0)";
        aObj.innerText = "确定";
        //注册点击事件，确定
        aObj.onclick = function() {
            td1.innerText = input1.value;
            td2.innerText = input2.value;
            td3.innerText = input3.value;
            //点击确定之后，第四列会发生变化
            //删除现有第四列
            this.parentNode.parentNode.removeChild(this.parentNode);
            //创建新的第四列
            var td4 = document.createElement("td");
            trObj.appendChild(td4);
            //第四列中的内容
            var aObj = document.createElement("a");
            td4.appendChild(aObj);
            aObj.innerText = "删除";
            aObj.href = "javascript:void(0)";
            //删除
            aObj.onclick = function() {
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
            };
        };
        //a标签，取消标签
        var aObj2 = document.createElement("a");
        td4.appendChild(aObj2);
        aObj2.href = "javascript:void(0)";
        aObj2.innerText = "取消";
        //注册点击事件，取消
        aObj2.onclick = function() {
            this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
        };

};

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

表格内容的增删（原创）

代码描述：对表格内容进行增加删除

4

最新

发表评论全部评论

暂时没有评论！

Felix0

2018/5/14 15:23:50

求助

yuebanzhou0

2018/5/14 15:27:40

参照我发布的另一个例子，全选和全不选，做出复选框的基本效果。点击删除按钮的时候，做一个检测，如果全选按钮是选中状态，直接清空表格内容。

回复

Felix0

2018/5/14 15:19:40

可以做一些批量删除的

yuebanzhou0

2018/5/14 15:23:32

是的，加上复选框，可以实现。谢谢指教。

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

yuebanzhou

相关代码

表格内容的增删（原创）

最新