jsjq-Delete Table information

First, the Knowledge point

var chils= s.childnodes; Get all the child nodes of S
var Par=s.parentnode; Get the parent node of S
var ns=s.nextsbiling; Get the next sibling node of S
var ps=s.previoussbiling; Get the previous sibling node of S
var fc=s.firstchild; Get the first child node of S
var lc=s.lastchile; Get the last child node of s

The ParentNode property returns the parent node of the specified node in the form of a node object. If the specified node does not have a parent node, NULL is returned.

！！！ -CSS

*{margin:0;padding:0;}
Table{border-collapse:collapse;}
th,td{border:1px solid #ccc;p adding:5px 25px;}

！！！ -HTML

<table id= "tab" >
<thead>
<th> Serial Number </th>
<th> name </th>
<th> Age </th>
<th> Operations </th>
</thead>
<tbody>
<tr>
<td>01</td>
<td> Interlaced </td>
<td>21</td>
<td><a class= "Remove" href= "#" > Delete </a></td>
</tr>
<tr>
<td>01</td>
<td> Interlaced </td>
<td>21</td>
<td><a class= "Remove" href= "#" > Delete </a></td>
</tr>
<tr>
<td>01</td>
<td> Interlaced </td>
<td>21</td>
<td><a class= "Remove" href= "#" > Delete </a></td>
</tr>
<tr>
<td>01</td>
<td> Interlaced </td>
<td>21</td>
<td><a class= "Remove" href= "#" > Delete </a></td>
</tr>
</tbody>
</table>

！！！ -JavaScript

Window.onload=function ()
{
var tab=document.getelementbyid (' tab ');
var remove=document.getelementsbyclassname (' Remove ');
var bgcolor= ';
Interlaced color
for (Var i=0;i<tab.tbodies[0].rows.length;i++)
{
Tab.tbodies[0].rows[i].onmouseover=function ()
{
Bgcolor=this.style.background;
this.style.background= ' green ';
}
Tab.tbodies[0].rows[i].onmouseout=function ()
{
This.style.background=bgcolor;
}
if (i%2==0)
{
tab.tbodies[0].rows[i].style.background= ' Yellow ';
}
Else
{
Tab.tbodies[0].rows[i].style.background= ";
}

}
for (var i=0;i<remove.length;i++)//delete a line of information
{
Remove[i].onclick=function ()
{
This.parentNode.parentNode.remove ();
}
}
}

！！！ -JQuery

$ (function () {
var bgcolor= ';
$ (' #tab tbody tr '). Filter (': even '). css (' background ', ' yellow ');
$ (' #tab tbody tr '). MouseOver (function () {
bgcolor=$ (this). CSS (' background ');
$ (this). CSS (' background ', ' green ');
})
$ (' #tab tbody tr '). Mouseout (function () {
$ (this). CSS (' background ', bgColor);
})
$ ('. Remove '). Click (function () {
$ (this). Parents (' tr '). Remove ();
})
})

jsjq-Delete Table information