Solved

Javascript change text color

Posted on 2009-06-29
5
1,897 Views
Last Modified: 2013-11-19
I am looping through a bean getting multiple rows of data. Each row has a Edit and Delete link. If you click "Edit" that rows data will change to green.

I have the above working correctly with the code I pasted below. My only problem is that I have multiple "Edit" links (one per row) and only one row can be green at a time. I need help with the logic to see if another row is already changed (green). If it is than it needs to change the other row back to the original color and the current clicked row to green.
<c:forEach items="${ccsData.currentOrder.lineItemsDescending}" var="item">

	<c:set var="rowCount" value="${rowCount + 1}"/>

		<tr id="div_<c:out value='${rowCount}'/>" class="<c:choose><c:when test="${rowCount % 2 == 0}">odd</c:when><c:otherwise>even</c:otherwise></c:choose>" >

			<td align="center" id="lineNum_<c:out value='${rowCount}'/>"><c:out value="${item.lineNumber}"/></td>

			<td align="center" id="fg_<c:out value='${rowCount}'/>"><c:out value="${item.freegoodFlag}"/></td>

			<td align="right" id="fgCases_<c:out value='${rowCount}'/>"><c:out value="${item.cases}"/></td>

			<td align="right" id="fgBottles_<c:out value='${rowCount}'/>"><c:out value="${item.bottles}"/></td>

			<td align="right" id="fgItemPack_<c:out value='${rowCount}'/>"><c:out value="${item.item}"/><c:out value="${item.pack}"/></td>

			<td align="center"><c:out value="${item.size}"/></td>

			<td align="left"><c:out value="${item.description}"/></td>

			<td align="center"><c:out value="${item.shippingCabv}"/></td>

			<td align="right"><c:out value="${item.qtyAvailable}"/></td>

			<td align="center"><a href="javascript:void(0);" onclick="setLineItm('<c:out value="${rowCount}"/>','<c:out value="${item.lineNumber}"/>', '<c:out value="${item.cases}"/>', '<c:out value="${item.bottles}"/>', '<c:out value="${item.salesmanNumber}"/>','<c:out value="${discountOverride}"/>'); changeDivTextColor('<c:out value="${rowCount}"/>');">Edit</a></td>

			<td align="center"><a href="javascript:void(0);" onclick="showDialog('<c:out value="${item.lineNumber}"/>','<c:out value="${ccsData.currentOrder.orderNumber}"/>');">Delete</a></td>

		</tr>

</c:forEach>
 
 
 
 
 
 

function changeDivTextColor(rowNum){

    document.getElementById('div_'+ rowNum).style.color = 'green';

}

Open in new window

0
Comment
Question by:stinklefink
  • 2
  • 2
5 Comments
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
You could put in a hidden input that says how many rows you have:

<input type="hidden" name="rowCount" id="rowCount" value="<c:out value='${rowCount}' />

Then, in your onclick of your edit link, call a function that does this:

Change 'red' to whatever color you want.
function changeDivTextColor(rowNum){

    var rowCount = document.getElementById('rowCount').value;
 

    for (var i = 0; i < rowCount; i++)

    {

        if (i == rowCount)

        {

            document.getElementById('div_'+ rowNum).style.color = 'green';

        }

        else

        {

            document.getElementById('div_'+ rowNum).style.color = 'red';

        }

    }

}

Open in new window

0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 250 total points
Comment Utility
You could loop through each row within the table and check the color attribute of style object and reset it.
var table = document.getElementById("yourTableID");

for(var x=0; x<table.rows.length; x++) {

    var row = table.rows[x];

    if(row.style.color == "green")

        row.style.color = "";

}

Open in new window

0
 
LVL 19

Expert Comment

by:Albert Van Halen
Comment Utility
NB Have you considerd using a framework like jquery??
Using jQuery will make it more easy for you.

Using jQuery I would do the following.
I would define a style rule for the selected rows (i.e. : row-selected) and specify the color green in that rule.
To get the selected rows (thus all the rows having the specific classname) you could easily get them in a collection and remove the class from it and so 'de-select' the selected rows.

Have a look at http://jquery.com
<style type="text/css">

.row-selected {

    color: green;

}

</style>

<script type="text/javascript">

// Get all the selected rows and deselect them

$(".row-selected").removeClass("row-selected");

</script>

Open in new window

0
 

Author Comment

by:stinklefink
Comment Utility
jmanGJHS97 & AlbertVanHalen

Thank you for your suggestions!

AlbertVanHalen's solution worked best with my situation.

Thanks again!
0
 

Author Closing Comment

by:stinklefink
Comment Utility
Thanks! Worked great and easy to understand. Couldn't use the jquery option because we are already using prototype. Hear they don't play nice together. Thanks again!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now