• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1937
  • Last Modified:

Javascript change text color

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
stinklefink
Asked:
stinklefink
  • 2
  • 2
1 Solution
 
jmanGJHS97Commented:
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
 
Albert Van HalenAnalyst developerCommented:
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
 
Albert Van HalenAnalyst developerCommented:
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
 
stinklefinkAuthor Commented:
jmanGJHS97 & AlbertVanHalen

Thank you for your suggestions!

AlbertVanHalen's solution worked best with my situation.

Thanks again!
0
 
stinklefinkAuthor Commented:
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now