以Table表为框架，在HTML中实现数据列的添加，删除，查找功能

            <!
            DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
            >
            <
            html 
            xmlns
            ="http://www.w3.org/1999/xhtml"
            >
            <
            head
            >
            <
            meta 
            http-equiv
            ="Content-Type"
             content
            ="text/html; charset=utf-8"
            />
            <
            title
            >Table操作</title><script>
window.onload=function()
{
    var oTab=document.getElementById(‘tab1‘);
    var oTr=oTab.tBodies[0].getElementsByTagName(‘tr‘);
    var oName=document.getElementById(‘name‘);
    var oAge=document.getElementById(‘age‘);
    var oSign=document.getElementById(‘sign‘);
    var oBtn=document.getElementById(‘btn‘);
    var bColor=‘‘;
    var bRank=oTab.tBodies[0].rows.length+1;    
    /*alert(oTd.length);*//*创建删除列*/
    oBtn.onclick=function()
    {
        var oNewTr=document.createElement(‘tr‘);
        
        var oNewRank=document.createElement(‘td‘);
        oNewRank.innerHTML=bRank++;
        oNewTr.appendChild(oNewRank);
        
        var oNewName=document.createElement(‘td‘);
        oNewName.innerHTML=oName.value;
        oNewTr.appendChild(oNewName);
        
        var oNewAge=document.createElement(‘td‘);
        oNewAge.innerHTML=oAge.value;
        oNewTr.appendChild(oNewAge);
        
        var oNewSign=document.createElement(‘td‘);
        oNewSign.innerHTML=oSign.value;
        oNewTr.appendChild(oNewSign);
        
        var oNewDel=document.createElement(‘td‘);
        oNewDel.innerHTML=‘<a href="javascript:;">删除</a>‘;
        oNewTr.appendChild(oNewDel);
        /*新建行外观设置*/
        oNewTr.onmouseover=function()
        {
            bColor=this.style.background;/*为什么用this可以，而用oTr[i]不行？*/this.style.background="#FF0";
        };
        oNewTr.onmouseout=function()
        {
            this.style.background=bColor;
        };
        if(bRank%2)
        {
            oNewTr.style.background="#FF9";
        }
        else
        {
            oNewTr.style.background="";
        }
        
        oNewTr.getElementsByTagName(‘a‘)[0].onclick=function()
        {
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
        };
        /*oTab.getElementsByTagName(‘body‘).appendChild(oNewTr);*/
        oTab.tBodies[0].appendChild(oNewTr);
    };
    for(var i=0;i<oTr.length;i++)
    {
        oTr[i].onmouseover=function()
        {
            bColor=this.style.background;/*为什么用this可以，而用oTr[i]不行？*/this.style.background="#FF0";
        };
        oTr[i].onmouseout=function()
        {
            this.style.background=bColor;
        };
        if(i%2)
        {
            oTr[i].style.background="#FF9";
        }
        else
        {
            oTr[i].style.background="";
        }
        oTr[i].getElementsByTagName(‘a‘)[0].onclick=function()
        {
            oTab.tBodies[0].removeChild(this.parentNode.parentNode);
        };
    }
    
    /*搜索列*/var oBse=document.getElementById(‘bse‘);
    oBse.onclick=function()
    {
        var RankCol=‘‘;
        var oTse=document.getElementById(‘search‘);
        var oSe=document.getElementById(‘sel‘);
        var oHtd=oTab.getElementsByTagName(‘thead‘)[0].getElementsByTagName(‘tr‘)[0].getElementsByTagName(‘td‘);
        var Sindex =oSe.selectedIndex; // 选中索引var Stext =oSe.options[Sindex].text; // 选中文本/*alert(oHtd[0].innerHTML);*/for(var i=0;i<oHtd.length;i++)
        {
            if(oHtd[i].innerHTML==Stext)
            {
                RankCol=i;
                break;
            }
            
        }
        /*alert(oTab.tBodies[0].rows[2].cells[RankCol].innerHTML)*//*alert(oTse.value.toLowerCase());*/for(var i=0;i<oTab.tBodies[0].rows.length;i++)
        {
            var str1=oTab.tBodies[0].rows[i].cells[RankCol].innerHTML.toLowerCase();
            var str2=oTse.value.toLowerCase();
            var arr=str2.split(‘‘);
            for(var j=0;j<arr.length;j++)
            {
                var t=str1.indexOf(arr[j]);
                if(t!=-1)
                {
                    oTab.tBodies[0].rows[i].style.background="#FF0";
                }
            }
            
        }
    };
};
</script></head><body>
姓名：<input type="text" id="name"/>
年龄：<input type="text" id="age"/>
签到：<input type="text" id="sign"/><input type="button" id="btn" value="创建"/><br />
关键字：<input type="text" id="search"/>
分类：
<select id="sel"><option value="rank">编号</option><option value="name" selected="selected">姓名</option><option value="age">年龄</option><option value="sign">签到</option></select><input type="button" id="bse" value="搜索"/><span style="font-size:12px;color:#999;font-family:Arial, Helvetica, sans-serif;">    //搜索结果高亮显示,可忽略大小写，字符串模糊匹配搜索</span><br /><table id="tab1" border="1" style="border:1px solid #3FC;width:400px; height:35px; margin-top:200px;"><thead><tr><td >编号</td><td >姓名</td><td >年龄</td><td >签到</td><td>操作</td></tr></thead><tbody><tr><td>1</td><td>王大</td><td>23</td><td>17</td><td><a href="javascript:;">删除</a></td></tr><tr><td>2</td><td>李二</td><td>18</td><td>21</td><td><a href="javascript:;">删除</a></td></tr><tr><td>3</td><td>张三</td><td>25</td><td>23</td><td><a href="javascript:;">删除</a></td></tr><tr><td>4</td><td>刘四</td><td>35</td><td>18</td><td><a href="javascript:;">删除</a></td></tr></tbody></table></body></html>