javascript思考题

Question

这是我们公司技术总监考我的问题：有两个Table模仿两个菜单列（一级菜单一个TABLE,二级菜单一个TABLE）: 左列表1    右列表11 左列表2    右列表12 左列表3    左列表4HTML如下：
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="menu">
      <tr>
        <td id="left_0" height="57" align="center" style="color:#ff0000">左列表1</td>
      </tr>
      <tr>
        <td id="left_1" height="57" align="center">左列表2</td>
      </tr>
      <tr>
        <td id="left_2" height="57" align="center">左列表3</td>
      </tr>
      <tr>
        <td id="left_3" height="57" align="center">左列表4</td>
      </tr>
      <tr>
        <td id="left_4" height="57" align="center">左列表5</td>
      </tr>
      <tr>
        <td id="left_5" height="57" align="center">左列表6</td>
      </tr>
      <tr>
        <td id="left_6" height="57" align="center">左列表7</td>
      </tr>
    </table>    <table id="tb" width="690" border="0" align="center" cellpadding="0" cellspacing="0" class="list">
      <tr>
        <td id="right_0" height="55" align="center" style="color:#CCC">右列表11</td>
      </tr>
      <tr>
        <td id="right_1" height="55" align="center">右列表12</td>
      </tr>
      <tr>
        <td id="right_2" height="54" align="center">右列表13</td>
      </tr>
      <tr>
        <td id="right_3" height="55" align="center">右列表14</td>
      </tr>
      <tr>
        <td id="right_4" height="54" align="center">右列表15</td>
      </tr>
      <tr>
        <td id="right_5" height="54" align="center">右列表16</td>
      </tr>
      <tr>
        <td id="right_6" height="55" align="center">右列表17</td>
      </tr>
    </table>
左列表对应右列表如下：
              
    ["左列表1"]         ["右列表11","右列表12","右列表13","右列表14","右列表15","右列表16","右列表17"]
    ["左列表2"]       ["右列表21","右列表22","右列表23","","","",""]
    ["左列表3"]       ["右列表31","右列表32","右列表33","右列表34","右列表35","",""]
    ["左列表4"]         ["右列表41","右列表42","右列表43","右列表44","右列表45","右列表46","右列表47"]
    ["左列表5"]         ["右列表51","右列表52","右列表53","右列表54","右列表55","右列表56","右列表57"]
    ["左列表6"]       ["右列表61","右列表62","","","","",""]
    ["左列表7"]         ["右列表71","右列表72","右列表73","右列表74","","",""]现在要实现菜单的联动效果我是这样写的：  var menu=[     //id:左菜单id值；children:每个左菜单对应的右菜单列表；focusChild:记忆左菜单的默认右菜单焦点值；index:当前右菜单的焦点值
            {id:0,num:7,children:["右列表11","右列表12","右列表13","右列表14","右列表15","右列表16","右列表17"],focusChild:0,index:0},
{id:1,num:3,children:["右列表21","右列表22","右列表23","","","",""],focusChild:0,index:0},
{id:2,num:5,children:["右列表31","右列表32","右列表33","右列表34","右列表35","",""],focusChild:0,index:0},
{id:3,num:7,children:["右列表41","右列表42","右列表43","右列表44","右列表45","右列表46","右列表47"],focusChild:0,index:0},
{id:4,num:7,children:["右列表51","右列表52","右列表53","右列表54","右列表55","右列表56","右列表57"],focusChild:0,index:0},
{id:5,num:2,children:["右列表61","右列表62","","","","",""],focusChild:0,index:0},
{id:6,num:4,children:["右列表71","右列表72","右列表73","右列表74","","",""],focusChild:0,index:0}
  ];  //主要代码如下：
  if(左菜单上下移动)
  for(var a=0;a<=6;a++)//联动右菜单
                {
$("right_"+a).innerText=menu[left_Id].children[a];
       }  我用for循环的确是实现了效果，但技术总监要求代码不能用循环语句（也不能通过innerHTML直接输出右菜单）！！！
  
  我想了将近两天也没想到好办法！？   求高手之解

Answer 1

所谓的联动，其实就是改变右列表中各个td的值，可到底怎么能不用循环语句，让多个td中的值同时改变

Answer 2

估计他这是让你用JS写个菜单类：
var Menu = function(){
  this.width = 180;
  this.curIndex = null;
  this.childNodes = [];
  //...............
};
//根据需要给这个函数加原型
Menu.prototype.setAttr = function(){

}Menu.prototype.getAttr = function(){
。
}

Answer 3

在页面加载的时候就生成"list"，每一列对应为"menu"内某一行的二级菜单。用一个隐藏的DIV将"list"包起来，当鼠标移动到"menu"的第N行的时候，就显示DIV，同时设置其宽度为要显示的"list"里第N列的宽度。DIV用"position:relative"；"list"用"position:absolute"定位"left"到DIV可见的部分。当然"list"也可以生成一列，显示的时候就设置"list"的"top"。其基本原理是相同的。