jquery - 带有可点击行的 ASP.Net 列表视图，突出显示所选项目

Question

我的 ASP.net 列表视图的每一行都包含 a 中的几个组件<div>，我的问题有两个部分：

1. 如何使该行可点击（以利用SelectedIndexChanged事件）？我想根据单击的行在另一个用户控件中加载一些数据。

2. 如何使用（比如浅蓝色）框显示选定的行周围或上方？

谢谢

更新

<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>

 <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

 <div class="clickable" url="http://www.google.com">
    Google
</div>

<div class="clickable" url="http://www.bing.com">
    Bing
</div>

<script type="text/javascript">
   $("div.clickable").mouseover(function () {
 //        $(this).css("outline-style", "solid");
 //        $(this).css("outline-color", "Navy");
 //        $(this).css("outline-width", "thin");
    $("#div.clickable").each(function () { $(this).removeClass("Selected") });
    $(this).addClass("Selected");
 });
 </script>

<script type="text/javascript">
    $("div.clickable").click(
    function () {
        window.location = $(this).attr("url");
    });
</script>

风格将是

.clickable
{
  cursor:pointer;
  cursor: hand;
}

.Selected
{
  outline-style:solid;
  outline-color:Navy;
  outline-width:thin;
}

然而，当鼠标移过其他项目时，它不起作用。它没有清除前一项的大纲。

Answer 1

您需要挂钩到列表视图行绑定并添加单击时想要的信息。使用它，您可以为单击时回读的按钮添加一个属性，例如...

对于突出显示，您可以在客户端使用此 JQuery：（asp.net listview highlight row on click）

   $("#myTable tr").click( function () 
{
   $("#myTable tr").each(function () { $(this).removeClass("selected")}); 
   $(this).addClass("selected"); 
});​