重构Javascript代码
今天有做了几个asp.net结合Javascript的教程文章。现回顾头来看看那些Javascript脚本,有写得不太理想,过于复杂。现Insus.NET抽取出来,重构它们。
第一篇是http://www.cnblogs.com/insus/archive/2013/01/20/2868532.html 原来的Javascript脚本:
function SelectedAll(cb) { cb.checked = cb.checked ? false : true; var gv = document.getElementById('<%=GridViewCouplets.ClientID %>'); var rc = gv.rows.length; for (var i = 1; i < rc; i++) { var input = gv.rows[i].cells[0].getElementsByTagName("input"); if (input[0].type == "checkbox" && input[0].checked) { input[0].checked = false; gv.rows[i].style.backgroundColor = ""; } else { input[0].checked = true; gv.rows[i].style.backgroundColor = "#66ff33;"; } } } function SelectedSingle(cb) { var row = cb.parentNode.parentNode; if (cb.checked) { row.style.backgroundColor = "#66ff33;"; } else { row.style.backgroundColor = ""; } }
经过重构之后的Javascript脚本:
function SelectedAll(cb) { var gv = document.getElementById('<%=GridViewCouplets.ClientID %>'); var rc = gv.rows.length; for (var i = 1; i < rc; i++) { var input = gv.rows[i].cells[0].getElementsByTagName("input"); if (input[0].type == "checkbox") { input[0].checked = cb.checked; gv.rows[i].style.backgroundColor = input[0].checked ? "#66ff33;" :""; } } } function SelectedSingle(cb) { var row = cb.parentNode.parentNode; row.style.backgroundColor = cb.checked? "#66ff33;":""; }
另外一篇http://www.cnblogs.com/insus/archive/2013/01/20/2868766.html 原来的Javascript脚本:
function Check_Uncheck_All(cb) { var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>"); var input = cbl.getElementsByTagName("input"); if (cb.checked) { for (var i = 0; i < input.length; i++) { input[i].checked = true; } } else { for (var i = 0; i < input.length; i++) { input[i].checked = false; } } }
重构之后的Javascript脚本:
function Check_Uncheck_All(cb) { var cbl = document.getElementById("<%=CheckBoxListMusicType.ClientID%>"); var input = cbl.getElementsByTagName("input"); for (var i = 0; i < input.length; i++) { input[i].checked = cb.checked; } }
标签:
JavaScript
, checkbox
, js
, CheckBoxList
, input
, List
, getElementById
, parentNode
, getElementsByTagName
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
2012-01-20 无法解决 equal to 操作中 "SQL_Latin1_General_CP1_CI_AS" 和 "Chinese_PRC_CI_AS" 之间的排序规则冲突。
2012-01-20 sp_executesql 使用复杂的 Unicode 表达式
2012-01-20 OBJECTPROPERTY与sp_rename更改对象名称
2010-01-20 Generics and Linq demo
2010-01-20 Two ListBox selector demo