Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 476
  • Last Modified:

How to highlight selected line with checkbox?

Hi,
I have a greasemonkey script and I am modifying a web page. I managed to put checkboxes on the page for each pattern that matches.

Now, I want to highlight the entire line when the checkbox is selected.

Can you please let me know how I can make it?

Thanks,

0
Tolgar
Asked:
Tolgar
  • 21
  • 14
1 Solution
 
leakim971PluritechnicianCommented:
We may start with your gm script and some HTML page
0
 
TolgarAuthor Commented:
I attached the GM script to the attachment. You can focus on the do_checkbox function. This is where I create the checkboxes. Lines 42 and 51 are the most importantpart in my question.

Thanks,
myScript.user.txt
0
 
leakim971PluritechnicianCommented:
Once you create all the checkboxes you may run something like this :


var tables = document.getElementsByTagName("table");
		for(var i=0;i<tables.length;i++) {
			var inputs = tables[i].getElementsByTagName("input")
			for(var j=0;j<inputs.length;j++) {
				if( inputs[j].type=="checkbox" && inputs[j].checked ) {
					var obj = inputs[j].parentNode;
					while( obj.tagName.toLowerCase() != "tr" ) {
						obj = obj.parentNode;
					}
					obj.style.backgroundColor = "red";
				}
			}
		}

Open in new window

0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
TolgarAuthor Commented:
Thank  for your quick response.

I embedded your code into my script. It highlights the background of the selected line only if I refresh the page after the checking the box. Is there a way to trigger it without refreshing the page?

Thanks,
0
 
leakim971PluritechnicianCommented:
You use it like this
 window.addEventListener("load", function() { do_checkbox();Now_Set_Rows_BackGround(); }, false);

Open in new window

?
0
 
TolgarAuthor Commented:
Right but checkboxes are created when the page is loaded. However, highlighting should be done without reloading the page. Is there another eventListener that can trigger highlighting without reloading the page?

Thanks,
0
 
TolgarAuthor Commented:
Btw, I already tried click and onclick...
0
 
leakim971PluritechnicianCommented:
> do_checkbox();Now_Set_Rows_BackGround();

and it don't work ??? Once your textboxes are in the page it should work. Try a timer too for testing purpose :  do_checkbox();setTimeout("Now_Set_Rows_BackGround()", 3000);
0
 
leakim971PluritechnicianCommented:
Do you have a simple page to test the script ?
0
 
TolgarAuthor Commented:
I put the following line and it does not work:

window.addEventListener("load", function() { do_checkbox(); setTimeout("do_highlight()", 3000) }, false);

Open in new window



Waiting for your reply.

Thanks
0
 
leakim971PluritechnicianCommented:
I want to a page or a live link to test your script
0
 
TolgarAuthor Commented:
This error would be useful from the error console in FireFox:

Error: do_highlight is not defined


0
 
TolgarAuthor Commented:
But do_highlight function was defined and it works when I refresh the page.
0
 
leakim971PluritechnicianCommented:
do you've frame in your page ? You did not limit the namespace
0
 
TolgarAuthor Commented:
This is the general structure of the page. However, for some reason when I open up the page from a local drive on my machine, the GM script is not activated. I think you need to put it on a server. Or maybe there is a more intelligent way of doing it.

<HTML>
<BODY>
  <TABLE BORDER=0 CELLPADDING=1>
    <TR>
      <TH></TH>
      <TH></TH>
      <TH>aaaaaaa</TH>
      <TH NOWRAP>aaaaaaaaaaaa&nbsp;(s)</TH>
      <TH ALIGN=RIGHT NOWRAP>aaaaaaaaaaaa</TH>

      <TH ALIGN=RIGHT NOWRAP>aaaaaaaaaa</TH>
      <TH ALIGN=RIGHT>#</TH>
      <TH ALIGN=LEFT>aaaaaaaaaaaaaaa</TH>
      <TH ALIGN=LEFT NOWRAP>aaaaaaaaa&nbsp;(s)</TH>
    </TR>
      <TR><TD ALIGN=CENTER >FI</TD>

        <TD><FONT SIZE=1></FONT></TD>
        <TD ALIGN=RIGHT NOWRAP><</TD>
        <TD ALIGN=RIGHT><font color=000000>aaaaaaaaaaa</font></TD>
        <TD ALIGN=RIGHT>aaaaaaaaaa</TD>
        <TD ALIGN=RIGHT>aaaaaaaaaa</TD>
        <TD NOWRAP>aaaaaaaaaaaaaaaaaaa</TD>

        <TD NOWRAP>aaaaaaaaaaaaaaaaaa</TD>
      </TR>
      <TR><TD ALIGN=CENTER >O</TD>
        <TD><FONT SIZE=1>1</FONT></TD>
        <TD ALIGN=RIGHT NOWRAP></TD>
        <TD ALIGN=RIGHT><font color=000000>aaaaaaaaaa</font></TD>

        <TD ALIGN=RIGHT>aaaaaaaaaa</TD>
        <TD ALIGN=RIGHT>1</TD>
        <TD NOWRAP><STRONG>aaaaaaaaaaaaa</STRONG> <font color=green>aaaaaa</font> </TD>
        <TD NOWRAP>aaaaaaaaa</TD>
      </TR>
</TABLE>
</BODY>
</HTML>

Open in new window


And here is the part that I add to my initial GM script.

function do_highlight() {
	mycave.log('CALL do_highlight');
	var tables = document.getElementsByTagName("table");
	mycave.log('TABLES ==>' + tables);
		for(var i=0;i<tables.length;i++) {
			var inputs = tables[i].getElementsByTagName("input");
			mycave.log('INPUTS ==>' + inputs);
			for(var j=0;j<inputs.length;j++) {
				if( inputs[j].type=="checkbox" && inputs[j].checked ) {
					var obj = inputs[j].parentNode;
					mycave.log('OBJ ==>' + obj);
					while( obj.tagName.toLowerCase() != "tr" ) {
						obj = obj.parentNode;
						mycave.log('OBJ.PARENTNODE ==>' + obj);
					}
					obj.style.backgroundColor = "red";
				}
			}
		}
	};

Open in new window



I call this function on line 69 in the initial code. I show a snapshot of this part.

	do_replace_html_itJob(window.document, _elementJob, _regexpJob, _repstrJob);
    }
		// Do the replacement of _regexp with _repstr. Also replace the checkbox ID wth the unique ID.
	do_restore_checkboxState("mybox");
	do_restore_checkboxState("myJobbox");
	do_highlight();

Open in new window


And here is the last part:

window.addEventListener("load", function() { do_nameAttr_script() }, false);
		
window.addEventListener("load", function() { do_cosmetic_script() }, false);

window.addEventListener("load", function() { do_AddImage_sbcheck_script() }, false);

window.addEventListener("load", function() { do_checkbox(); setTimeout("do_highlight()", 3000); }, false);

Open in new window



Thanks,
0
 
TolgarAuthor Commented:
Yes  I have frames on the page. I just sent you the frame that I create checkboxes.

I have namespace as in this form.

// @namespace       myWork

Thanks,
0
 
TolgarAuthor Commented:
Any idea??
0
 
leakim971PluritechnicianCommented:
I tried with the HTML you give and get nothing (refrshing the page or not), I need to check what your code do currently to create a page
0
 
TolgarAuthor Commented:
The code generates the checkboxes when there is <TR><TD or <tt>\n#

Then it keeps the state of the checkboxes by using cookies.

Also it renames some links as ">>>myruntests Report" and in addition to that it generates links with a specific name as ">>>Check Report"

And it add some images next to these links. Like pass of fail image.

Thanks,



0
 
TolgarAuthor Commented:
If you can create a simple page that has

<TR><TD>

and/or
<tt>
# SOME TEXT

Then you will be able to see the behavior. But for some reason GM script does not work when the page on the local drive.

Thanks,
0
 
TolgarAuthor Commented:
I am waiting for your reply.

Thanks,
0
 
leakim971PluritechnicianCommented:
No problem, I'm working on it!
0
 
TolgarAuthor Commented:
Thank you !!!

Btw, there two functions in the beginning of my code which I have never called before:

reloadUpperFrame: function () {
        mycave.findFrame('top_right_frame').document.location.reload();
    },

    reloadLowerFrames: function () {
        mycave.findFrame('middle_frame').document.location.reload();
    }

And the frame that I would like to reload should be the "middle_frame". So I tried to call these functions "function do_checkbox()" and/or "function setCookie(c_name)" with no luck. Maybe i am doing something wrong. Can you please focus on this? This looks like a possible solution.

Thanks,
0
 
leakim971PluritechnicianCommented:
Remove the do_highlight function everywhere and replace your current do_restore_checkboxState function with this one :

//This function is to restore the state of each checkbox
		function do_restore_checkboxState(checkboxName) {
			var checkboxes = document.getElementsByName(checkboxName);
			for(var i=0;i<checkboxes.length;i++) {
				var state = getCookie( checkboxes[i].id )
				if( state != null ) {
					if(state == "1") {
						checkboxes[i].checked = true;
						var obj = checkboxes[i].parentNode;
						while( obj && (obj.tagName.toLowerCase() != "tr") ) {
							obj = obj.parentNode;
						}
						if(obj && (obj.tagName.toLowerCase() == "tr")) obj.style.backgroundColor = "red";
					}
				}
			}
		}

Open in new window

0
 
TolgarAuthor Commented:
Well I tried it but did not work again. In addition to that, the restore checkbox state function for some cases does not work correctly anymore.

0
 
leakim971PluritechnicianCommented:
And with the following ?
<html>
<head>
<title></title>
</head>
<body>
<table border="0">
	<tr><td>CONTENT ROW 1</td></tr>
	<tr><td>CONTENT ROW 2</td></tr>
</table>
</body>
</html>

Open in new window

0
 
TolgarAuthor Commented:
I saved your html code as exampleCode.html in my desktop.

Changed the GM script to include anything with

// @include         *

Open in new window


Uplload the script.

Opened it in FireFox.

Even the checkboxes did not show up.

Even I copy my hmtl page on my desktop the script does not work as I explained in my previous scripts. But it works when the page is on the server where the adress starts with something http.

How did you test this script by using the html you sent me?

Thanks,
0
 
leakim971PluritechnicianCommented:
Always with a web server
0
 
TolgarAuthor Commented:
Ok. So I can't test your html code on my side. But even it works for it it does not work for original page.

The reason can be the frames on the page. Do you have any idea regarding this?

Thanks,
0
 
leakim971PluritechnicianCommented:
currently if the code is able to check or not the checkboxes, it should be able to highlight the row if the checkboxes are in rows.

>How did you test this script by using the html you sent me?
Yes :
leakim971-420723.flv
0
 
TolgarAuthor Commented:
But in this video, the line is bot highlighted as  soon as you check the box. You go to yahoo page then come back to this page and it is highlighted.

This is what happens on my machine as well. But I want it to be highlighted as soon as you check the box.

Thanks,

0
 
leakim971PluritechnicianCommented:
I apologies
A new setCookie function (it work fine for me) :

function setCookie(c_name) {
	    var date = new Date();
		// The cookie will be active for 7 days
		date.setTime(date.getTime()+(7*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();

		var checkbox = document.getElementById(c_name);
		var c = c_name + "=" + (checkbox.checked?"1":"0") + ";expires="+expires+"; path=/;";
		document.cookie = c;

		var obj = checkbox.parentNode;
		while( obj && (obj.tagName.toLowerCase() != "tr") ) {
			obj = obj.parentNode;
		}
		if(obj && (obj.tagName.toLowerCase() == "tr")) obj.style.backgroundColor = (checkbox.checked)?"red":"white";
	}

Open in new window

0
 
TolgarAuthor Commented:
It works perfect for the <TR><TD> matches however, it does not work the case for <tt>\n# matches.

I am sending you an example page for this case:

<html>
<head>
<title>
SOMETEXT
</title>
</head>
<body bgcolor="white">
<form>
SOMETEXT
<a name="Top">&nbsp;</a>
</form>
<tt>SOMETEXT <a href="SOMELINK">SOMETEXT</a> SOMETEXT </tt><br>
<tt>
# SOMETEXT (SOMETEXT)    SOMETEXT     SOMETEXT
</tt>
<br><tt>
# SOMETEXT (SOMETEXT)    SOMETEXT     SOMETEXT 
</tt>
<br><tt>
SOMETEXT<a href='SOMETEXT'  title='SOMETEXT'>SOMETEXT</a>

</tt>
<br>
<p>
</body>
</html>

Open in new window


I really appreciate for your help
0
 
TolgarAuthor Commented:
Do you have any idea why it does not work or how it can be fixed?

Thanks,
0
 
TolgarAuthor Commented:
I am closing this because I have opened a new question for the rest of my question.

Thank you so much for your help!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 21
  • 14
Tackle projects and never again get stuck behind a technical roadblock.
Join Now