html页⾯修改表格中表单元素属性为不可编辑。
还是这个界⾯，现在需要在上⾯加⼀条逻辑，在今天⽇期前的排班情况不允许进⾏操作。因为所有的表单元素都是通过字符串拼接
+innerHtml实现的。所以现在想要实现这⼀功能有两种⽅式，⼀种就是在字符串拼接的条件下，再进⾏⽇期判断，是否加上不可编辑的属性。第⼆种就是在今天⽇期前⾯的排班⽇期通过jquery设置属性。
很明显，是第⼆种⽅法⽐较好⽤。
js代码：
success:function(table){
for(var i=0;i<tds.length;i++){
var thisday=new Date(year,month-1,Day()); //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'>"+Date()+"</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) - 插⼊新的⼦节点（元素）
html中提交表单用什么属性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;
即分别取出节点下的其他元素，然后分别设置他的属性，这样的话需要了解⼦节点的种类与个数。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论