Looking for a method to obtain a handle to the DOM container element of selected text

HCL Domino Domino Forum
1

I will be posting this question on a few js forums as well. I am using the FindOnPage script from www.dynamicdrive.com to create a search function in a web form. I am searching an html table created on the form by an agent. This all works correctly. What I would like to do is, instead of (or along with) highlighting the text found, highlight the table row that the text is located in. Each table row has a unique id attached to it. Has anyone here had experience of locating text within a page and then obtaining it’s container element in the DOM? The DOM object TextRange does not have properties to reference the parent of the selected range.

The IE portion and non-browser-specific portions of the code I am using are pasted below:

// EXPLORER-SPECIFIC CODE revised 5/21/03

if (TRange!=null) {

TestRange=window.document.body.createTextRange();

if (dupeRange.inRange(TestRange)) {

TRange.collapse(false);

strFound=TRange.findText(str);

if (strFound) {

    //the following line added by Mike and Susan Keenan, 7 June 2003

    window.document.body.scrollTop = window.document.body.scrollTop + TRange.offsetTop;

    TRange.select();

    }

}

else {

 TRange=window.document.body.createTextRange();

 TRange.collapse(false);

 strFound=TRange.findText(str);

 if (strFound) {

    //the following line added by Mike and Susan Keenan, 7 June 2003

    window.document.body.scrollTop = TRange.offsetTop;

    TRange.select();

    }

}

}

if (TRange==null || strFound==0) {

TRange=window.document.body.createTextRange();

dupeRange = TRange.duplicate();

strFound=TRange.findText(str);

if (strFound) {

    //the following line added by Mike and Susan Keenan, 7 June 2003

    window.document.body.scrollTop = TRange.offsetTop;

    TRange.select();

    }

}

}

if (!strFound){

$(messagesinner).innerHTML = “String '”+str+“’ not found!”;

showDiv(“messages”);

return false;

}

//get the id property of the table row that is currently selected

//var newrange = document.selection.createTextRange

//What I need is a way to get a handle to the cell that contains the selected text. I can then get a handle to the row.

var newid = $(row).id;

lastsearch = newid;

togglerowselection(lastsearch); //turn on the new row

2

Subject: SOLVED: Looking for a method to obtain a handle to the DOM container element of selected text

In the end, I scrapped most of this function and wrote the following:

function togglerowselection(row){

	var tableRow = document.getElementById("" + row + ""); //get element by id (tablerow)

	if(tableRow.className == "rowover"){

		tableRow.className = "rowclick";

	}else if (tableRow.className == "rowclick"){

		tableRow.className = "rowoff";

	}

// window.alert(tableRow.className);

}

function showDiv(container){

$(container).style.display = 'inline';

if (container =="helpouter" || container == "newfeaturesouter"){

	if ($("container") != null)

		$("container").style.display = 'none';

	if ($("messages") != null)			

		$("messages").style.display = 'none';

}

}