课程公示系统优化（一）——当前学期突出显示

      这周任务是优化课程公示系统，涉及到JSP与JS之间数据传递，下面介绍一下传递流程。此次任务目标是实现当前学期的课程突出显示。

      首先，在TeacherAction中添加获得学期方法getIndexTC（）该方法调用静态类ActionContextUtils中的setAtrributeToRequest（）方法将得到的学期以键值对的方式放到request中。如：ActionContextUtils.setAtrributeToRequest("term","term_"+i);

       然后，在JSP页面中获得term，如：<input type="hidden" id="term_current" value="${term}" />用的EL表达式。为了能使当前学期课程突出显示，即改变当前学期的图片，所以要判断页面中的课程哪些是当前学期的。给所有课程都加上别名，如：

 <div class="coursei nav term_3" style="background/>这里class属性可以有多个别名，这里是三个，用这三个名字都可以得到div标签。在JSP中加入下面语句，用js控制页面格式：<script type="text/javascript" src="../kcgs/script/kcgs_tcs.js"></script>

       下面更改JS。加上：var term_current = Ext.getDom('term_current').value;这句中getDom是获得标签id为term_current的标签，然后取值。这样当前学期就从jsp页面传到js中。然后var term_ele = Ext.select('.'+term_current);引用select得到class名为term_current的标签集。注意“.”是获得class名称，“#”是获得元素名称。这样term_ele就是页面课程集中的当前所学课程的元素集。

       如果课程名称是文字的话，term_ele.setStyle("color", 0x6BE6EA);就可以修改它们的颜色。这里因为课程是一张张图片，采用替换图片的方式。在jsp页面中：判断性更改图片地址：

<div class="coursei nav term_3" style="background:url('../kcgs/tc_index_images/java${(term eq 'term_3') ? '_current' : '' }.png');">
            <!-- 隐藏字段 -->
            <input class="coursename " type="hidden" value="Java SE程序设计" />
</div>

通过判断该课程是否为当前学期课程来更改图片url，进而改变图片。以上即可实现当前学期的课程突出显示的功能，下面是关键代码。

jsp：<input type="hidden" id="term_current" value="${term}" />

<div class="wrap_tc">
  <div class="head_tc">
  <div class="bg-down">
    <div class="box_tc">
      <div class="nav_box">
        <div class="coursei nav term_3" style="background:url('../kcgs/tc_index_images/java${(term eq 'term_3') ? '_current' : '' }.png');">
            <!-- 隐藏字段 -->
            <input class="coursename " type="hidden" value="Java SE程序设计" />
        </div>

·····省略

<script type="text/javascript" src="../kcgs/script/kcgs_tcs.js"></script>

js：

var term_current = Ext.getDom('term_current').value;
var term_ele = Ext.select('.'+term_current);

顺便说一下 ：如用利用CSS，使用鼠标经过时更换背景图片。

n
{
background-image:url(images/1.gif);
background-repeat:no-repeat;
background-position:center;
}
.m
{
background-image:url(images/2.gif);
background-repeat:no-repeat;
background-position:center;
}

<table height="100px" width="100px">
  <tr class="n" οnmοuseοver="this.className ='m'" οnmοuseοut="this.className='n'">
  <td >aaaaa</td>
  </tr>
  </table>
其实实现都很简单，刚实习费了很长时间，如有错误，请多指正。