JSJQ-删除表格信息
一、知识点
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.οnlοad=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].οnmοuseοver=function()
{
bgColor=this.style.background;
this.style.background='green';
}
tab.tBodies[0].rows[i].οnmοuseοut=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].οnclick=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();
})
})
转载于:https://www.cnblogs.com/xiaoyangtian/p/7931830.html
- 点赞
- 收藏
- 分享
- 文章举报
- js节点对象操作--------输入个人信息加载表格中并实现删除功能
- js动态创建表格,删除行列的小例子
- js表格操作类(添加一行,删除一行,排序,上移选定行,下移选定行)
- js动态的添加删除表格的行和列
- js创建制定制定行数和列数的表格以及删除制定行和列
- js实现返回上一页,标签的事件和href,删除表格的一行
- jquery.datatables.js表格编辑与删除
- jq动态实现表格的新增一行和删除一行
- js 生成表格 添加,删除行、列。行,列数据交换
- JS 删除添加表格的行操作
- js 新增和删除表格
- js动态创建表格,删除行列的小例子
- Js操作表格-对表格单元格的添加删除修改
- js 动态操作table 表格 在指定行后添加行 删除行
- 使用js实现动态新增,删除表格,并将表格数据批量插入数据库。
- JS学习--制作一个表格,显示班级的学生信息
- jq在添加a链接时绑定事件,在方法中获取表格中的信息
- JS实现动态表格的添加,修改,删除功能(推荐)
- 动态插入、添加删除表格行的JS代码
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)