动态表格的增删改查

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'+list[i].num+''+list[i].age+''+list[i].sex+'  ');
        }   
    }
    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

你可能感兴趣的:(动态表格的增删改查)