Jump to content

change background of a <tr>


SetToLoki

Recommended Posts

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

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.)

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 :D if you are interested I used your code here

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.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.