Question

我对使用表和鼠标事件的jQuery有疑问。

我的应用程序正在使用spring MVC（tiles），使用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>0123456789</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>9876543210</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>

更改是鼠标事件 - ＆gt; mouseenter和mouseleave with rows

Answer 1

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

此函数的作用类似于CSS >选择器，即只选择元素的直接子元素，而不是所有后代。

查看this example fiddle：

内部表<tr>元素具有CSS
外表<tr>具有jQuery定义的红色背景;这使用children()，因此它仅影响外部表<tr>元素
注释掉代码不使用children()，因此会影响{strong>所有 <tr>元素，这些元素是#outer-table

在您的方案中，您可能希望使用children()选择外部<tr>元素并为其提供所需的事件。

我希望我的榜样足够清楚。

jQuery与表和鼠标事件

1 个答案: