写一个表格并且可以删改

最新推荐文章于 2020-10-11 21:29:10 发布

原创最新推荐文章于 2020-10-11 21:29:10 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文介绍如何使用JavaScript动态生成和删除HTML表格中的行和单元格，包括输入验证和按钮事件处理，适用于网页数据管理应用。

首先在body中设置表格样式

用户名：年龄：添加

编号	姓名	年龄	操作

之后再写入js代码

//通过id名获取标签
var txt1 = document.getElementById(‘txt1’);
var txt2 = document.getElementById(‘txt2’);
var btn = document.getElementById(‘btn’);
var tb = document.getElementById(‘tb’);
//生成id
var num = 1;
btn.onclick = function () {
//进行判断
if (txt1.value == ‘’ || txt2.value == ‘’) {
alert(‘输入框不能为空’);
return;
} else {
create(num);
num++;

        }
        //清空输入框
        txt1.value = '';
        txt2.value = '';
    }

    //生成信息
    function create(num) {
        //在tbody标签中插入tr标签
        var tr = document.createElement('tr');
        tb.appendChild(tr);
        //在tr标签中插入td标签
        var td1 = document.createElement('td');
        tr.appendChild(td1).innerHTML = num;
        var td2 = document.createElement('td');
        tr.appendChild(td2).innerHTML = txt1.value;
        var td3 = document.createElement('td');
        tr.appendChild(td3).innerHTML = txt2.value;
        var td4 = document.createElement('td');
        //把删除得点击事件写入到行内样式中，并阻止默认行为
        tr.appendChild(td4).innerHTML = "<a href='javascript:void(0)' onclick='del(this)'>删除</a>";
    }

    //删除信息
    function del(obj) {
        var d = obj.parentNode.parentNode;
        confirm('是否删除');
        d.parentNode.removeChild(d);
    }