还是这个界面,现在需要在上面加一条逻辑,在今天日期前的排班情况不允许进行操作。因为所有的表单元素都是通过字符串拼接+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;
即分别取出节点下的其他元素,然后分别设置他的属性,这样的话需要了解子节点的种类与个数。