Selecting a <td> within a table, li, ul and div to change the background colors

I am trying to access the following td 'dayContent' and change the background color to #a43802. I have tried several ways with no success.

This td exists within a tr and table, which is surrounded by a div, a li, a ul and then another div. :(

The content for the dayContent is generated from my backend code. Currently, if you mouseover the Column, the header background changes color which is the proper behavior.

However, I haven't been able to select the 'individual' .dayContent items to change the background color, instead it changes ALL the .dayContent background colors in the column.

The desired effect is for the column header's background color to change and the current .dayContent that is mousedover should also change the background color. I've tried accessing the <p> but it does the same thing and changes the background color to all the <p> in the column.

Soo....can anyone point me in the right direction? My brain hurts.

JQUERY CODE:

        $('#co开发者_运维技巧lumnDay1').css('cursor', 'pointer');
        $('#columnDay1').mouseover(function () {
            $('td.calendarHeader', this).css("background-color", "#a43802");
        });
        $('#columnDay1').mouseout(function () {
            $('td.calendarHeader', this).css("background-color", "#37322e");
        });
        $('#testSpot').mouseover(function () {
            $('td.dayContent', this).css("background-color", "#a43802");
        });
        $('#testSpot').mouseout(function () {
            $('td.dayContent', this).css("background-color", "White");
        });

HTML CODE:

    <tr>
        <td class='dayContentImage' height='174' Width='187' BACKGROUND='/Images/day1_10am.jpg'><p><span class='dayContentImageDay'>10</span>AM</p></td>
    </tr>
    <tr>
        <td class='dayContent'><p id='testSpot'><span class='dayContentDay'>6</span>PM<br />Content</p></td>
    </tr>
    <tr>
        <td class='dayContent'><p id='testSpot'><span class='dayContentDay'>6</span>PM<br />Content</p></td>
    </tr>
    <tr>
        <td class='dayContentImage' height='173' Width='187' BACKGROUND='/Images/day1_7pm.jpg'><p><span class='dayContentImageDay'>7</span>PM</p></td>
    </tr>
    <tr>
        <td class='dayContent'><p id='testSpot'><span class='dayContentDay'>9</span>PM<br />Content</p></td>
    </tr>

Thanks.

Lets start with defining some of the problems you are having with your code.

1) DOM elements must have a unique ID. You are using #testSpot here a few times, and that's bad and will make your code behave weird.

2) When doing this: $('td.dayContent', this).css("background-color", "#a43802"); you are searching for a <td> with a class of dayContent, in the context of this object!. this in this event is your #testSpot, which doesn't contain a <td> with a class named dayContent.

a solution would be (after fixing the use of duplicate IDs - revert to classes only and don't base on IDs!) to use something like this inside the mouseover events: $(this).parent("td.dayContent").css("background-color", "#a43802");.

But, this is a bad work-around, and this effect can be achieved with a basic jQuery and CSS classes. What you can do, and is best practice for this matter, is add a class named hover to elements when the mouse is over and remove it when the mouse is out, and then simply add CSS to change the background-color of such elements. You can do it like this:

$("td.dayContent").hover(function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover"); });

And then you could just style it through CSS (which is the right place for design and not in JS!) like this:

td.dayContent { background-color: white; } // default color
td.dayContent.hover { background-color: green; } // color when the td is being hovered.

$('#testSpot').mouseover(function () {
    $(this).parent().css("background-color", "#a43802");
});
$('#testSpot').mouseout(function () {
    $(this).parent().css("background-color", "White");
});

your #testSpot parent is the td you're trying to access I think, if not a direct parent then .closest('.dayContent') instead of .parent() should do too

The id attribute specifies a unique id for an HTML element, it must be unique within the HTML document. 1) So change he testSpot from id to class.

2) You are searching the td inside the testSpot element, that is not right, instead try $(this).parent('td') which finds the parent td of the testSpot element.

    $('.testSpot').mouseover(function () {
        $(this).parent('td').css("background-color", "#a43802");
    });
    $('.testSpot').mouseout(function () {
        $(this).parent('td').css("background-color", "White");
    });