aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes table row selected issue Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "table row selected issue" Watch "table row selected issue" New topic
Author

table row selected issue

david arnold
Ranch Hand

Joined: Apr 10, 2009
Posts: 133
i would like to achieve this feature, and i am wondering how i could do it?

I have a table that is created dynamically, user click a row A will make it highlight (this i know how to do), if user click row B it will highlight row B and row A not highlight anymore; if user click outside table, row A remains hightlight.

Thanks.

Have a good night!
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61196
    
  66

jQUery UI Selectables


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
CSS
  • Create CSS to have highlight by adding a class to a tr element


  • JavaScript
  • Add onclick handler to table call function


  • Function
  • Remove class if row was previously selected
  • Remember the row that is clicked
  • Add class to row


  • Eric
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66

    Hint (if you decide to re-invent the wheel): if you feel that you need any variables to hold state, you are doing it wrong.
    david arnold
    Ranch Hand

    Joined: Apr 10, 2009
    Posts: 133
    Thank you guys, appreciated!

    Eric, thank you for the clear step.

    Bear, thank you for the link, i will look at that later for sure. I have to finish current one within this week, so i used the way Eric told.
    thanks for the hint as well. I was thinking of using a var to remember the row, what is bad side of doing it? If not remember the row, I will try to loop the row and remove the highlight and add new.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66

    Answer me this, Batman: If you are using classes to mark which rows are highlighted, why do you need a var to keep redundant information?

    Axion: redundant info == fragility.
    Eric Pascarello
    author
    Rancher

    Joined: Nov 08, 2001
    Posts: 15376
        
        6
    Bear Bibeault wrote:Answer me this, Batman: If you are using classes to mark which rows are highlighted, why do you need a var to keep redundant information?

    Axion: redundant info == fragility.


    There are times when remembering state is actually faster than having to navigate the DOM every single time. It is like dialing the number in manually into your phone every time you want to call someone instead of using your speed dial.

    Older browsers on crappy machines with large DOMs can have slow look ups. Not everyone in this world are running on the top of the line processors with modern day browsers. In most cases we are talking about milliseconds in look ups, but if you are coding something like an animation or game milliseconds means lag in the rendering which leads to bad UX. These are edge cases, but there are reasons why we need to do it.

    Right now with the OP's solution of looping the table. It will work with small amount of rows, but if his data gets large, he is going to see lag in older IE browsers. JQuery would solve it, but most people can not add in frameworks that easily into their projects because of politics.

    Eric
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66

    If someone can't use jQuery or Dojo because of politics, there's more problems than performance to worry about. But point taken.
    david arnold
    Ranch Hand

    Joined: Apr 10, 2009
    Posts: 133
    Hi, I got a problem. I tried to loop table and get the row to set highlight, but setAttribute does not work, set background color works, but i want to set class to it so i could get class later to remove.

    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66



    Nit: highlight is one word, so camel-casing it as highLight is weird.
    david arnold
    Ranch Hand

    Joined: Apr 10, 2009
    Posts: 133
    Bear Bibeault wrote:

    Nit: highlight is one word, so camel-casing it as highLight is weird.


    Thank you Bear I tried className, does not work either. The highLight is used as i do for java var name.
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66

    It shouldn't be camel-cased in Java either.

    You'll have to be more specific about "not working". Setting class names works for everyone else. Do you mean the class isn't being set or that it's not having the effect that you want? What debugging steps have you taken?
    Sahil Reddy
    Ranch Hand

    Joined: Jan 24, 2011
    Posts: 145
    @Bear...

    In an era of jquery and jquery UI......At what times learning javascript would be helpful ?? I am against reinventing the wheel......

    Regards
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66

    Using jQuery and jQuery doesn't mean you don't have to learn JavaScript -- in fact, to use these libraries effectively you need to learn quite a bit of JavaScript.

    These libraries help you do things that are tedious and error-prone in JavaScript, in the same way that Java libraries help us do things on the server.

    Someone has already solved the cross-browser problems, it's rather short-sighted to not take advantage of that.
    david arnold
    Ranch Hand

    Joined: Apr 10, 2009
    Posts: 133
    Bear Bibeault wrote:

    You'll have to be more specific about "not working". Setting class names works for everyone else. Do you mean the class isn't being set or that it's not having the effect that you want? What debugging steps have you taken?


    Bear, setting class name works, I just got chance to look at again and found it is caused by other reason, thanks.

    I used simple ALERT and VIEW SOURCE to debug which is not efficient, any other good/popular way you guys could recommend?
    Bear Bibeault
    Author and ninkuma
    Marshal

    Joined: Jan 10, 2002
    Posts: 61196
        
      66

    Every modern browser has a built-in JavaScript debugger except for FireFox. For Firefox download and install Firebug.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: table row selected issue