asp.net 滑鼠移入Repeater某一行時改變顏色並且checkbox列被選中
<script language="javascript" type="text/javascript">
/*被選中*/
function OnCheck(event) {
var obj = event.srcElement ? event.srcElement : event.target;
if (obj.type == "checkbox") {
clearSelectedItems(obj.parentNode.parentNode)
return;
}
clearSelectedItems(obj.parentNode); //清空選擇項
var cbArr = obj.parentNode.cells[0].getElementsByTagName("input");
if (cbArr.length > 0 && cbArr[0].type == "checkbox") {
cbArr[0].checked = !cbArr[0].checked;
}
}
/*清空選擇項*/
function clearSelectedItems(row) {
var myTable = document.getElementById("myTable");
var cbArr = myTable.getElementsByTagName("input");
for (var i = 0; i < cbArr.length; i++) {
if (cbArr[i].parentNode.parentNode != row) {
if (cbArr[i].type == "checkbox" && cbArr[i].checked) {
cbArr[i].checked = false;
}
}
}
}
function Focus(obj) {
obj.style.backgroundColor = '#D8F79D';
}
//顏色恢復為白色
function UnFocus(obj) {
obj.style.backgroundColor = '#ffffff';
}
</script>
<table width="100%" id="myTable" cellspacing="0" cellpadding="2" size="15" class="dataTable">
<tbody>
<tr class="dataTableHead">
<td width="5%" height="30" align="center">
<strong>選擇</strong>
</td>
<td width="15%" style="cursor: pointer" align="center">
<strong>書籍圖片</strong>
</td>
<td width="15%" align="center">
<strong>書名</strong>
</td>
<td width="15%" align="center">
<strong>作者</strong>
</td>
<td width="10%" style="cursor: pointer;" align="center">
<strong>書籍類別</strong>
</td>
<td width="15%" align="center">
<strong>已閱讀此書人數</strong>
</td>
<td width="15%" align="center">
<strong>是否必讀</strong>
</td>
<td width="10%" align="center">
<strong>檢視詳情</strong>
</td>
</tr>
<asp:Repeater ID="rp_list" runat="server"
OnItemDataBound="rp_list_ItemDataBound">
<ItemTemplate>
<tr onmouseover="Focus(this)" style="cursor: pointer" onmouseout="UnFocus(this)" onclick="OnCheck(event)">
<td align="center">
<input type="checkbox" id="cb_i" name="cb_i" value="<%#Eval("BookID") %>" class="inputCheckbox" />
</td>
<td align="center">
<asp:Image ID="Image1" ToolTip='<%#Eval("BookName") %>' runat="server" Width="80"
Height="100" ImageUrl='<%#Eval("BookPic")%>' />
</td>
<td align="center">
<%# Eval("BookName")%>
</td>
<td align="center">
<%# Eval("Author")%>
</td>
<td align="center">
<%#getBookCategoryNameById(int.Parse(Eval("BookCategoryID").ToString()))%>
</td>
<td align="center">
<asp:LinkButton ID="lb" runat="server" Text='<%# getBookReadCounter(int.Parse(Eval("BookID").ToString()))%>'
CommandArgument='<%#Eval("BookID")%>'></asp:LinkButton>
</td>
<td align="center">
<asp:Label ID="lblMustRead" runat="server" Text='<%# getIsMustRead(int.Parse(Eval("IsMustRead").ToString()))%>'></asp:Label>
</td>
<td align="center">
<asp:ImageButton ID="ibSeeDetail" ImageUrl="~/Admin/images/details.jpg" OnClientClick="SeeTemplate();"
CommandArgument='<%#Eval("BookID") %>' ToolTip="檢視詳細資訊" runat="server" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<tr>
<td colspan="8" align="left">
<webdiyer:AspNetPager Style="float: right;" PageSize="3" ID="AspNetPager1" runat="server"
CustomInfoHTML="" FirstPageText="第一頁" LastPageText="最末頁" NextPageText="下一頁" PrevPageText="上一頁"
OnPageChanged="AspNetPager1_PageChanged" ShowPageIndexBox="Never" UrlPaging="false"
Width="100%" ShowCustomInfoSection="Left" SubmitButtonClass="inputButton" SubmitButtonText="轉跳"
PageIndexBoxType="DropDownList" PageIndexOutOfRangeErrorMessage="您訪問的地址不正確!">
</webdiyer:AspNetPager>
</td>
</tr>
</tbody>
</table>
相關文章
- CSS 改變文字選中顏色CSS
- 選中按鈕改變文字大小和顏色
- CSS改變文字選中狀態下的顏色CSS
- 改變UITableView選中行高亮的顏色UIView
- 滑鼠移動到button顏色改變的實現
- CSS例項:滑鼠滑過超級連結文字時改變背景顏色CSS
- Dreamweaver製作滑鼠經過圖示改變顏色教程
- Flutter改變狀態列字型、狀態列背景顏色、Appbar背景顏色的方式FlutterAPP
- CardView改變陰影顏色View
- 改變SVG圖的顏色SVG
- Android的RadioButton隨著選中狀態的改變字型顏色也改變Android
- 動態改變Drawable中我們自定義背景的顏色並設定顏色以16進位制進行設定
- 視訊直播app原始碼,按鈕被按下時顏色隨著改變APP原始碼
- win10怎麼改變工作列顏色 w10系統如何設定工作列顏色Win10
- js 選項卡 【滑鼠懸停標題,顯示對應內容,改變其他標題顏色並隱藏內容】...JS
- Swt/Jface tableviewer 加入filter ,改變行的顏色ViewFilter
- asp.net GridView列資料滑鼠移入顯示提示資訊ASP.NETView
- JavaScript模擬設定checkbox選中打勾顏色效果程式碼JavaScript
- css3 ::selection的用法(改變選中文字的背景顏色或者文字顏色)CSSS3
- CSS魔法堂:改變單選框顏色就這麼吹毛求疵!CSS
- dataGridView 設定某一行的顏色View
- JS 操作 DOM 改變方塊顏色JS
- Android 圓形ProgressBar 改變顏色Android
- web前端 改變SVG圖的顏色Web前端SVG
- android狀態列一體化(改變狀態列的背景顏色)Android
- excel 中,選中的行,變色Excel
- echarts 柱狀圖的選中模式實現-被選中變色和再次選中為取消變色Echarts模式
- 快速搭建直播平臺,點選按鈕(Button)後改變顏色
- ASP.NET中利用Repeater實現增刪改操作ASP.NET
- win10怎麼設定滑鼠指標演顏色_win10怎麼讓滑鼠變顏色Win10指標
- win10 更改游標顏色方法 win10 滑鼠游標顏色怎麼改Win10
- CSS設定滑鼠選中文字的顏色CSS
- Win10工作列顏色怎麼改?Win10
- 使用 Promise 迴圈改變 div 背景顏色Promise
- linux改變shell的輸出顏色Linux
- Android 使用ColorMatrix改變圖片顏色AndroidColorMatrix
- pycharm改變語法錯誤的顏色PyCharm
- 短視訊平臺原始碼,點選ul/li改變背景顏色原始碼