今天依旧是前端,在编写表格时想要做出勾选复选框显示指定列,取消勾选则隐藏指定列的功能。网上死活查不到类似方法,只能自己写了~ 于是,想到了style="display:none;"
——隐藏元素。
思路:
接收类名和需要隐藏的个数(表格行数),for循环进行挨个的隐藏,隐藏需要判断当前标签状态,若没被隐藏则隐藏,若被隐藏则取消隐藏(多选框的勾选与取消勾选)。
于是有了以下代码:
//根据类名显示隐藏标签,geshu——从头开始同类名索引为0-n
function dp(classname,geshu){
for(i=0;i<geshu;i++){
if(document.getElementsByClassName(classname)[i].style.display==""){
document.getElementsByClassName(classname)[i].style="display:none;"
}else{
document.getElementsByClassName(classname)[i].removeAttribute("style");
}
}
}
代码解释:
- document.getElementsByClassName(classname)[i]:
https://www.runoob.com/jsref/met-document-getelementsbyclassname.html
- removeAttribute(元素):
https://www.runoob.com/jsref/met-element-removeattribute.html
扩展:
该方法经试验也同样适用于识别id隐藏,使用getElementById()
方法替代getElementsByClassName(classname)[i]
。
关于getElementById()
解释: https://www.runoob.com/jsref/met-document-getelementbyid.html