JSJQ-删除表格信息

Posted 2020-10-16 万里奔腾

一、知识点

　　var chils= s.childNodes; //得到s的全部子节点
　　var par=s.parentNode; //得到s的父节点
　　var ns=s.nextSbiling; //获得s的下一个兄弟节点
　　var ps=s.previousSbiling; //得到s的上一个兄弟节点
　　var fc=s.firstChild; //获得s的第一个子节点
　　var lc=s.lastChile; //获得s的最后一个子节点

　   parentNode 属性以 Node 对象的形式返回指定节点的父节点。如果指定节点没有父节点，则返回 null。

！！！ - CSS

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

 

！！！ - html

　　<table id="tab">
　　　　<thead>
　　　　　　<th>序号</th>
　　　　　　<th>姓名</th>
　　　　　　<th>年龄</th>
　　　　　　<th>操作</th>
　　　　</thead>
　　　　<tbody>
　　　　　　<tr>
　　　　　　　　<td>01</td>
　　　　　　　　<td>隔行变色</td>
　　　　　　　　<td>21</td>
　　　　　　　　<td><a class="remove" href="#">删除</a></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>01</td>
　　　　　　　　<td>隔行变色</td>
　　　　　　　　<td>21</td>
　　　　　　　　<td><a class="remove" href="#">删除</a></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>01</td>
　　　　　　　　<td>隔行变色</td>
　　　　　　　　<td>21</td>
　　　　　　　　<td><a class="remove" href="#">删除</a></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>01</td>
　　　　　　　　<td>隔行变色</td>
　　　　　　　　<td>21</td>
　　　　　　　　<td><a class="remove" href="#">删除</a></td>
　　　　　　</tr>
　　　　</tbody>
　　　</table>

 

！！！ - javascript

　　window.onload=function()
　　{
　　　　var tab=document.getElementById(\'tab\');
　　　　var remove=document.getElementsByClassName(\'remove\');
　　　　var bgColor=\'\';
　　　　//隔行变色
　　　　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++)                                           //删除一行信息
　　　　{
　　　　　　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();
　　　　})
　　})