使用下拉选择菜单突出显示一行表格单元格（不同情况）答案

【问题标题】：Highlighting a row of table cells using a drop down select menu (different situation)使用下拉选择菜单突出显示一行表格单元格（不同情况）
【发布时间】：2014-11-02 04:07:14
【问题描述】：

我是初学者，所以我不太了解 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>

【问题讨论】：

3 row、索引或文本值或其他是什么？
@charlietfl 它是
可以清楚地看到选项值，不清楚的是你想要从表格行中得到什么
@charlietfl 正如我之前所说的那样突出显示:)
您没有抓住重点，不清楚选项值和表行之间的关系。你说你在第一个单元格中只有一个选择

标签： javascript jquery select html-table row

【解决方案1】：

下面的 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');
});

【讨论】：

它看起来不错，但出于某种奇怪的原因，我可以t get it to work, im 确定我错过了什么……有什么想法吗？谢谢
它工作正常（我提出的选项也是如此，尽管它采用任何值而不是基于相关数字）。那么有什么想法吗？你做了什么，但它不起作用？
@mitomed 好吧，在 JSFiddle 上运行完美，但是当我在我的 PC 上尝试它时，它什么也没做，我m sure im 缺少一些东西，但我不知道是什么。 :(
@ValiT，但是您应该粘贴您现在使用的确切代码，这两种解决方案（以及许多其他方式）都有效。用您的代码更新问题
@mitomed 我使用了两种解决方案（html/css/js）中的确切代码，但在我的电脑上都没有，但它们在 JSFiddle 中运行良好，也许我对浏览器中的 javascript 有疑问？

【解决方案2】：

你应该需要这样的东西

$(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

【讨论】：

我也试过你的版本，不能让它工作八次:(