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 и MouseLeave рядами

источник

2013-11-26 Ltcs

Я не уверен, что я понимаю ваш вопрос, но если вы хотите, чтобы jQuery влиял только на определенную таблицу, используйте определенные идентификаторы в ваших селекторах, то есть '$ (" # t2 ")' и '$ (" # t2 tbody tr ")' – Robb

Спасибо за ответ Я уже сделал это, но он не работает. Я сделал это: '$ (" # t2 tbody tr "). Mouseenter (function() { $ (this) .css (" background-color "," #CCC "); });' – Ltcs

Используйте функцию children() от jQuery (docs here), чтобы соответствовать только первой (внешней) таблице.

Эта функция работает как селектор CSS >, т.е. выбирает только прямые дочерние элементы элемента, а не все потомки.

Посмотрите на this example fiddle:

внутренняя таблица <tr> элементы зеленый фон определяется CSS
внешняя таблица <tr> имеет красный фон, определенный JQuery; это использует children(), так что это влияет только на внешний стол <tr> элементов
закомментированных код не использует children(), так что это влияет всех<tr> элементов, которые являются потомками #outer-table

в вашем случае, вы будете вероятно, захотите использовать children(), чтобы выбрать внешние элементы <tr> и предоставить им нужные события.

Надеюсь, мой пример был достаточно ясным.

источник

2013-11-26 16:39:36

jQuery с таблицами и событием мыши

ответ

Смежные вопросы