Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Checkbox changes row background color

Status
Not open for further replies.
MrSki

MrSki

Programmer
Dec 13, 2000
66
0
0
US
I have a table where the first column is a checkbox. Each row is dynamically created based on information from a query. When the checkbox is CHECKED I would like the entire row background color to change. I am having problems figuring out how to do that. Any ideas?

Mitch Duszynski
Web Developer
Human Kinetics
PO Box 5076, Champaign, IL 61825
Tel: 217-351-5076 x2474 | Fax: 217-351-2674
mitchd@hkusa.com |
 
Sort by date Sort by votes
The easiest way would be to dynamically assign an id to each table row, and then pass the number of each row to the function via the onclick of the checkbox (the number that corresponds with the row number) Here's an example of what the html/javascript would look like. All you gotta do is get your asp (or whatever SSL you use) to generate the html in this format:
Code: 
<script language=JavaScript>
function changeBackground(num, obj) {
   tableRow = document.getElementById("row" + num);
   tableRow.style.backgroundColor = (obj.checked) ? "#ff0000" : "#ffffff";
}
</script>
<body>
<form name=blahForm>
<table border=1px>
<tr id=row1>
<td><input type=checkbox onclick='changeBackground(1, this)'></td>
<td>CheckBox1</td>
</tr>
<tr id=row2>
<td><input type=checkbox onclick='changeBackground(2, this)'></td>
<td>CheckBox2</td>
</tr>
</table>
</form>
</body>

-kaht

banghead.gif
 
Upvote 0 Downvote
That solved part of my problem. Thanks!

Now I am trying to figure out how to identify the ROW IDs that are dynamically created so that when clicking an ALL checkbox then ALL the rows will turn to a different color. I am currently using the record number as the part if the ROW ID but it is beginning to look like I will need to have a better way to identify the rows for this part of the problem. Any ideas?

Mitch Duszynski
Web Developer
Human Kinetics
PO Box 5076, Champaign, IL 61825
Tel: 217-351-5076 x2474 | Fax: 217-351-2674
mitchd@hkusa.com |
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
148
malpa
malpa
ahmedsa2018
  • Locked
  • Question
How to make function give row that have different value with color red to full row ?
Replies
1
Views
52
feherke
feherke
CoolBreeze007
  • Locked
  • Question
jquery ui radio buttons will not accept selected checkbox
Replies
1
Views
53
Offera
Offera
TheLazyPig
  • Locked
  • Question
Limit rows based on column value
Replies
0
Views
47
TheLazyPig
TheLazyPig
damipera
  • Locked
  • Question
Checkboxes - At Least 1 is Selected? 1
Replies
2
Views
59
damipera
damipera

Part and Inventory Search

Sponsor

Back
Top