Solved

Javascript change text color

Posted on 2009-06-29
5
1,916 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
5 Comments
 
LVL 9

Expert Comment

by:jmanGJHS97
ID: 24739763
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
ID: 24739831
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
ID: 24739914
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
ID: 24746422
jmanGJHS97 & AlbertVanHalen

Thank you for your suggestions!

AlbertVanHalen's solution worked best with my situation.

Thanks again!
0
 

Author Closing Comment

by:stinklefink
ID: 31598089
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

Webinar: MongoDB® Index Types

Join Percona’s Senior Technical Services Engineer, Adamo Tonete as he presents “MongoDB Index Types, How, When and Where Should They be Used?” on Wednesday, July 12, 2017 at 11:00 am PDT / 2:00 pm EDT (UTC-7).

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

623 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