表格添加

效果图如下：

表格添加

html结构代码：

<style>
table{
    float:left;
    margin:0 30px;
}
</style>
<table align="center" border=1 width=500 class="show">
    <caption><h3>内容显示</h3></caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>
<table align="center" class="add">
    <caption><h3>内容添加</h3></caption>
    <tr>
        <td>姓名：</td>
        <td><input type="text" name="name"></td>
    </tr>
    <tr>
        <td>年龄：</td>
        <td><input type="number" name="age"></td>
    </tr>
    <tr>
        <td>性别：</td>
        <td>
            <input type="radio" value="男" name="gender">男
            <input type="radio" value="女" name="gender">女
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <input type="button" value="添加" class="addBtn">
        </td>
    </tr>
</table>

js逻辑代码：

// 获取所有标签
var addBtn = document.querySelector('.addBtn');
var tbody = document.querySelector('table.show>tbody');
var nameInput = document.querySelector('[name="name"]');
var ageInput = document.querySelector('[name="age"]');
var genderInput = document.querySelectorAll('[name="gender"]');
// 按钮点击事件 - 点击添加按钮的时候，获取到输入的框，组成tr和td放在tbody中
addBtn.addEventListener('click',click)
function click(){
    // 获取输入框的值
    var nameValue = nameInput.value;
    var ageValue = ageInput.value;
    var genderValue;
    // 验证输入框的值是否为空
    if(nameValue === ''){
        alert('姓名不能为空')
        return false;
    }
    if(ageValue === ''){
        alert('年龄不能为空')
        return false;
    }
    // 判断年龄必须是数字
    if(isNaN(ageValue)){
        alert("年龄必须是数字")
        return false;
    }
    // 遍历所有单选框，将选中的文本框的值赋值给genderValue
    for(var i=0;i<genderInput.length;i++){
        if(genderInput[i].checked){
            // 如果单选框的状态是选中的，就将他的值赋值给genderValue
            genderValue = genderInput[i].value;
        }
    }
    // 如果genderValue经过循环后没有被赋值，说明复选框没有一个被选中
    if(!genderValue){
        alert("性别未选")
        return false;
    }
    // 将输入的值组合成tr和td
    // 创建tr
    var tr = document.createElement('tr')
    // 创建一个td放姓名
    var td = document.createElement('td')
    td.innerText = nameValue;
    tr.appendChild(td)
    // 创建一个td放年龄
    var td = document.createElement('td')
    td.innerText = ageValue;
    tr.appendChild(td)
    // 创建一个td放性别
    var td = document.createElement('td')
    td.innerText = genderValue;
    tr.appendChild(td)
    // 将tr放在tbody中
    tbody.appendChild(tr)
    // 将所有输入框清空
    nameInput.value = '';
    ageInput.value = '';
    // 遍历所有单选框，将所有单选框的checked属性设置为false - 取消选中
    for(var i=0;i<genderInput.length;i++){
        genderInput[i].checked = false;
    }
}