Js表格行上移下移例子
摘要：Js表格行上移下移例子
js代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>表格行上移下移例子</TITLE>
</HEAD>
<BODY>
<div id="webkfa">
</div>
<script type="text/javascript">
var arr=[
{id:1,name:'web开发1'},
{id:2,name:'webkfa2'},
{id:3,name:'webkfa3'},
{id:4,name:'webkfa4'},
{id:5,name:'webkfa5'},
{id:5,name:'webkfa6'},
{id:5,name:'webkfa7'},
{id:5,name:'webkfa8'}
]
function sctablehtml(arr){
var html=[];
html[html.length]='<table border="1">';
html[html.length]='<tr>';
html[html.length]='<td>序号</td>';
html[html.length]='<td>名字</td>';
html[html.length]='<td>操作</td>';
html[html.length]='</tr>';
for(var i=0;i<arr.length;i++){
var obj=arr[i];
html[html.length]='<tr>';
html[html.length]='<td>'+obj.id+'</td>';
html[html.length]='<td id="tdname'+i+'">'+obj.name+'</td>';
html[html.length]='<td>';
if(i>0){
html[html.length]='<input type="button" onclick="premove('+i+')" value="上移"/>';
}
if(i<arr.length-1){
html[html.length]='<input type="button" onclick="nextmove('+i+')" value="下移"/>';
}
html[html.length]='</td>';
html[html.length]='</tr>';
}
html[html.length]='</table>';
document.getElementById("webkfa").innerHTML=html.join("");
}
function premove(index){
var preindex=index-1;
//交换本行和上一行的值
var tmpstr=document.getElementById("tdname"+preindex).innerHTML;
document.getElementById("tdname"+preindex).innerHTML=document.getElementById("tdname"+index).innerHTML
document.getElementById("tdname"+index).innerHTML=tmpstr
}
function nextmove(index){
var nextindex=index+1;
//交换本行和上一行的值
var tmpstr=document.getElementById("tdname"+nextindex).innerHTML;
document.getElementById("tdname"+nextindex).innerHTML=document.getElementById("tdname"+index).innerHTML
document.getElementById("tdname"+index).innerHTML=tmpstr
}
sctablehtml(arr);
</script>
</BODY>
</HTML>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢