Need to change the background color of datalist cell

Question

I have a datalist with itemtemplate which contains: an anchor and an href tag . Everytime a user clicks the link I want to change the background color to green of the so that the whole cell looks selected. If another cell is selected then the previous background should clear up and the new cell should get the green color. Right now all the td's change to green for a second and then it cjanges to the original colors. The issue is that I cannot get unique id because of the DataList control. There is a unique table name and but all the td are identical. So there are 2 issues.

• To have the background color remain until the user clicks another cell
• Have a unique id to recognize which cell was selected by the click event.

How can I do that? Please help.

<asp:DataList ID="DL1" ItemStyle-Width="50%"  runat="server" DataSourceID="ds1" 
        RepeatColumns="2" RepeatDirection="Vertical" RepeatLayout="Table">  
     <ItemTemplate>
          <a onclick="testl('<%= DL1.ClientID %>')" 
               href='<%# "Color.aspx?id=" + Eval("id") %>'> 
                       Click to change background
          </a> 
      </ItemTemplate>
 </datalist>

---

    function test(id) {
        $("#" + id + " td").css({ 'background-color': 'green' });
    }

Answer 1

I'd use a CSS class to identify highlightable links.

<a class="highlightable" href=...>Click to change background</a>

Then in write something like this in jQuery:

$(".hightlightable").click(function() { 
  $(".highlightable").removeClass("highlight");
  $(this).addClass("highlight");
});

And in your CSS:

.highlight {
  background-color: #008000;
}

Answer 2

The reason that it is changing back to the original colors is, I think due to the fact that the link is being taken. Should that be handled via AJAX, or simply ignored? I'll assume that you can use the href to load up some html that will display in a DIV named displayArea. Also, I'd consider using a class instead of an id and not putting the javascript inline. The other answer, using CSS classes is also spot on, so I'm going to change this to show changing the class to the highlight class. Using CSS classes is a much better way to handle it.

<a class="changes-color" href=...>Click to change background</a>


<script type="text/javascript">
   $(function() {
       $('.changes-color').click( function() {

          // remove existing highlights and add highlight to this element
          $('#tableId').find('td').removeClass('highlight');
          $(this).closest('td).addClass('highlight');

          // load data into display area using ajax load
          $('#displayArea').load( $(this).attr('href') );

          // stop link from being followed
          return false;
       });
   });
</script>