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

还是这个界面，现在需要在上面加一条逻辑，在今天日期前的排班情况不允许进行操作。因为所有的表单元素都是通过字符串拼接+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;

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