How can I change CSS style, and focus on element as time goes by?

Question

How can I change background color of <tr> with jquery?
Then how can I focus on <tr> element with jquery?

Javascript

$('tr#5').???????? to change background color of <tr#5> to #666666;
$('tr#5').???????? to focus on element "tr#1"; 

.
.
.
$('tr#5').???????? to change background color of <tr#5> back to #ffffff;
$('tr#10').???????? to change background color of <tr#10> to #666666;
$('tr#10').???????? to focus on element "tr#10";

HTML

<div style="border:solid 1px;height:70px; width:500px; overflow-y:scroll;">
    <table height="100" width="400">
    <tr id="5">
        <td>00:00:05</td>
        <td>hello! 5 secs has past</td>
    </tr>

    <tr id="10">
        <td>00:00:10</td>
        <td>hello! 10 secs has past</td>
    </tr>

    <tr id="10">
        <td>00:00:10</td>
        <td>hello! 10-2 secs has past</td>
    </tr>

    <tr id="11">
        <td>00:00:11</td>
        <td>hello! 11 secs has past</td>
    </tr>

    <tr id="30">
        <td>00:00:30</td>
        <td>hello! 30 secs has past</td>
    </tr>
    </table>
</div>

Try looking at the docs http://api.jquery.com/css/ http://api.jquery.com/focus/ Then provide a more complete example if you still need help — TommyBs, Aug 23 '13 at 12:35
You can focus only on form elements. And if you want to animate a color animate function with jquery color plugin https://github.com/jquery/jquery-color — jcubic, Aug 23 '13 at 12:35
@jcubic I want to have fixed size table with bunch of comments in it. So I did put scroll bar. But it sometimes changes the color of which is at very bottom of the table. So I want it to focus(jump to) it — MKK, Aug 23 '13 at 12:44
To jump to it you need to scroll to it, by changing scrollTop property to be `offset().top` of the element. — jcubic, Aug 23 '13 at 13:03

Phylogenesis · Accepted Answer · 2013-08-23T12:43:35.737

1

Firstly, it's invalid HTML to have non-unique element ids. In fact, before HTML5 it's also invalid to have all-numeric ids. They need to start with a letter followed by any number of letters, numbers, hyphen, colon or period.

That being said, what you're after is the following:

$('#5').css('background-color', '#666666');

I'm not sure what you you're trying to gain from attempting to focus on a non-interactive element, however, but an interactive element can be focused by using the .focus() method.

edited Aug 23 '13 at 12:43

answered Aug 23 '13 at 12:37

Phylogenesis

7,775
19
27

What do you mean by 'focusing' in this instance? Do you mean scrolling the row into view or something else? It doesn't mean anything in this instance as a `tr` is non-interactive. – Phylogenesis Aug 23 '13 at 12:45
I want to have fixed size table with bunch of comments in it. So I did put scroll bar. But it sometimes changes the color of which is at very bottom of the table. So I want it to focus(jump to) it – MKK Aug 23 '13 at 12:46
1

See [this question](http://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page) for hints about how to scroll. Basically you want something like, `$('#element-that-has-scrollbar').scrollBy(0, 50)`. – Phylogenesis Aug 23 '13 at 12:52
I have to scroll it by px? I cannot chose an element to jump to? – MKK Aug 23 '13 at 12:54
Is the scrollbar on the page, or is it shown on an element with `overflow: scroll`? If the first, then `document.scrollTo(0, $('tr:last').offset().top)` will do. – Phylogenesis Aug 23 '13 at 12:58
I've found an error!!! Please check this update http://jsfiddle.net/N2paw/7/ press button and see the result! it won't scroll and it won't higglight correct line – MKK Aug 23 '13 at 13:18
Please pull scroll bar down to the bottom and press button. It should jump to 1st line but it won't! http://jsfiddle.net/N2paw/9/ – MKK Aug 23 '13 at 13:34
Why? You said it should highlight/jump to the bottom row. – Phylogenesis Aug 23 '13 at 13:35
I'm so sorry! I was trying to say any line if it's called. it sometimes can be very bottom or very top. It's not fixed. Is it possible? I think you are getting sooo close. – MKK Aug 23 '13 at 13:38

score 1 · Answer 2 · answered Aug 23 '13 at 12:37

1

You could use timeouts like this:

setTimeout(function() { 
    $('tr#5').css('background', '#666666'); 
}, 5000);
setTimeout(function() { 
    $('tr#5').css('background', '#ffffff'); 
    $('tr#10').css('background', '#666666');
}, 10000);

answered Aug 23 '13 at 12:37

Barry Beerman

303
3
9

You can apply focus to an element with jQuery by calling `$('tr#5').focus()` – Barry Beerman Aug 23 '13 at 12:48
I tried that but it didn't focus:( please look at this http://jsfiddle.net/N2paw/1/ – MKK Aug 23 '13 at 12:53
1

I updated your jsFiddle to apply a color to row 11 and scroll to it. I also used classes instead of ids and applied the button click dynamically. Is that what you were looking for? – Barry Beerman Aug 23 '13 at 13:01
Thanks Can I see the URL? – MKK Aug 23 '13 at 13:07
Anytime! Happy coding. – Barry Beerman Aug 23 '13 at 13:19
You added animation to jump to the line. what if I don't need animation? – MKK Aug 23 '13 at 13:47
Here's the jsFiddle jumping to the line without animation: http://jsfiddle.net/N2paw/15/ – Barry Beerman Aug 23 '13 at 15:33

How can I change CSS style, and focus on element as time goes by?

2 Answers2