动态表格的增删改查

html部分

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态表格的增删改查</title>
<link rel="stylesheet" type="text/css" href="newlife.css">
</head>

<body>
<div id="continer">
    <input type="text" id="keyword"></input>
    <input type="button"  value="搜索" id="sousuo"></input>
    <table id="table1">
        <thead>
            <tr>
                <th>编号</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
        </thead>

        <tbody id="body1"></tbody>
    
    </table>


    <div id="newadd">
        <p class="p-2">年龄：<input type="text" placeholder="请输入年龄" id="age1"></p>
        <p class="p-3">性别：<input type="text" placeholder="请输入性别" id="sex1"></p>

        <p>
            <input type="button" value="确认" id="queren">
        </p>
    </div>
</div>
<script  src="rumen.js" type="text/javascript"></script>
</body>
</html>

css部分

tr,th{
    border: 1px black solid;
    height: 20px;
    width: 120px;
}
tr,td{
    border: 1px black solid;
    height: 20px;
    width: 120px;
}
#table1{
    border-collapse: collapse;
    margin-top: 30px;
}
#continer{
    margin-left: 420px;
    margin-top: 150px;
}

js部分

var array=[]

array.push({
    num:1,
    age:'1',
    sex:'女',
    isDelete:false
})

function render(list){
    var arr=[]
    for(var i = 0, len=list.length; i<len; i++){
        if(!list[i].isDelete){  //如果没有被删除
            arr.push('<tr><td>'+list[i].num+'</td><td>'+list[i].age+'</td><td>'+list[i].sex+'</td><td>&nbsp<input class="delete"  id="delete_'+list[i].num+'" type="button" value="删除">&nbsp<input class="update"  id="update_'+list[i].num+'" type="button" value="修改"></td></tr>');
        }   
    }
    document.querySelector("#body1").innerHTML = arr.join('');

} 

render(array)


var i = 2

queren.onclick = function add(){
    var num = i
    var age = document.querySelector('#age1').value;
    var sex = document.querySelector('#sex1').value;
    array.push({
        num:num,
        age:age,
        sex:sex
    })
    i++;
    render(array)
}

sousuo.onclick=function search(){
    var temp = []
    var keyword = document.querySelector('#keyword').value;
    for(var i = 0;i<array.length;i++){
        if (array[i].age.indexOf(keyword) != -1){
            temp.push(array[i])
        }
    }


    render(temp)
}

document.querySelector('#body1').onclick = function(e){
    
    var target = e.target
    
    if(target.getAttribute('class') == 'delete'){
        var sourceId = target.getAttribute('id')
        var id = sourceId.split('_')[1]

        for(var i = 0; i<array.length; i++){
            if(array[i].num == id){ 
                array[i].isDelete = true;
            }
        }

        render(array)
    }
    if (target.getAttribute('class') == 'update'){
    
        var sourceId = target.getAttribute('id')
        var id = sourceId.split('_')[1]

        for(var i = 0; i<array.length; i++){
            if(array[i].num == id){
                var sum = prompt("请输入修改后的内容","18-女")
                array[i].num = sum.split('-')[0]
                array[i].age = sum.split('-')[1]
                array[i].sex = sum.split('-')[2]
            }
        }
        if(sum != null && sum !=''){
            render(array)
        }
        else
            alert("输入格式错误！")
    }
}

动态表格的增删改查

html部分

css部分

js部分

推荐阅读更多精彩内容