2015.7.15js-13(DOM表格应用)

 

1.表格的简写：tHead,tBodies,tFoot,rows,cells

//普通方法：查找表格中的某一个信息，如找到ID为2的name
var oTab = document.getElementById("tab");
alert(oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[1].getElementsByTagName("td")[1].innerHTML);

//简写方法：查找表格中的某一个信息，如找到ID为2的name
var oTab = document.getElementById("tab");
alert(oTab.tBodies[0].rows[1].cell[1].innerHTML);

2.隔行变色,获取进要加tBodies

for(var i = 0, len = oTab.tBodies[0].rows.length; i < len; i++){
    var triggerColor = oTab.tBodies[0].rows[i];
    if(i%2){
       triggerColor.style.background = "red";
    }else{
       triggerColor.style.background = "#ddd"
    }
}

3.隔行变色,鼠标移入显示高亮，(有一重点，要保存之前的颜色)要将以前的background保存起来

for(var i = 0, len = oTab.tBodies[0].rows.length; i < len; i++){
    var triggerColor = oTab.tBodies[0].rows[i];
    var oldColor = "";　　　　　　　　　　　　　　//用来保存旧的颜色
    if(i%2){
        triggerColor.style.background = "red";
    }else{
        triggerColor.style.background = "#ddd"
    }
    triggerColor.onmouseover = function(){
        oldColor = this.style.background;　　　　//保存移入时的颜色
        this.style.background = "yellow";
    }
    triggerColor.onmouseout = function(){
        this.style.background = oldColor;
    }
}

4.添加删除一行

var oTab = document.getElementById("tab");
    var oName = document.getElementById("name");
    var oAge = document.getElementById("age");
    var oBtn = document.getElementById("btn");

    //添加
    oBtn.onclick = function(){
        var inputName = oName.value;
        var inputAge = oAge.value;
        var id = oTab.tBodies[0].rows.length+1;

        var oTr = document.createElement("tr");

        //第一列
        var oTd = document.createElement("td");
        oTd.innerHTML = id++;
        oTr.appendChild(oTd);

        //第二列
        var oTd = document.createElement("td");
        oTd.innerHTML = inputName;
        oTr.appendChild(oTd);

        //第三列
        var oTd = document.createElement("td");
        oTd.innerHTML = inputAge;
        oTr.appendChild(oTd);

        //第四列
        var oTd = document.createElement("td");
        oTd.innerHTML = '<a href="javascript:;">删除</a>';
        oTr.appendChild(oTd);

        oTab.tBodies[0].appendChild(oTr);

        //删除一列
        var arrA = oTab.tBodies[0].getElementsByTagName("a");

        for(var i = 0, len = arrA.length; i < len; i++){
            arrA[i].onclick = function(){
                oTab.tBodies[0].removeChild(this.parentNode.parentNode);
            }
        }
    }

HTML

<input type="text" id="name" />
<input type="text" id="age" />
<input type="button" id="btn" value="添加" />
<table id="tab">
    <thead>
        <tr>
            <th>ID</th>
            <th>name</th>
            <th>age</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>一</td>
            <td>11</td>
        </tr>
        <tr>
            <td>2</td>
            <td>二</td>
            <td>21</td>
        </tr>
        <tr>
            <td>3</td>
            <td>三</td>
            <td>31</td>
        </tr>
        <tr>
            <td>4</td>
            <td>四</td>
            <td>41</td>
        </tr>
        <tr>
            <td>5</td>
            <td>五</td>
            <td>51</td>
        </tr>
    </tbody>
</table>