js实现dom操作表格的动态新增与删除

2020-06-07 网页编程网 网页编程网

<hr />
<form>
    <p>姓名：<input id="name" name="name" /></p>
    <p>年龄：<input id="age" name="age" /></p>
    <p>性别：男<input type="radio" id="male" name="sex" value="male" checked />，女<input type="radio" id="female" name="sex" value="female" />，</p>
    <p>电话：<input id="phone" name="phone" /></p>
    <p>电话：<input type="button" name="submit" value="提交" onclick="add()" />,<input type="reset" id="reset" value="重置"  /></p>
</form>
<script>
function $(id){return document.getElementById(id);}
function create(tagName){
    return document.createElement(tagName);
}
function add(){
    var name=$("name").value;
    var age=$("age").value;
    var sex=$("male").checked?$("male").value:$("female").value;
    var phone=$("phone").value;
    
    var tr=create('tr');
    var tdName=create('td');
    var tdAge=create('td')
    var tdSex=create('td');
    var tdPhone=create('td');
    var tdDelete=create('td');

var btnDelete=create('button');
    btnDelete.innerText='删除'
    btnDelete.onclick=function(){
        this.parentNode.parentNode.remove();
    }

tdName.innerText=name;
    tdAge.innerText=age;
    tdSex.innerText=sex;
    tdPhone.innerText=phone;
    tdDelete.appendChild(btnDelete);

tr.appendChild(tdName);
    tr.appendChild(tdAge);
    tr.appendChild(tdSex);
    tr.appendChild(tdPhone);
    tr.appendChild(tdDelete);

$('data').appendChild(tr);
    $('reset').click();
}
function del(btn){
    btn.parentNode.parentNode.remove();

}
function delFirst(btn){
    $('data').firstElementChild.remove();

}
function delLast(btn){
    $('data').lastElementChild.remove();
}
</script>
</body>

阅读原文

阅读 3099

123 显示电脑版