JSP点击单行列表，出发事件

最新推荐文章于 2022-12-14 15:57:20 发布

原创最新推荐文章于 2022-12-14 15:57:20 发布 · 356 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的表格行点击事件处理方法，并展示了如何通过点击特定行来获取该行中的数据。同时提供了JSP页面的具体实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理上就是tr的绑定触发事件。

//点击鼠标触发单行明细显示
$(function(){
 $("#demo tr").bind('click', function() {  
  var node = $(this); 
  var list_RowIdNodes = node.find("input[name='row_id']").val() ;
  //alert(list_RowIdNodes);
  selectrow(list_RowIdNodes);
 });
});

以下为JSP列表的写法。

<tr>
		<td valign="top">
		<div  style="OVERFLOW-Y: auto; OVERFLOW-X: auto; HEIGHT: 200px ; WIDTH: 100%;">
		<form name="pageform" action="<s:url value='/common/commonPage'/>" method="post">
			<page:toolbar name="list" formname="pageform" listJspPage="/pages/admin/management/user/listUser.jsp" beanid="cb"
				toolBarShow="false" border="0" pagesize="5" listTableId="demo" width="100%" styleClass="table_border">
			<page:checkbox id="cb" name="row_id" isNo="true" styleClass="rightcss" titleEvent="onclick='selectBox(this)'" property="row_id" colunmName="Select" />
			<page:colunm id="cb" colunmName="User ID" colunmId="login_name" isOrderBy="true"></page:colunm>
			<page:colunm id="cb" colunmName="User Name" colunmId="user_name" isOrderBy="true"></page:colunm>
			<page:colunm id="cb" colunmName="Position" colunmId="pos_name" isOrderBy="true"></page:colunm>
			<page:colunm id="cb" colunmName="Department" colunmId="dept_name" isOrderBy="true"></page:colunm>
			<page:colunm id="cb" colunmName="User Status" colunmId="user_status_name" isOrderBy="true"></page:colunm>

			</page:toolbar>
		</form>
		</div>
<script language="JavaScript"> 
  anole('demo',1,'#F3F3F3','#F9F9F9','#d9e8fb','#B4D0F8');
</script>
		</td>
	</tr>