DOM练习

对表格进行添加一行、删除、变色操作：

<button id="add">添加一行</button>
<table id="tab" border="1" width="100%" height="50px" cellspadding="0" cellspacing="1">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>住址</td>
        <td>操作</td>
    </tr>
    <tr id="bs">
        <td>007</td>
        <td>薛之谦</td>
        <td>男</td>
        <td>33</td>
        <td>火星</td>
        <td>
        <button id="btr">删除</button>
        <button onClick="bianse(this)">变色</button>
        </td>
    </tr>
    <tr id="hf">
        <td>008</td>
        <td>大黄蜂</td>
        <td>男</td>
        <td>未知</td>
        <td>未知</td>
        <td>
            <button id="shc" onClick="shanchu(this)">删除</button>
        </td>
    </tr>
</table>

JS代码：

window.onload = function(){
    var addbtn=document.getElementById("add");
    var tab=document.getElementById("tab");
    addbtn.onclick=function(){
        var tr=document.createElement('tr');
        tab.appendChild(tr);
        for (var i = 0; i <=5; i++){
            var td=document.createElement('td');
            tr.appendChild(td);
            if(i<=4){
                 td.innerHTML="薛之谦";
            }else{
                var button=document.createElement("button");
                button.innerHTML="删除";
                td.appendChild(button);
                button.onclick=function(){
                        button.parentNode.parentNode.remove();
                    
                }
            }
        }
    }
     var shbtn=document.getElementById("shc");
     var tr=document.getElementById("hf");
    var tr=document.getElementById("bs");
}
function shanchu(obj){
    obj.parentNode.parentNode.remove();
    
}
function bianse(obj){
   obj.parentNode.parentNode.style.background="red";    
}

简易计算器：

<input type="text" id="shu">
<select name="#" id="post">
       <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
</select>
    <input type="text" id="shu1">
    <input id="jg" type="button" value="=" onClick="dj()">
    <input id="sum" type="text">

JS实现代码：

var zhi="";
function dj(){
    var a=document.getElementById("shu");
    var x=a.value;
    var b=document.getElementById("shu1");
    var y=b.value;
    var c=document.getElementById("post");
    var z=c.value;
    var d=document.getElementById("sum");
    
    if(z==="+"){
       var zhi=x+y;
       }else if(z==="-"){
        var zhi=x-y;
    }else if(z==="*"){
             var zhi=x*y;
             }else if(z==="/"){
                    var zhi=x/y;
             }
    d.value=zhi;
}