SetToLoki Posted June 21, 2009 Share Posted June 21, 2009 Hi I am very new to javascritp and just playing around with a few things. I am looking for a way to change the background style of a table row element I have a table that is dynamically created using PHP at the end of each row inside a <td> in the table one per row there is an image. When this image is clicked I would like the background colour of the entire row that image is on to change to #CCC also if another image is clicked in the table I want to revert the background colour of the previous row back to blank and select the new row. A sort of highlight per row that you select. only being able to select one row at a time. thanks in advance for any help. Edit: if it is not too much more code though I have a feeling it is some <td>'s in the row I want selected might be empty if this is the case I wouldn't like the background of that td to change, or change the <tr> background and change empty <td>'s to the table backgrounds colour. But as I said this isn't really that important as I imagine it is more than a couple of lines of code extra Link to comment https://forums.phpfreaks.com/topic/163153-change-background-of-a/ Share on other sites More sharing options...
corbin Posted June 21, 2009 Share Posted June 21, 2009 I usually just give hints and not finished code, but I was kind of curious as to how to do this my self.... This is the most elegant thing I could think of: <html> <head> <title>Color Changer</title> <script language="javascript"> <!-- function ChangeColor(elem) { var theTr = elem.parentNode.parentNode; var allTrs = theTr.parentNode.childNodes; for(var i = 0; i < allTrs.length; ++i) { allTrs[i].bgColor = ""; } theTr.bgColor = "red"; } //--> </script> </head> <body> <table> <tr> <td> <div style="border-width: 5px; border-color: black; border-style: solid; width: 100px; height: 100px;" onclick="ChangeColor(this);"> Click this. </div> </td> </tr> <tr> <td> <div style="border-width: 5px; border-color: black; border-style: solid; width: 100px; height: 100px;" onclick="ChangeColor(this);"> Click this. </div> </td> </tr> </table> </body> (You would of course want to replace the divs with imgs.) Link to comment https://forums.phpfreaks.com/topic/163153-change-background-of-a/#findComment-860823 Share on other sites More sharing options...
SetToLoki Posted June 21, 2009 Author Share Posted June 21, 2009 I usually just give hints and not finished code, but I was kind of curious as to how to do this my self.... This is the most elegant thing I could think of: <html> <head> <title>Color Changer</title> <script language="javascript"> <!-- function ChangeColor(elem) { var theTr = elem.parentNode.parentNode; var allTrs = theTr.parentNode.childNodes; for(var i = 0; i < allTrs.length; ++i) { allTrs[i].bgColor = ""; } theTr.bgColor = "red"; } //--> </script> </head> <body> <table> <tr> <td> <div style="border-width: 5px; border-color: black; border-style: solid; width: 100px; height: 100px;" onclick="ChangeColor(this);"> Click this. </div> </td> </tr> <tr> <td> <div style="border-width: 5px; border-color: black; border-style: solid; width: 100px; height: 100px;" onclick="ChangeColor(this);"> Click this. </div> </td> </tr> </table> </body> (You would of course want to replace the divs with imgs.) This works perfectly thankyou muchly, will spend a few hours looking through your code to see how you did what you did now if you are interested I used your code here Link to comment https://forums.phpfreaks.com/topic/163153-change-background-of-a/#findComment-860829 Share on other sites More sharing options...
corbin Posted June 21, 2009 Share Posted June 21, 2009 Well, what it does is pretty simple so I can just explain it ;p. onclick="ChangeColor(this);" Fires off the ChangeColor function, and "this" will hold a reference to the DOM object of the div (or in your case an image). So, in ChangeColor, elem is just a reference to the DOM object of the element that was clicked on. Now we have the code inside of the function: function ChangeColor(elem) { var theTr = elem.parentNode.parentNode; var allTrs = theTr.parentNode.childNodes; for(var i = 0; i < allTrs.length; ++i) { allTrs.bgColor = ""; } theTr.bgColor = "red"; } theTr is just set to the parent of the parent of the element. Think about a table's structure. A table can possibly look like: table table header row column (td) column (td) .... end row end table header table body row column (td) column (td) .... end row end table body end table Now, I went ahead and assumed you wouldn't use a thead or tbody section, although they do have their uses. Anyway, all the code does is transverse the table structure. function ChangeColor(elem) { var theTr = elem.parentNode.parentNode; //the parent of the parent of 'elem' (the object of the thing in the TD) //in other words, the parent would be the td, and the parent of the td would be the tr. var allTrs = theTr.parentNode.childNodes; //the parent of the tr and then the children... In other words, the parent of the tr would be the table, //and the children of the table would be all of the trs. for(var i = 0; i < allTrs.length; ++i) { //loop through every row and remove the background color allTrs.bgColor = ""; } theTr.bgColor = "red"; //set the background color of the tr to red. } Now, for that function to be truly dynamic, it would have to be able to know what kind of element it currently has a reference too. That's easily done, but I didn't feel like doing that since I figured you would be using a basic table layout. Link to comment https://forums.phpfreaks.com/topic/163153-change-background-of-a/#findComment-860878 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.