如何使用html/jquery为HTML表格中的两种重叠颜色指定不同的颜色？
我正在处理需求,我必须在选中的复选框上突出显示行或列,如下图所示.
现在如何修改代码,以便为重叠单元格分配新颜色而不是绿色或黄色？如下图所示,"杰克逊"应该以不同的颜色突出显示 - 蓝色.
码:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight");
} else {
$(this).closest('tr').removeClass("highlight");
}
});
$('th').click(function () {
// $(this).addClass('selectedcc');
var $currentTable = $(this).closest('table');
var index = $(this).index();
// $currentTable.find('td').removeClass('selectedcc');
$currentTable.find('tr').each(function () {
$(this).find('td').eq(index).toggleClass('selectedcc');
});
});
});
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
.highlight td {background: yellow;}
.selected {
background-color: yellow;
}
.selectedcc {
background-color: greenyellow;
}
</style>
</head>
<body>
<table style="width:60%" id="dataTable">
<tr>
<th><input type="checkbox" name="vehicle" value="Bike">All</th>
<th><input type="checkbox" name="vehicle" value="Bike">Firstname</th>
<th><input type="checkbox" name="vehicle" value="Bike">Lastname</th>
<th><input type="checkbox" name="vehicle" value="Bike">Points</th>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
鉴于tr它将具有类,highlight并且它td本身将具有一类,selectedcc您可以使用单个选择器实现此目的:
.highlight .selectedcc {
background-color: red;
}
另请注意,您可以通过将现有的两个事件处理程序连接到一个来修复jQuery代码中的多个逻辑错误.试试这个:
$(document).ready(function() {
$("input[type='checkbox']").change(function(e) {
var $checkbox = $(this);
if ($checkbox.parent().is('td')) {
$checkbox.closest('tr').toggleClass("highlight", this.checked);
} else {
var index = $(this).parent('th').index();
$(this).closest('table').find('tr').each(function() {
$(this).find('td').eq(index).toggleClass('selectedcc', $checkbox.prop('checked'));
});
}
});
});table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
}
.highlight td {
background: yellow;
}
.selected {
background-color: yellow;
}
.selectedcc {
background-color: greenyellow;
}
.highlight .selectedcc {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:60%" id="dataTable">
<tr>
<th><input type="checkbox" name="vehicle" value="Bike">All</th>
<th><input type="checkbox" name="vehicle" value="Bike">Firstname</th>
<th><input type="checkbox" name="vehicle" value="Bike">Lastname</th>
<th><input type="checkbox" name="vehicle" value="Bike">Points</th>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>