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.
Hi @liagapi555, couldn’t you just specifically iterate over all tr elements and check which is intersecting? Something like this:
var table = document.querySelector('table')
var rows = table.querySelectorAll('tr')
table.addEventListener('mouseup', function () {
var range = window.getSelection().getRangeAt(0)
rows.forEach(function (row) {
row.classList.toggle('selected', range.intersectsNode(row))
})
})
Hi, Thanks for your reply. The issue with using a class in this situation is that it greatly limits the possibilities of what can be done with the selected text. For instance in my example there are only 3 TR elements in the table but imagine if there are 10 or more. If the user wants to select a row give its text one color then select another row and give it’s text another color. In that scenario it wll not be possible to use just one class. That’s while I wanted to capture all the highlighted TR. Then I can traverse through their children and surround their text node with span tags. That way each span element can be given styles without affecting text in other selected TR.
Well that class was just for demonstration purposes really, you can of course do anything with the selected rows. For example, to get an array of the selected rows you can use filter():
var table = document.querySelector('table')
var rows = table.querySelectorAll('tr')
table.addEventListener('mouseup', function () {
var range = window.getSelection().getRangeAt(0)
var selected = Array.from(rows).filter(function (row) {
return range.intersectsNode(row)
})
console.log(selected)
})