jQuery与表和鼠标事件

我有一个关于jQuery与表和鼠标事件的问题。jQuery与表和鼠标事件

我的应用程序与春MVC（砖）制作，用JSP

我必须表现出2个表，表头内的第二个表，当我有第二个表的工作，我想使它影响到第一张桌子，而不影响第二张桌子。

我有下面的代码：瓷砖布局

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title><tiles:insertAttribute name="title" ignore="true" /></title> 
</head> 
<body> 
<table id="t1" align="center"> 
    <tr> 
     <td height="30" colspan="2"><tiles:insertAttribute name="header" /> 
     </td> 
    </tr> 
    <tr> 
     <td height="250"><tiles:insertAttribute name="menu" /></td> 
     <td width="350"><tiles:insertAttribute name="body" /></td> 
    </tr> 
    <tr> 
     <td height="30" colspan="2"><tiles:insertAttribute name="footer" /> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

JSP页面，它改变人体

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%> 
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> 
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="<c:url value="/resources/css/style.css"/>"> 
    <script type="text/javascript" src="<c:url value="/resources/js/jquery-1.10.2.js"/>"></script> 
    <script type="text/javascript" src="<c:url value="/resources/js/jquery.tablesorter.js"/>"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('table').tablesorter({ sortList:[[0,0],[1,0]] }); 
      $("tbody tr").mouseenter(function(){ 
       $(this).css("background-color", "#CCC"); 
      }); 
      $("tbody tr").mouseleave(function(){ 
       $(this).css("background-color", "#6E6E6E"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <table id="t2 "class="tablesorter"> 
     <thead> 
      <tr> 
       <th><spring:message code="box.mac" text="default text" /></th> 
       <th><spring:message code="box.model" text="default text" /></th> 
       <th><spring:message code="box.maker" text="default text" /></th> 
       <th><spring:message code="box.serialNumber" text="default text" /></th> 
       <th><spring:message code="box.vendor" text="default text" /></th> 
       <th><spring:message code="box.purchase" text="default text" /></th> 
       <th><spring:message code="box.warranty" text="default text" /></th> 
       <th><spring:message code="box.manufacturer" text="default text" /></th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1234:5678</td> 
       <td>model1</td> 
       <td>maker1</td> 
       <td></td> 
       <td>vendor1</td> 
       <td>26/11/2013</td> 
       <td>26/11/2015</td> 
       <td>manufacturer1</td> 
      </tr> 
      <tr> 
       <td>8765:4321</td> 
       <td>model2</td> 
       <td>maker2</td> 
       <td></td> 
       <td>vendor2</td> 
       <td>01/01/2013</td> 
       <td>01/01/2015</td> 
       <td>manufacturer2</td> 
      </tr> 
      <tr> 
       <td>0000:1111</td> 
       <td>model3</td> 
       <td>maker3</td> 
       <td>1234567890</td> 
       <td>vendor3</td> 
       <td>01/01/2010</td> 
       <td>01/01/2012</td> 
       <td>manufacturer3</td> 
      </tr> 
     </tbody> 
    </table> 
</body> 
</html>

的变化是鼠标事件 - >的mouseenter与行鼠标离开

来源

2013-11-26 Ltcs

我不知道我理解你的问题，但如果你想让jQuery只影响特定的表，请在选择器中使用特定的标识符，即'$（“＃t2”）''和'$（“＃t2 tbody “tr”）' – Robb

谢谢你的回答我已经做到了，但它既不起作用。我已经做出了这个： '$（“＃t2 tbody tr”）。mouseenter（function（）{ – Ltcs

使用jQuery（docs here）中的children()函数仅匹配第一个（外部）表。

此功能的工作方式与CSS >选择器相同，即只选择元素的直接子元素，而不是所有子元素。

看this example fiddle：

内表<tr>元件已经绿色背景由CSS定义
外表<tr>具有由jQuery的定义红色背景;这使用children()，所以它仅影响外部表<tr>元素
注释掉的代码不使用children()，所以它影响所有<tr>元素是#outer-table

后裔在你的情况下，您会可能要使用children()来选择外部<tr>元素并为他们提供所需的事件。

我希望我的例子足够清楚。

来源

2013-11-26 16:39:36

jQuery与表和鼠标事件

回答

相关问题