<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ChangeRow</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style type="text/css">
span {
cursor: pointer;
font-weight: bold;
}
.selected {
color: #f00;
}
</style>
<script type="text/javascript">
$(function() {
$('span').mouseover(function() { //鼠标移动到 span 上
$(this).addClass('selected'); //高亮
}).mouseout(function() { //鼠标移出 span
$(this).removeClass('selected'); //去除高亮
});
$('span').click(function() { //鼠标点击 span
var spanHTML = $(this).html(); //获得向上或向下箭头
var $tr = $('.selected').parent().parent(); //获得当前那一行
var childCount = $tr.children().length; //获得 tr 的子节点数
var arrChild = new Array(childCount-2);
for(var i=0; i<childCount-2; i++) {
arrChild[i] = $tr.children()[i].innerText;
}
var $oTr;
if(spanHTML == '↑') {
$oTr = $tr.prev(); //获得上一个 tr
} else {
$oTr = $tr.next(); //获得下一个 tr
}
if(typeof($oTr.children()[0])!='undefined') {
for(var i=0; i<childCount-2; i++) {
$tr.children()[i].innerText = $oTr.children()[i].innerText;
$oTr.children()[i].innerText = arrChild[i];
}
}
});
})
</script>
</head>
<body>
<table id="changeRow" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11 </td>
<td>12 </td>
<td>13</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
<tr>
<td>21 </td>
<td>22 </td>
<td>23</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
<tr>
<td>31 </td>
<td>32 </td>
<td>33</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
<tr>
<td>41 </td>
<td>42 </td>
<td>43</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>ChangeRow</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style type="text/css">
span {
cursor: pointer;
font-weight: bold;
}
.selected {
color: #f00;
}
</style>
<script type="text/javascript">
$(function() {
$('span').mouseover(function() { //鼠标移动到 span 上
$(this).addClass('selected'); //高亮
}).mouseout(function() { //鼠标移出 span
$(this).removeClass('selected'); //去除高亮
});
$('span').click(function() { //鼠标点击 span
var spanHTML = $(this).html(); //获得向上或向下箭头
var $tr = $('.selected').parent().parent(); //获得当前那一行
var childCount = $tr.children().length; //获得 tr 的子节点数
var arrChild = new Array(childCount-2);
for(var i=0; i<childCount-2; i++) {
arrChild[i] = $tr.children()[i].innerText;
}
var $oTr;
if(spanHTML == '↑') {
$oTr = $tr.prev(); //获得上一个 tr
} else {
$oTr = $tr.next(); //获得下一个 tr
}
if(typeof($oTr.children()[0])!='undefined') {
for(var i=0; i<childCount-2; i++) {
$tr.children()[i].innerText = $oTr.children()[i].innerText;
$oTr.children()[i].innerText = arrChild[i];
}
}
});
})
</script>
</head>
<body>
<table id="changeRow" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>11 </td>
<td>12 </td>
<td>13</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
<tr>
<td>21 </td>
<td>22 </td>
<td>23</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
<tr>
<td>31 </td>
<td>32 </td>
<td>33</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
<tr>
<td>41 </td>
<td>42 </td>
<td>43</td>
<td> <span>↑</span></td>
<td> <span>↓</span></td>
</tr>
</table>
</body>
</html>
523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
