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 Quote Link to comment 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.) Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.