<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>learn_jQueryDemo2--查看删除修改-CRUD</title>
<style type="text/css">
#table_crud {
border: 1px solid #abcdef;
border-collapse: collapse;
width: 700px;
}
tr {height: 40px;}
th {border: 1px solid #abcdef;}
td {border: 1px solid #abcdef;text-align: center;}
td a {
margin-right: 5px;
color: pink;
}
.popDiv {
width: 500px;
padding: 10px;
border: 1px solid green;
position: absolute;
z-index: 4;
left: 50%;
margin-left:-250px;
top: 190px;
background: white;
display:none;
}
.popDiv p {
border-bottom: 1px solid red;
}
</style>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
</head>
<body>
<table id="table_crud">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职位</th>
<th>薪资</th>
<th>操作</th>
</tr>
<tr>
<td>zhangSan</td>
<td>25</td>
<td>资深前端工程师</td>
<td>12000</td>
<td>
<a href="#" class="view" >view</a>
<a href="#" class="delete">remove</a>
<a href="#">modidied</a>
</td>
</tr>
<tr>
<td>liSi</td>
<td>28</td>
<td>资深java程序员</td>
<td>16000</td>
<td>
<a href="#" class="view" >view</a>
<a href="#" class="delete">remove</a>
<a href="#">modidied</a>
</td>
</tr>
<tr>
<td>wangWu</td>
<td>30</td>
<td>项目经理</td>
<td>10000+提成</td>
<td>
<a href="#" class="view" >view</a>
<a href="#" class="delete">remove</a>
<a href="#">modidied</a>
</td>
</tr>
</table>
<div class="popDiv">
<p> <strong>姓名:</strong>
<span></span>
</p>
<p> <strong>年龄:</strong>
<span></span>
</p>
<p>
<strong>职位:</strong>
<span></span>
</p>
<p>
<strong>薪资:</strong>
<span></span>
</p>
<a href="#" class="close">关闭</a>
</div>
<script type="text/javascript">
/*查看方法!!!*/
$('a.view').click(function() {
//添加遮罩层让弹出详细信息后不允许在点击其他的
var maskHeight = $(document).height();
var maskwidth = $(document).width();
$('body').append('<div class="mask"></div>')
$('div.mask').css({
'opacity': 0.4,
'background': '#000',
'position': 'absolute',
'lleft': 0,
'top': 0,
'width': maskwidth,
'height': maskHeight,
'z-index': 2
});
// alert($(this).text());
// $('.popDiv').css('display', 'block');
var array = [];
$(this).parent().siblings().each(function() {
// alert($(this).text());
array.push($(this).text());//新建数组,将获取到的值放在数组里面,写法和方法
});
// alert(array)
//each默认传递参数!!!
/*$('div.popDiv').show().children().each(function() {
$(this).children('span').text(array[$(this).index()])
});// 我觉的这样写也是可以的,嘿嘿*/
$('div.popDiv').show().children().each(function(i) {
$(this).children('span').text(array[i])
})
//关闭方法
$('a.close').click(function() {
$(this).parent().hide();
// $('div.mask').hide();//不合适
$('div.mask').remove();
});
});
/*删除方法*/
$('a.delete').click(function() {
$(this).parents('tr').remove();
});
/*修改*/
</script>
</body>
</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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>learn_jQueryDemo3---滚动公告</title>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<style type="text/css">
* {padding: 0; margin: 0;}
body { margin: 100px;}
ui {list-style-type: none;}
li { height: 30px; line-height: 30px;}
</style>
</head>
<body>
<ui>
<li>I Am The 000001 li...............</li>
<li>I Am The 000002 li...............</li>
<li>I Am The 000003 li...............</li>
<li>I Am The 000004 li...............</li>
<li>I Am The 000005 li...............</li>
<li>I Am The 000006 li...............</li>
<li>I Am The 000007 li...............</li>
<li>I Am The 000008 li...............</li>
<li>I Am The 000009 li...............</li>
<li>I Am The 000010 li...............</li>
</ui>
<script type="text/javascript">
/*仅仅是为了实现这个方式,但是由于频繁的操作了DOM所以不建议使用,可以学习实例知识,图片轮播*/
setInterval(function() {
// $('ui>li:first()').css('background', 'red');
var newLi = $('ui>li:first()').clone(true);
$('ui').append(newLi);
$('ui>li:first()').remove();
},1000);
</script>
</body>
</html>