js中表格的生成与删除

首先生成一个表格的基本样式

    <label for="">用户名：</label>
    <input type="text" id='txt1'>
    <label for="">年龄：</label>
    <input type="text" id='txt2'>
    <button id="btn">添加</button>
    <table>
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">
        </tbody>
    </table>

其中包含表格的基本样式

图片示例

之后写出js中的内容

    1. 通过id名获取标签并生成id
    var txt1 = document.getElementById('txt1');
    var txt2 = document.getElementById('txt2');
    var btn = document.getElementById('btn');
    var tb = document.getElementById('tb');

2.给变量a赋值1，a是函数中需要的变量
var num = 1;
btn.onclick = function () {
3，在函数中进行判断
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 t = obj.parentNode.parentNode;
        confirm('是否删除');
        t.parentNode.removeChild(t);
    }