I am trying to create a highlighter that enables the user to highlight text inside of one or more table cells and then he/she can do what ever with them. But the first task I need to accomplish in order to achieve that goal is getting all TR elements that were highlighted. In my test webpage I have a table with 3 TR elements, in each are 2 TD elements, and each TD contains some text. The headaches start when I only highlight a TD without highlighting the TR it’s in as well or if I only partially highlight a TR.
If I highlight text in a TD making sure to highlight the TR it’s in as well and continue to highlight text in the next TR element then both highlighted TRs will be shown as children of a TBODY. However, if I only partially highlight the first TR and continue to highlight text in the next TR element, it will show only the first TR. Also if I only highlight a word or two in a TD and not the the TR it’s in, it will show “undefined”.
The problems described above were what I observed when testing my script in Chrome locally on my machine but in jsFiddle it only shows the first TR if the entire table is not highlighted. Please see my script here .
Once you’re inside jsFiddle, please highlight some text in the table then click the blue button. You can then see the highlighted elements in the console log. I will continue to work on solving these problems but any help will be greatly appreciated. Thanks.