Highlighting a row of table cells using a drop down select menu (different situation)

Question

I'm a beginner so I don't really understand Javascript/jQuery too well.

I have a table with a drop down menu in the first cell.

What I want is to select an item from the drop down menu and highlight the corresponding row. So if I select 3, the ("3") row will be highlighted.

Similar to 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()]);
    });
});

and 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";
    }
}

This is the 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>

can clearly see the option values, what isn't clear is what you want from table rows — charlietfl, Sep 08 '14 at 23:02
you are missing the point, it's not clear what relationship is between option values and table rows. you said you only have one select in first cell — charlietfl, Sep 08 '14 at 23:08
ok, i`m sorry but i think i made myself pretty clear :P, when i select the option 9 from the drop down, i want the row with value 9 to get highlighted like Alexander Varwijk did — , Sep 08 '14 at 23:12

mitomed · Answer 1 · 2014-09-08T21:55:44.640

You should need something like this

$(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');
    });
});

The main part of the code here is to select the row, and for that you can use filter. Using it you don't depend on being the numbers correlative, you basically take the value chosen in the selected list and find the row containing a cell with this value.

Thing to notice is that you should remove any possible highlighted row before highlighting the new one , for that I just select all rows and set to background to none.

Fiddle

i tried your version also, can`t make it work eighter :( – Sep 09 '14 at 11:27 — , Sep 09 '14 at 11:27

score 0 · Accepted Answer · answered Sep 08 '14 at 21:14

0

The following JSFiddle demonstrates the annotated code: 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');
});

answered Sep 08 '14 at 21:14

Alexander Varwijk

2,075
18
21

it looks good but for some strange reason i can`t get it to work, i`m sure i miss something... any idea ? thanks – Sep 09 '14 at 00:23
It works fine (so do the option I put, although is taking any value and not based on being correlative numbers). So any idea on what? what have you done and it's not working? – mitomed Sep 09 '14 at 07:35
@mitomed Well, on JSFiddle works perfect but when i try it on my PC, it does nothing, i`m sure i`m missing something but i don`t know what. :( – Sep 09 '14 at 08:50
@ValiT, but you should paste the exact code you're using now, both solutions (and many other ways) work. Update the question with your code – mitomed Sep 09 '14 at 09:05
@mitomed I used the exact code from both solutions (html/css/js) and none work on my pc but they work perfectly fine in JSFiddle, maybe i have an issue regarding javascript in browsers ? – Sep 09 '14 at 09:18
@ValiT, both should work with the version of jQuery you're using (none of us linked the proper one though, didn't notice you were using 1.11. till now) so that's not the problem. Are you loading it properly. Can you open developer tools (in Chrome, or the equivalent in the browser) and tell us what you see? – mitomed Sep 09 '14 at 09:25
For example, are you referencing properly your script.js where I presume you put your code? can you see it's loaded? – mitomed Sep 09 '14 at 09:27
@ValiT I`m not sure if i`m doing it right but check prints. http://i57.tinypic.com/f2om0n.jpg – Sep 09 '14 at 09:48
@ValiT Can't open that page, restricted in my company. If you're still struggling with it try to update your question (better practice anyway) – mitomed Sep 09 '14 at 10:15
@AlexanderVarwijk i finally made it work ! the answer was here http://stackoverflow.com/questions/4936870/how-do-i-put-codes-from-jsfiddle-net-into-my-website Thank you very much ! – Sep 10 '14 at 10:58
@mitomed got it ! i had to add this $(document).ready(function() { // put your Javascript here }); -.- = ) – Sep 10 '14 at 10:59

Highlighting a row of table cells using a drop down select menu (different situation)

2 Answers2