如何在两个不同表格的同一行上应用悬停?
How to apply hover on the same row on two different tables?
我的 html 中有两个不同的表,假设它们都具有相同的数据 collection - 这意味着 collection 中的行代表相同的 object =].我想应用以下功能:当我将鼠标悬停在 Table 1 中的第 N 行时,它会突出显示 Table 1 中的第 N 行和 Table 2 中的同一行。我能够为了完成它,但是我不得不操纵我的 collection - 我在 object 上添加了 .hover 属性,并将其视为鼠标进入和鼠标离开时的标志,并添加了特定样式根据。但是,我知道不应该这样做——因为它打破了双向数据绑定规则。
关于如何在不操纵我的数据的情况下实现这一目标的任何想法?
您可以通过使用少量 jQuery:
来实现
var tr_class;
$('.table1 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table2 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table1 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table1 ' + tr_class).removeClass('highlightBg');
});
你的 table 行都需要有一个 class 像行号一样,例如计算它们:
<tr class='1'>...</tr>
<tr class='2'>...</tr>
.highlightBg 定义高亮状态的背景颜色,在本例中 .table1 和 .table2 是 tables 的 classes .
认为应该完成工作。
这是你的意思吗want.but我用了位jquery和this.hope这对你有帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div.tableone{
margin:50px;
}
div.tabletwo{
margin: 50px;
}
table{
border:1px solid black;
}
table tr th{
width: 200px;
}
table tr td{
text-align: center;
}
.classOne{
background-color: orange;
color: white;
}
</style>
<body>
<h1>table one</h1>
<div class="tableone">
<table border="2">
<thead>
<tr class="trone">
<th>one</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataone</td>
<td>datetwo</td>
</tr>
</tbody>
</table>
</div>
<h1>table two</h1>
<div class="tabletwo">
<table border="2">
<thead>
<tr class="trtwo">
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>datatwo</td>
<td>datethree</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".trone").mouseenter(function(){
$(this).addClass("classOne");
$(".trtwo").addClass("classOne");
});
$(".trone").mouseleave(function(){
$(this).removeClass("classOne");
$(".trtwo").removeClass("classOne");
});
$(".trtwo").mouseenter(function(){
$(this).addClass("classOne");
$(".trone").addClass("classOne");
});
$(".trtwo").mouseleave(function(){
$(this).removeClass("classOne");
$(".trone").removeClass("classOne");
});
});
</script>
</body>
</html>
不使用 jQuery 的问题解决方案如下:
const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];
const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");
for (let i = 0; i < table1Rows.length; i++) {
const table1Row = table1Rows[i];
const table2Row = table2Rows[i];
table1Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table1Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
table2Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table2Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
}
在这里您可以看到实际的解决方案:JSFiddle
我的 html 中有两个不同的表,假设它们都具有相同的数据 collection - 这意味着 collection 中的行代表相同的 object =].我想应用以下功能:当我将鼠标悬停在 Table 1 中的第 N 行时,它会突出显示 Table 1 中的第 N 行和 Table 2 中的同一行。我能够为了完成它,但是我不得不操纵我的 collection - 我在 object 上添加了 .hover 属性,并将其视为鼠标进入和鼠标离开时的标志,并添加了特定样式根据。但是,我知道不应该这样做——因为它打破了双向数据绑定规则。
关于如何在不操纵我的数据的情况下实现这一目标的任何想法?
您可以通过使用少量 jQuery:
来实现var tr_class;
$('.table1 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table2 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table1 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table1 ' + tr_class).removeClass('highlightBg');
});
你的 table 行都需要有一个 class 像行号一样,例如计算它们:
<tr class='1'>...</tr>
<tr class='2'>...</tr>
.highlightBg 定义高亮状态的背景颜色,在本例中 .table1 和 .table2 是 tables 的 classes .
认为应该完成工作。
这是你的意思吗want.but我用了位jquery和this.hope这对你有帮助。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div.tableone{
margin:50px;
}
div.tabletwo{
margin: 50px;
}
table{
border:1px solid black;
}
table tr th{
width: 200px;
}
table tr td{
text-align: center;
}
.classOne{
background-color: orange;
color: white;
}
</style>
<body>
<h1>table one</h1>
<div class="tableone">
<table border="2">
<thead>
<tr class="trone">
<th>one</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataone</td>
<td>datetwo</td>
</tr>
</tbody>
</table>
</div>
<h1>table two</h1>
<div class="tabletwo">
<table border="2">
<thead>
<tr class="trtwo">
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>datatwo</td>
<td>datethree</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".trone").mouseenter(function(){
$(this).addClass("classOne");
$(".trtwo").addClass("classOne");
});
$(".trone").mouseleave(function(){
$(this).removeClass("classOne");
$(".trtwo").removeClass("classOne");
});
$(".trtwo").mouseenter(function(){
$(this).addClass("classOne");
$(".trone").addClass("classOne");
});
$(".trtwo").mouseleave(function(){
$(this).removeClass("classOne");
$(".trone").removeClass("classOne");
});
});
</script>
</body>
</html>
不使用 jQuery 的问题解决方案如下:
const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];
const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");
for (let i = 0; i < table1Rows.length; i++) {
const table1Row = table1Rows[i];
const table2Row = table2Rows[i];
table1Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table1Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
table2Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table2Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
}
在这里您可以看到实际的解决方案:JSFiddle