上一条 下一条数据

html部份》》》》》》》

<!--数据显示 上下条-->
<p id="showData"></p>
<button id="onenex" onclick="updata(1)">上</button>
<button id="twoup" onclick="updata(0)">下</button>
<span id="txtx"></span>

js部份》》》》》》》》

<script>

//上下条数据
var dataArry=[
{"name":"张一","play":"篮1球","run":"发违法和是否对","age":"13岁"},
{"name":"张二","play":"篮2球","run":"大V发的","age":"14岁"},
{"name":"张三","play":"篮3球","run":"撒打算","age":"12岁"},
{"name":"张四","play":"篮4球","run":"阿斯顿","age":"11岁"},
]
var ineq=-1
//下一条
function updata(onup){
if(onup == 0){//0 下一條、1上一條
ineq ++//下一頁點擊加一
str=""
arr=[]//讓循環出來的數據可以用到外面
for(var i=0;i<dataArry.length;i ++){
i == ineq
arr=dataArry[ineq]
}
if(ineq <dataArry.length){
$("#showData").empty()//清空數據
str += "<p>"+arr.name+"，今年"+arr.age+"---喜欢"+arr.play+"----然後呢----"+arr.run+"</p>"
$("#showData").append(str)//把相應的數據append到盒子裡面
$("#txtx").html("")//在這個範圍內讓提示清空
$("#twoup").attr("disabled",false)
$("#onenex").attr("disabled",false)
}else{
$("#txtx").html("最後一條數據了")
$("#twoup").attr("disabled",true)

// return
}

}else if(onup == 1){
ineq --
str=""
arr=[]
for(var i=0;i<dataArry.length;i ++){
i == ineq
arr=dataArry[ineq]
}
if(ineq >= 0 && ineq <= dataArry.length){
$("#showData").empty()
str += "<p>"+arr.name+"，今年"+arr.age+"---喜欢"+arr.play+"----然後呢----"+arr.run+"</p>"
$("#showData").append(str)
$("#txtx").html("")
$("#onenex").attr("disabled",false)
$("#twoup").attr("disabled",false)
}else{
$("#txtx").html("第一條數據")
$("#onenex").attr("disabled",true)
}
}
}

</script>