click highlight/select instead of checkbox

I have a table with several table rows. Each row has a table data cell that
pertains to a selectable piece of information. Rather than go with the old
style of using checkboxes, I'm wondering if anybody knows of a good script
that does the following:

1) Allows you to click on the table row and the entire table row background
changes colors.
2) Only allows you to have one table row selected (background changed) at a
time, unless you hold down the CTRL key.
3) Allow for another button in a form (like a delete button), that can then
process a separate PHP script that references the selected table rows.

I've found several table row background change scripts that work great, but
I'm not sure how to proceed with processing the selected table rows as I'm a
beginner in JS.

Any help or pointers would be appreciated.

Thanks,
Max

Max Kipness said the following on 3/25/2006 7:32 AM:

I have a table with several table rows. Each row has a table data cell that
pertains to a selectable piece of information. Rather than go with the old
style of using checkboxes, I'm wondering if anybody knows of a good script
that does the following:

Use both. Checkboxes and the table row. The checkboxes will make getting
the data from the browser to the server a lot simpler.

1) Allows you to click on the table row and the entire table row background
changes colors.

2) Only allows you to have one table row selected (background changed) at a
time, unless you hold down the CTRL key.

That CTRL Key is a minor problem.

3) Allow for another button in a form (like a delete button), that can then
process a separate PHP script that references the selected table rows.

Using both then the "Delete" button could simply submit the form to PHP
and let PHP go from there.

I've found several table row background change scripts that work great, but
I'm not sure how to proceed with processing the selected table rows as I'm a
beginner in JS.

Any help or pointers would be appreciated.

<tr onclick="highlight(this)" id="checkbox1TR">
<td><input type="checkbox1" name="something" value="something that
points at the TR it is in"></tr>

And then the function would look something like this:

function highlight(TRRef){
//code to loop through the table
//and change the TR's to some background color

//line here to change TRRef to a second color

//code here to take TRRef.id and parse out
//the name of the corresponding checkbox
//and then check/uncheck it
}

Take a stab at it and post a URL to a sample page where you have tried
it yourself.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

I was actually able to figure out how to get it done without the checkboxes,
which is what I originally intended. With my js script it only allows one
<tr> to be selectable at a time, so I set a js variable based on a ticket
number when hightlighted (I'm creating a trouble ticket app). This allows me
to send this ticket number to a php script. Works well and has the feel of a
desktop app without the checkboxes.

Thanks for your suggestions though.

Max


"Randy Webb" <HikksNotAtHome (AT) aol (DOT) com> wrote

Max Kipness said the following on 3/25/2006 7:32 AM:
I have a table with several table rows. Each row has a table data cell
that
pertains to a selectable piece of information. Rather than go with the
old
style of using checkboxes, I'm wondering if anybody knows of a good
script
that does the following:

Use both. Checkboxes and the table row. The checkboxes will make getting
the data from the browser to the server a lot simpler.

1) Allows you to click on the table row and the entire table row
background
changes colors.



2) Only allows you to have one table row selected (background changed) at
a
time, unless you hold down the CTRL key.

That CTRL Key is a minor problem.

3) Allow for another button in a form (like a delete button), that can
then
process a separate PHP script that references the selected table rows.

Using both then the "Delete" button could simply submit the form to PHP
and let PHP go from there.

I've found several table row background change scripts that work great,
but
I'm not sure how to proceed with processing the selected table rows as
I'm a
beginner in JS.

Any help or pointers would be appreciated.

tr onclick="highlight(this)" id="checkbox1TR"
td><input type="checkbox1" name="something" value="something that points
at the TR it is in"></tr

And then the function would look something like this:

function highlight(TRRef){
//code to loop through the table
//and change the TR's to some background color

//line here to change TRRef to a second color

//code here to take TRRef.id and parse out
//the name of the corresponding checkbox
//and then check/uncheck it
}

Take a stab at it and post a URL to a sample page where you have tried it
yourself.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices -
http://www.JavascriptToolbox.com/bestpractices/

Max Kipness said the following on 3/27/2006 11:52 AM:

I was actually able to figure out how to get it done without the checkboxes,
which is what I originally intended. With my js script it only allows one
tr> to be selectable at a time, so I set a js variable based on a ticket
number when hightlighted (I'm creating a trouble ticket app). This allows me
to send this ticket number to a php script. Works well and has the feel of a
desktop app without the checkboxes.

Set a Global Variable that tracks the Control Key.

document.onkeydown = checkKey;
document.onkeyup = release;
var controlKey = false;
function release(){
controlKey = false;
}
function checkKey( e )
{
var k = e || window.event;
if (k.keyCode){keycode=k.keyCode;}else if(k.which){keycode=k.which;}
if (keycode == 17){controlKey = true}
}

function hiliteRows(){
if(!controlKey){
//reset all backgrounds
}
//set current row background
}

Then, you can select multiple rows.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/