JS实现菜单按钮的前进后退切换

对应HTML文本

<div class="menu">

<table id="pio">

<tr>

<td class="td1" id="back" class="back"><img width="40" height="42" src="../p_w_picpath/back.png" align="absmiddle"></div></td>

<td class="td" id="sc1"><div class="menuId" id="button1">SC1</div></td>

<td class="td" id="sc2"><div class="menuId" id="button2">SC2</div></td>

<td class="td" id="sc3"><div class="menuId" id="button3">SC3</div></td>

<td id="forward" class="forward"><img width="40" height="42" src="../p_w_picpath/forward.png" align="absmiddle"></div></td>

   </tr>

</table>

</div>

JS部分：

var arr = new Array("SC1","SC2","SC3","SC4","SC5","SC6","SC7","SC8");

function getValue(){

       var  key;       

  var columCount = document.getElementById("pio").rows.length;行数

       var rowCount = document.getElementById("pio").rows.item(0).cells.length;///列数

       var my_array = new Array();

       for (var i = 0; i < columCount; i++) {

          my_array[i] = new Array();

          for (var j = 0; j < rowCount; j++) {

           my_array[i][j] = document.getElementById("pio").rows.item(i).cells.item(j).innerText;

          }

       }

       for (var i = 0; i < 8; i++) {

           if(my_array[0][1]==arr[i]){

    var  key = i;

  }      

       }

}

function doBack(){          

 var columCount = document.getElementById("pio").rows.length;行数

       var rowCount = document.getElementById("pio").rows.item(0).cells.length;///列数

       var my_array = new Array();

       for (var i = 0; i < columCount; i++) {

          my_array[i] = new Array();

          for (var j = 0; j < rowCount; j++) {

           my_array[i][j] = document.getElementById("pio").rows.item(i).cells.item(j).innerText;

          }

       }

       var tmp=my_array[0][1].substring(0,3);

       for (var i = 0; i < 8; i++) {     

           if(arr[i]==tmp){

  if(i>0){

   var key1=i-1;

   var key2=i;

   var key3=i+1;

document.getElementById("button1").innerText=arr[key1];

       document.getElementById("button2").innerText=arr[key2];

       document.getElementById("button3").innerText=arr[key3];

}

  }            

       }        

}

function doForward(){

  var columCount = document.getElementById("pio").rows.length;行数

       var rowCount = document.getElementById("pio").rows.item(0).cells.length;///列数

       var my_array = new Array();

       for (var i = 0; i < columCount; i++) {

          my_array[i] = new Array();

          for (var j = 0; j < rowCount; j++) {

           my_array[i][j] = document.getElementById("pio").rows.item(i).cells.item(j).innerText;

          }

       }

       var tmp=my_array[0][1].substring(0,3);   

       for (var i = 0; i < 8; i++) {     

           if(arr[i]==tmp){

  if(i<5){

   var key1=i+1;

   var key2=i+2;

   var key3=i+3;

document.getElementById("button1").innerText=arr[key1];

       document.getElementById("button2").innerText=arr[key2];

       document.getElementById("button3").innerText=arr[key3];

}

  }            

       }

}

 

 

转载于:https://blog.51cto.com/liuaoxiang/1096220