JS table notes, Implementation of add td, to achieve the search function

<! DOCTYPE Html>window.onload=function()    {        varOtab=document.getelementbyid ("tab1"); //alert (otab.getelementsbytagname ("tbody") [0].getelementsbytagname (' tr ') [1].getelementsbytagname (' TD ') [1]. innerHTML);        ////table can be easily written in the following        //Alert (otab.tbodies[0].rows[1].cells[1].innerhtml);        //         //         //Interlaced Color         for(vari=0;i<otab.tbodies[0].rows.length;i++)        {            varcol1= ";//stores the color of the current title barOtab.tbodies[0].rows[i].onmouseover=function() {col1= this. style.background;//first, Save the current color .                 this. style.background= "red";//when moved to the TD label on the show Red} otab.tbodies[0].rows[i].onmouseout=function()//when you leave td, change back to the original color            {                 this. style.background=col1; }            if(i%2)//Interlaced Color{otab.tbodies[0].rows[i].style.background= "#ccc"; }            Else{otab.tbodies[0].rows[i].style.background= ""; }        }  //Add an Li        varName =document.getelementbyid ("name"); varAge =document.getelementbyid (the "age"); varAdd=document.getelementbyid ("btn"); varnum=otab.tbodies[0].rows.length+1;//increase the length of the row firstadd.onclick=function()        {                       varnewrow= document.createelement ("tr");//Add a new line            varNewcell0=document.createelement ("td");//Add a new columnnewcell0.innerhtml=num++;            Newrow.appendchild (newCell0); varNewcell1=document.createelement ("td");//Add one more columnnewcell1.innerhtml=name.value;//the value on the textNewrow.appendchild (newCell1); varNewcell2=document.createelement ("td");//Add one more columnnewcell2.innerhtml=age.value;//the value of textNewrow.appendchild (newCell2); varNewcell3=document.createelement ("td");//Add a columnnewcell3.innerhtml= "<a href= ' javascript:; ' > Delete </a> ";//Add delete tagNewrow.appendchild (newCell3); otab.tbodies[0].appendchild (newRow);//put this line on the Body.Newcell3.getelementsbytagname ("a") [0].onclick=function()//Delete the TR node when the point solution deletes the label{otab.tbodies[0].removechild ( this. parentnode.parentnode);//this is a label This.parentnode for TD This.parentNode.parentNode for TR            }        }                            //search Function        varOtex=document.getelementbyid ("search1"); varObtn=document.getelementbyid ("btn2"); Obtn.onclick=function()        {                         for(vari=0;i<otab.tbodies[0].rows.length;i++)            {                varStab=otab.tbodies[0].rows[i].cells[1].innerhtml.tolowercase ();//the value of the name in the row and converted to lowercase                varStex=otex.value.tolowercase ();//user entered value and converted to lowercase                varArr=stex.split (");//If the user separates the keywords with a spaceotab.tbodies[0].rows[i].style.background= ";//set all backgrounds to null                //If you choose, replace the CSS with a block display.                 for(varj=0;j<arr.length;j++)                {                    if(stab.search (arr[j])!=-1)//call the search function to find the truncated array of characters and determine if there are any.{otab.tbodies[0].rows[i].style.background= "yellow";//There is a change in the TD color                    }                                    }            }        }    };</script>name:<input type= "text" id= "name" >age:<input type= "text" id= "age" ><input type= "button" value= "add" id= "btn"/><table border= "1" width= "500px" id= "tab1" > <thead> <td>ID</td> <td> name </td> <td> age </td&gt        ;            <td> operations </td> </thead> <tbody> <tr> <td>1</td> <td>Bule</td> <td>27</td> <td></td> </tr> &            Lt;tr> <td>2</td> <td> Zhang San </td> <td>23</td> <td></td> </tr> <tr> <td>3</td> <td> John Doe &L            t;/td> <td>28</td> <td></td> </tr> <tr> <td>4</td> <td> Harry </td> <td>25</td> <td>< /TD> </tr> <tr> <td>5</td> <td> Zhang Wei </td> <td>25< /td> <td></td> </tr> </tbody></table> search name: <input type= "text" id= " Search1 "/><input type=" button "value=" search "id=" btn2 "/> </body>
JS table notes, Implementation of add td, to achieve the search function