相恒的第一篇技术性文章，很用心去写的工作总结

 

 

刚刚在归类的时候，就有点纠结，这是属于UI还是JS，话说回来，JS也是UI的一部分，打住，进入正题吧

 

我想要的效果很简单，但是从昨天下午弄到现在，当然期间也做了其他的事情，我这个人每当碰到难题的时候，虽然会思考一会，但是不会一直思考下去，我会先放一放，一般来说我的问题都是在放一放之后解决的，这件同样是如此。

 

页面刚刚加载时，如下图。我想要的效果就是当选择其他证件类型时显示两个TR，即多显示两行内容。

 

 

 

想要的效果图：

 

 

最初的思路就是下面两行默认是display:none;当选择其他的时候display:block;控制JS:

       function displayornot(num) {
           if ($("cardtype_" + num).value > 1) {
               $("trsex_" + num).style.display = '';
               $("trbirthday_" + num).style.display = '';
           }
           else {
               $("trsex_" + num).style.display = 'none';
               $("trbirthday_" + num).style.display = 'none';
           }
       }

刚开始的时候，控制其显示代码我写成：display='block',但是页面（非IE内核浏览器）有错位如下图：

 

但是看了一篇文章后修改如上述JS：http://qingyuexiao.iteye.com/blog/664906 ,修改后还是没有效果。

这个时候"性别"处代码：

   <tr id="trsex_<%= i+1 %>" class="non">
       <td class="tdt">性别：</td>
       <td class="tdl"><select id="selsex_<%= i+1 %>"  name="selsex_<%= i+1 %>" >
           <option selected="selected" value="1">男</option><option value="2">女</option>
       </select></td>
   </tr>

令人万万没有想到是问题竟然出现在：class="non"上，我将class="non"修改为：display="none"，至此解决，胸闷。虽然问题解决了，但是还是没有完全明白。