Question

我有一个带有itemtemplate的数据列表，其中包含：锚点和href标记。每当用户点击链接时，我想将背景颜色更改为绿色，以便整个单元格看起来被选中。如果选择了另一个单元格，则应清除先前的背景，新单元格应为绿色。现在所有td都变为绿色一秒钟，然后它变成原始颜色。问题是由于DataList控件，我无法获得唯一的id。有一个唯一的表名，但所有td都是相同的。所以有两个问题。

保留背景颜色直到用户点击另一个单元格
有一个唯一的ID来识别哪个单击事件选择了单元格。

我该怎么做？请帮忙。

<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

我使用CSS类来识别可突出显示的链接。

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

然后在jQuery中写这样的东西：

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

在你的CSS中：

.highlight {
  background-color: #008000;
}

Answer 2

它正在改变回原始颜色的原因是，我认为是由于链接正在被采用。应该通过AJAX处理，还是简单地忽略？我假设您可以使用href加载一些将在名为 displayArea 的DIV中显示的html。另外，我考虑使用一个类而不是一个id，而不是将javascript内联。使用CSS类的另一个答案也是现场，因此我将更改此更改以显示将类更改为高亮类。使用CSS类是处理它的更好方法。

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

需要更改datalist单元格的背景颜色

2 个答案: