如何在table的每一行添加点击事件

1.0的验收老师提到最多的是：无处不按钮，无处不入口。在后面的开发中牢记了这个思想，行动下移。比如对表格的操作，不能只限于工具栏上的按钮，选中一条数据后需得选按钮，索性不给它设计工具栏，点击哪里都是按钮。

1.html

   这是一个编辑试卷的功能，页面中首先显示试卷的题型，然后点击题型可以进入到题目列表页。

 

[html] view plain copy

 print?

1. <table id="dg" class="easyui-datagrid" title="编辑试题-显示试卷题型" style="height:65%;width:100%"  
2.             data-options="rownumbers:true,pagination:true,pageSize:5,pageList:[5,10,15,20],method:'get',toolbar:'#tb',  
3.                 onClickRow:onClickRow">  
4.             <thead>  
5.                 <tr>  
6.                     <th field="map.paperID" width="10%" align="center" data-options="formatter:function(value, rec){return rec.map['paperID'];}">paperID</th>   
7.                     <th field="map.questionTypeId" width="10%" align="center" data-options="formatter:function(value, rec){return rec.map['questionTypeId'];}">题型id</th>   
8.                     <th field="map.tableName" width="70%" align="center" data-options="formatter:function(value, rec){return rec.map['tableName'];}">表名</th>   
9.                     <th field="map.name" width="10%" align="center" data-options="formatter:function(value, rec){return rec.map['name'];}">题型</th>  
10.                 </tr>  
11.             </thead>  
12.         </table>  
13.         <div id="tb" style="padding: 2px 5px;">   
14.             <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="view()">预览</a>  
15.             <a href="#" class="easyui-linkbutton" iconCls="icon-undo"  onclick="back()">返回</a>  
16.         </div>  

2.js

[javascript] view plain copy

 print?

1. function onClickRow(rowNum,record){  
2.          $.messager.confirm('提示','是否要查看题目?', function (r) {   
3.              if(r){   
4.                     var paperID = record.map.paperID;//试卷id  
5.                     var questionTypeId = record.map.questionTypeId;//题型id  
6.                     var tableName = record.map.tableName;//标明  
7.                     //跳转到下一页QuestionList  
8.                     window.location.href ="${pageContext.request.contextPath}/QuestionList?paperID=" + paperID   
9.                              + '&questionTypeId=' + questionTypeId + '&tableName=' + tableName;  
10.                 }   
11.              });  
12.       }  

   点击行的哪里都能触发该事件

3.controller

[java] view plain copy

 print?

1. @RequestMapping("/QuestionList")  
2.     /** 
3.      * 编辑试题，点击一种题型后，显示题目列表页面 
4.      * @param   
5.      * @param   
6.      * @return void 
7.      * @exception/throws [违例类型] [违例说明] 
8.      * @see          [类、类#方法、类#成员] 
9.      * @deprecated 
10.      */  
11.     public String QuestionList(HttpServletRequest request, HttpServletResponse response){  
12.         String paperID = request.getParameter("paperID"); //试卷表Id  
13.         String questionTypeId = request.getParameter("questionTypeId");//题型id  
14.         String tableName = request.getParameter("tableName"); //表名  
15.         request.setAttribute("paperID",paperID );  
16.         request.setAttribute("questionTypeId",questionTypeId );  
17.         request.setAttribute("tableName", tableName);  
18.         return  "/QuestionList";  
19.     }