表格添加与删除

最新推荐文章于 2024-09-12 15:10:57 发布

HAI6545

最新推荐文章于 2024-09-12 15:10:57 发布

阅读量229

点赞数 1

分类专栏： JavaScript案例文章标签： elementui webview javascript

本文链接：https://blog.csdn.net/HAI6545/article/details/122415100

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏


 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
body>table{
    float:left;
    margin-right:200px;
}
b{
  font-size: 20px;
  
}
table>a{
    font-size: 16px;
}
.none{
    display: none;
}
.active{
    display: block;
}
</style>
<body>
<!-- 展示内容的表格 -->
<table border=1 width=300>
    <caption><p> <b>内容展示 </b> 
      <a href="javascript:;">添加</a></p>

    </caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
    <tr>
    <td>张三</td>
    <td>15</td>
    <td>男</td>
    <td>删除</td>
    </tr>
    </tbody>
</table>
 
<!-- 添加内容的表单 -->
<form class="none">
    <table>
        <caption><h3>内容添加</h3></caption>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>年龄：</td>
            <td><input type="text" name="age"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
               <input type="text" name="sex">
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="添加"></td>
        </tr>
    </table>
</form>
</body>
<script>
// 当点击添加按钮的时候 - 将输入的内容获取到 - 创建tr - 放在tbody中
var btn = document.querySelector('[type="button"]');
// 获取姓名文本框
var nameInput = document.querySelector('[name="name"]');
// 获取年龄文本框
var ageInput = document.querySelector('[name="age"]');
// 获取性别单选框
var sexInput = document.querySelector('[name="sex"]');
// 获取tbody
var tbody = document.querySelector('body>table>tbody');
var a = document.querySelector('a');
var form = document.querySelector('form');
var table = document.querySelector('table');

 a.addEventListener(`click`,() => {
    //   table.style.display="none"
        table.className = 'none'
       form.className = 'active'
    })

btn.addEventListener('click', formSubmit)
function formSubmit(){
    // 表单校验
    // 保证用户名不能为空
    if(nameInput.value === ''){
        alert('姓名不能为空')
        return
    }
    // 保证年龄不能为空
    if(ageInput.value === ''){
        alert('年龄不能为空')
        return
    }
    // 保证年龄是一个数字
    if(isNaN(ageInput.value)){
        alert('年龄必须是数字')
        return
    }
    if(sexInput.value === ''){
        alert('性别不能为空')
        return
    }
    if(sexInput.value != '男' && sexInput.value != '女'){
         alert('性别输入错误')
        return
    }
    // 获取数据
    var arr  = [nameInput.value, ageInput.value, sexInput.value, '删除']
    // 根据数据创建tr和td
    var tr = document.createElement('tr')
    // 遍历数组 - 创建td
    arr.forEach(function(v){
        var td = document.createElement('td')
        td.innerText = v
      
        tr.appendChild(td)
    })
    // 将tr放在tbody中
    tbody.appendChild(tr)
    // 清空表单
    nameInput.value = ''
    ageInput.value = ''
    sexInput.value = ''
    table.className = ''
    form.className = 'none'
}
document.querySelector('table').onclick = function(){
    // 获取精准的目标元素
    var target = window.event.target
    // 判断是否是删除的td
    if(target.innerText === '删除'){
        target.parentElement.parentElement.removeChild(target.parentElement)
    }
}

</script>
</html>

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表格添加与删除

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>body>table{ float:left; margin-right:200px;}b{ font-size: 20px; }table>...
复制链接

扫一扫