使用下拉选择菜单高亮显示一行表格单元格(不同情况)
Highlighting a row of table cells using a drop down select menu (different situation)
我是一个初学者,所以我对Javascript/jQuery的理解不是很好。
我有一张桌子,第一个单元格里有一个下拉菜单。
我想要的是从下拉菜单中选择一个项目并突出显示相应的行。因此,如果我选择3,("3")行将高亮显示。
类似于JSFiddle1:
$(document).ready(function() {
var color = ['none', 'green', 'yellow', 'red'];
$('table.table1').on('change','select', function() {
$(this).parents('tr').css('background', color[$(':selected', this).index()]);
});
});
和JSFiddle2:
function myJSFunction(element)
{
var row = element.parentNode.parentNode;
switch(element.options[element.selectedIndex].innerHTML)
{
case "Pending":
row.style.background = "#FF7E00";
break;
case "Approved":
row.style.background = "green";
break;
case "Disapproved":
row.style.background = "red";
break;
default:
row.style.background = "white";
}
}
这是HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="script.js"> </script>
</head>
<body>
<div id="wrapper">
<table class="table1">
<tr>
<td><select name="tasks" id="tasks">
<option value="">Tasks</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td class="days">Monday</td>
<td class="days">Tuesday</td>
<td class="days">Wednesday</td>
<td class="days">Thursday</td>
<td class="days">Friday</td>
<td class="days">Saturday</td>
<td class="days">Sunday</td>
</tr>
<tr class="row">
<td> 1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 2 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 3 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 4 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 5 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 6 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 7 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 8 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 9 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr class="row">
<td> 10 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
下面的JSFiddle演示了带注释的代码:http://jsfiddle.net/eQNp5/5/
$("#tasks").change(function () {
// Convert 1-based index to 0 based index
var index = this.value - 1;
// Select all rows in the table
var $rows = $('.row', '.table1');
// Set all rows to no background
$rows.css('background-color', '');
// Change the selected row's color to one
$('.row', '.table1').eq(index).css('background-color', 'yellow');
});
您应该需要这样的
$(document).ready(function () {
$('table.table1').on('change', 'select', function () {
$(".row").css('background', '');
$("td").filter(function () {
return $(this).text() == $('#tasks').val();
}).closest("tr").css('background', 'red');
});
});
这里代码的主要部分是选择行,为此可以使用filter。使用它,你不依赖于数字的相关性,你基本上是在选定的列表中选择值,然后找到包含具有该值的单元格的行。
需要注意的是,在高亮显示新的行之前,您应该删除任何可能高亮显示的行,因为我只选择所有行,并将背景设置为无。
Fiddle
相关文章:
- 我应该使用Ng提交还是点击表格
- CSS表格:从列平移到整个表格宽度
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 拆分文本以每隔n个字符添加一行新行,并注意空格
- 动态插入的表:JQuery未检测到最后一行
- 滚动和表格
- 使用下拉选择菜单高亮显示一行表格单元格
- 如何根据单元格中的值将一行从一个谷歌电子表格移动到另一个
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- 如何在单击时更改表格行的颜色,并在单击另一行时更改回原来的颜色
- 使用下拉选择菜单高亮显示一行表格单元格(不同情况)
- 响应式表格——允许一行占用多行
- 用jQuery给表格中的每一行上色
- 如何为表格中的一行制作红色背景
- Google Apps脚本-使用侧边栏表单向电子表格添加一行
- 用jQuery循环遍历表格-计算每一行的单元格
- 在HTML表格的每一行上添加按钮的最简单方法
- 添加一行到HTML表&它添加成功,但我想导入该表的数据到excel表格如何添加下载按钮
- 禁用html表格单元格中的复选框,在选中同一行的其他单元格中的复选框