html页面修改表格中表单元素属性为不可编辑。

dom节点操作 同时被 3 个专栏收录
2 篇文章 0 订阅
2 篇文章 0 订阅
1 篇文章 0 订阅

这里写图片描述

还是这个界面,现在需要在上面加一条逻辑,在今天日期前的排班情况不允许进行操作。因为所有的表单元素都是通过字符串拼接+innerHtml实现的。所以现在想要实现这一功能有两种方式,一种就是在字符串拼接的条件下,再进行日期判断,是否加上不可编辑的属性。第二种就是在今天日期前面的排班日期通过jquery设置属性。

很明显,是第二种方法比较好用。

js代码:

    success:function(table){
                for(var i=0;i<tds.length;i++){
                    var thisday=new Date(year,month-1,i+1-firstday.getDay());  //getDay得到第一天是周几 从而显示第一行上个月的数据
                    var thisdayStr=getdatestr(thisday);
                    tds[i].innerHTML="";
                    for(var j=0;j<table.length;j++){

                        if(dateformat(thisday)==jsonDateFormat(table[j].date)){
                            var tag="<span style='font-size:16px; font-wight:700'>"+thisday.getDate()+"</span>"+
                            "<br/>上班时间:<input type='text' style='width:48px; height:18px; margin-top:1px' placeholder='"+jsonTimeFormat(table[j].startTime)+"' />"+
                            "<br/>下班时间:<input type='text' style='width:48px; height:18px; margin-top:1px' placeholder='"+jsonTimeFormat(table[j].endTime)+"' />";

                            if(table[j].ifOnduty==2){
                                tag+="<br/>是否值班:<input type='radio' name='flag"+j+"' value='true' style='margin-top:2px' />是"+
                                "<input type='radio' name='flag"+j+"' value='false' style='margin-top:2px' checked='checked' />否"+
                                        "<br/><span style='display:none'>值班类型:</span>";
                            }else{
                                tag+="<br/>是否值班:<input type='radio' name='flag"+j+"' value='true' style='margin-top:2px' checked='checked' />是"+
                                "<input type='radio' name='flag"+j+"' value='false' style='margin-top:2px' />否";
                                if(table[j].typeOnduty==1){
                                    tag+="<br/><span>值班类型:</span><select><option value='"+1+"'>工作日值班</option>"+
                                    "<option value='"+2+"'>周末值班</option></select>";
                                }else{
                                    tag+="<br/><span>值班类型:</span><select><option value='"+2+"'>周末值班</option>"+
                                    "<option value='"+1+"'>工作日值班</option></select>";
                                }
                            }

                            tds[i].innerHTML=tag;
                            tds[i].setAttribute("data",thisdayStr);
                            if(thisdayStr==getdatestr(new Date())){
                                tds[i].className="currentDay";   //当天设置属性
                            }else if(thisdayStr<getdatestr(new Date())){
                                //tds[i].getElementsByTagName('input')[0].readOnly=true;
                                $(tds[i]).find("input,radio,select").attr("disabled", "disabled");
                            }else if(thisdayStr.substr(0,6)==getdatestr(firstday).substr(0,6)){
                                tds[i].className="currentMonth";  //当前月设置属性
                            }else{
                                tds[i].className="otherMonth";      //其他月的日历设置属性
                            }
                        }
                    }


                }

由上代码可发现,当我们遍历表格中的td时,td[i]所取到的对象其实是一个DOM节点,在一开始,我曾经尝试用td[i].find("input,radio,select").attr("disabled", "disabled");的方法,发现页面报错,找不到这个方法。其他jquery的方法也是用不了,后来查阅相关资料发现td是通过getElementsByTagName得到的,属于DOM节点,只能用DOM节点的操作方法,如:

一些常用的 HTML DOM 方法:
getElementById(id) - 获取带有指定 id 的节点(元素)
appendChild(node) - 插入新的子节点(元素)
removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点

后在网上查询jquery取Dom节点的方法,发现只需要在对应的DOM节点外加$()符号就可以进行jquery操作。

$(tds[i]).find(“input,radio,select”).attr(“disabled”, “disabled”);

如果不用jquery操作的话,也可以用DOM节点操作的方法实现,只是比较麻烦。

tds[i].getElementsByTagName(‘input’)[0].readOnly=true;
tds[i].getElementsByTagName(‘input’)[1].readOnly=true;
tds[i].getElementsByTagName(‘radio’)[0].readOnly=true;
tds[i].getElementsByTagName(‘select’)[0].readOnly=true;

即分别取出节点下的其他元素,然后分别设置他的属性,这样的话需要了解子节点的种类与个数。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值