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與表和鼠標事件

回答

相關問題