• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

table row selected issue

 
Ranch Hand
Posts: 133
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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!
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
jQUery UI Selectables
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Posts: 133
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Posts: 15385
    6
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Likes 1
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Posts: 133
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator


    Nit: highlight is one word, so camel-casing it as highLight is weird.
     
    david arnold
    Ranch Hand
    Posts: 133
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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?
     
    Ranch Hand
    Posts: 145
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    @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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    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
    Posts: 133
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator

    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
    Sheriff
    Posts: 67746
    173
    Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
    • Mark post as helpful
    • send pies
      Number of slices to send:
      Optional 'thank-you' note:
    • Quote
    • Report post to moderator
    Every modern browser has a built-in JavaScript debugger except for FireFox. For Firefox download and install Firebug.
     
    The world's cheapest jedi mind trick: "Aw c'mon, why not read this tiny ad?"
    a bit of art, as a gift, the permaculture playing cards
    https://gardener-gift.com
    reply
      Bookmark Topic Watch Topic
    • New Topic