还是以我这个年假日历的JS为例:
比如,我先不按先后顺序地创建几个日期条,然后随意点每个日期条的选项,或者在“自定义”输入框中输入数字,让每个日期条中的数值都不同,然后我再点日历右上角的排序图标,按日期先后顺序排序。
那么,在Firefox中,排序后的日期条都保留了刚才更改的值,而在IE6中则不是这样,值都恢复成了在创建元素节点时的默认值。
请问怎么才能让IE6也像Firefox那样?先谢谢了!
最新代码如下:
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>njcalendar v1.0 - by Yang Yang</title>
<style type="text/css">
input.calendar {
    border: 1px solid #369;
    background-color: #fff;
    color: #369;
    font-size: 12px;
    font-weight: bold;
}
#calendar {
    width: 600px;
    background-color: #369;
    overflow: hidden;
}
#yearbar {
    float: left;
    width: auto;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    padding: 0;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background-color: #369;
}
#monthbar {
    float: right;
    font-size: 14px;
    width: auto;
    height: 26px;
    padding: 0;
    background-color: #369;
}
.month {
    float: left;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    padding: 0 8px;
    color: #fff;
    cursor: pointer;
    background-color: #369;
}
.focusmonth {
    float: left;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    padding: 0 8px;
    border-top:2px solid #369; 
    color: #369;
    cursor: pointer;
    background-color: #ffc;
}
#daysbar {
    width: 600px;
    height: 30px;
    background-color: #ffc;
    border-bottom: 1px solid #369;
    overflow: hidden;
}
#days {
    float: left;
    font-size: 12px;
    width: auto;
    height: 30px;
    line-height: 30px;
    padding: 0;
}
#sort {
    float: right;
    font-size: 12px;
    width: auto;
    cursor: pointer;
    padding-right: 10px;
    padding-top: 6px;
}
.weekenday {
    color: #ccc;
    padding: 0 3px;
}
.workday {
    color: #369;
    cursor: pointer;
    padding: 0 4px;
}
#sheet {
    width: 600px;
    padding: 0;
    overflow: hidden;
    background-color: #369;
}
.daybar {
    float: left;
    clear: both;
    width: 600px;
    height: 36px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid #b0bbbe;
    list-style-type: none;
    background-color: #eff5f8;
}
.daybar .date {
    float: left;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    line-height: 36px;
    overflow: hidden;
    width: 120px;
}
.daybar .range {
    float: left;
    padding-left: 10px;
    padding-top: 6px;
    font-size: 12px;
    color: #369;
    width: 300px;
}
.daybar .hours {
    float: left;
    padding-left: 10px;
    line-height: 36px;
    font-size: 12px;
    color: #000;
    width: auto;
}
.daybar .unit {
    float: left;
    padding-left: 10px;
    line-height: 36px;
    font-size: 12px;
    color: #666;
    width: auto;
}
.daybar li.cancel {
    float: right;
    padding-right: 10px;
    padding-top: 6px;
    color: #369;
    width: auto;
}
#stati {
    width: 600px;
    height: 30px;
    line-height:30px;
    padding: 0;
    font-size: 12px;
    color: #fff;
    text-align: right;
    background-color: #369;
    overflow: hidden;
}
</style>
<script language="javascript">
//当前年月日
var focusy = (new Date()).getFullYear();
var focusm = (new Date()).getMonth()+1;
var focusd = (new Date()).getDate();
//下一年
function nextYear() {
    var y = document.getElementById('year');
    var n = parseInt(y.innerHTML) + 1;
    y.innerHTML = n;
    focusy = n;
    renderCalendar(n);
}
//上一年
function prevYear() {
    var y = document.getElementById('year');
    var n = parseInt(y.innerHTML) - 1;
    y.innerHTML = n;
    focusy = n;
    renderCalendar(n);
}
//判断是否周末
function isWeekenday(y, m, d) {
    var date = new Date();
    date.setFullYear(y, m-1, d);
    var day = date.getDay();
    return (day == 0 || day == 6) ? true : false;
}
//渲染日历
function renderCalendar(y) {
    //月份
    var m = getMonthDays(y);
    var mths = m.length;
    var html = '';
    for (var i = 1; i < mths; i++) {
        html += '<span title="' + i + '" class="' + (i == focusm ? 'focusmonth' : 'month') + 
        '" onclick="focusMonth(\'' + i + '\')">' + i + '月</span>';
    }
    document.getElementById('monthbar').innerHTML = html;
    //天数
    var html = '';
    var days = m[focusm];
    for (var i = 1; i <= days; i++) {
        html  += '<span class="' + (isWeekenday(y, focusm, i) ? 'weekenday' : 'workday') + 
        '" onclick="addDay(' + y + ',' + focusm + ',' + i + ')">' + i + '</span>';
    }
    document.getElementById('days').innerHTML = html;
}
//渲染天数
function renderDays(y, m) {
    var days = getMonthDays(y)[m];
    var html = '';
    for (var i = 1; i <= days; i++) {
        html  += '<span class="' + (isWeekenday(y, m, i) ? 'weekenday' : 'workday') + 
        '" onclick="addDay(' + y + ',' + m + ',' + i + ')">' + i + '</span>';
    }
    document.getElementById('days').innerHTML = html;
}
//选择月份
function focusMonth(m) {
    focusm = m;
    var monthbar = document.getElementById('monthbar');
    var spans = monthbar.getElementsByTagName('span');
    for (var i = 0; i < spans.length; i++) {
        if (m == spans[i].title) {
            spans[i].className = 'focusmonth';
        } else {
            spans[i].className = 'month';
        }
    }
    renderDays(focusy, focusm);
}
//获取月份及天数
function getMonthDays(y) {
    var m = new Array(13);
    m[1]=m[3]=m[5]=m[7]=m[8]=m[10]=m[12]=31;
    m[4]=m[6]=m[9]=m[11]=30;
    m[2]=((y%4==0&&y%100!==0)||(y%100==0&&y%400==0))?29:28;
    return m;
}
//单日维护表
var dayslist = [];
//添加单日项目条
function addDay(y, m, d) {
    if (!uniqueDay(y, m, d)) {
        return false;
    }
    var sheet = document.getElementById('sheet');
    var ul = document.createElement('ul');
    ul.className = 'daybar';
    ul.onmouseover = function() { this.style.backgroundColor = '#e5ebee'; }
    ul.onmouseout = function() { this.style.backgroundColor = '#eff5f8'; }
    var html = '<li title="' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d) + '" class="date">' + y + '年' + m + '月' + d + '日' + '</li>';
    html += '<li class="range"><input type="radio" name="range' + y + m + d + '" value="3" onclick="setHours(this)">上午 <input type="radio" name="range' + y + m + d + '" value="5" onclick="setHours(this)">下午 <input type="radio" name="range' + y + m + d + '" value="8" onclick="setHours(this)" checked>全天 <input type="radio" name="range' + y + m + d + '" value="0" onclick="activeDIYHours(this)">自定义 <input class="hourdiy" type="text" size="2" maxlength="2" value="1" onkeyup="countHours()" onchange="countHours()" disabled></li>';
    html += '<li class="hours">8</li>';
    html += '<li class="unit">小时</li>';
    html += '<li class="cancel"><img src="cancel.gif" border="0" width="17" height="17" title="移除" onclick="cancel(this)" style="cursor:pointer"></li>';
    ul.innerHTML = html;
    recordDay(y, m, d, ul);
    sheet.appendChild(ul);
    countHours();
    countDateRange();
    countDays();
}
//判断单日唯一
function uniqueDay(y, m, d) {
    var date = '' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d);
    for (var i in dayslist) {
        if (date == dayslist[i].date) {
            return false;
        }
    }
    return true;
}
//记录单日
function recordDay(y, m, d, ul) {
    dayslist.push({date: '' + y + (m<10?'0'+m:m) + (d<10?'0'+d:d), elem: ul});
}
//设定小时数
function setHours(range) {
    var hour = range.value;
    var diy = range.parentNode.lastChild;
    diy.disabled = true;
    range.parentNode.nextSibling.innerHTML = hour;
    countHours();
    countDateRange();
    countDays();
}
//激活自定义小时输入框
function activeDIYHours(range) {
    var diy = range.parentNode.lastChild;
    diy.disabled = false;
    setTimeout(function(){diy.select();}, 100);
    range.parentNode.nextSibling.innerHTML = '-';
    countHours();
}
//取消单日
function cancel(input) {
    var sheet = document.getElementById('sheet');
    var ul = input.parentNode.parentNode;
    var day = ul.firstChild.title;
    sheet.removeChild(ul);
    for (var i in dayslist) {
        if (day == dayslist[i].date) {
            dayslist.splice(i, 1);
            break;
        }
    }
    countHours();
    countDateRange();
    countDays();
}
//计算小时数
function countHours() {
    var hn = document.getElementById('hournum');
    var lis = document.getElementById('sheet').getElementsByTagName('input');
    var hc = 0;
    for (var i = 0; i < lis.length; i++) {
        if ('radio' == lis[i].type && lis[i].checked) {
            if ('0' == lis[i].value) {
                var diyhour = lis[i].parentNode.lastChild.value;
                if (!/^\d{1,2}$/.test(diyhour) || (diyhour < 1)) {
                    var d = lis[i].parentNode.parentNode.firstChild.innerHTML;
                    alert(d + '的自定义小时数应为大于零的整数。');
                    hc += 0;
                    lis[i].parentNode.lastChild.select();
                } else {
                    hc += parseInt(lis[i].parentNode.lastChild.value);
                }
            } else {
                hc += parseInt(lis[i].value);
            }
        }
    }
    hn.innerHTML = hc;
}
//计算日期范围
function countDateRange() {
    var ds = document.getElementById('datestart');
    var de = document.getElementById('dateend');
    var dl = dayslist.slice(0, dayslist.length);
    dl.sort(datesort);
    var dsv = dl.length > 0 ? dl[0].date.replace(/(^\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';
    var dev = dl.length > 0 ? dl[dl.length-1].date.replace(/(^\d{4})(\d{2})(\d{2})/, '$1-$2-$3') : '-';
    ds.innerHTML = dsv;
    de.innerHTML = dev;
}
//计算天数
function countDays() {
    var dn = document.getElementById('daynum');
    dn.innerHTML = dayslist.length;
}
//排序日期
function sortDate() {
    if (dayslist.length > 0) {
        var sheet = document.getElementById('sheet');
        dayslist.sort(datesort);
        for (var i in dayslist) {
            sheet.appendChild(dayslist[i].elem);
        }
    }
}
//自定义排序函数
function datesort(a, b) {
    return a.date - b.date;
}
</script>
</head>
<body>
<div id="calendar">
  <div id="yearbar">
    <input id="prevyear" class="calendar" type="button" value=" < " onclick="prevYear()">
    <span id="year"></span>
    <input id="nextyear" class="calendar" type="button" value=" > " onclick="nextYear()">
  </div>
  <div id="monthbar"></div>
</div>
<div id="daysbar">
  <div id="days"></div>
  <div id="sort"><img src="sort.gif" width="17" height="17" border="0" title="日期排序" onclick="sortDate()"></div>
</div>
<div id="sheet"></div>
<div id="stati">从 <span id="datestart">-</span> 至 <span id="dateend">-</span>  实际占用<span id="daynum">0</span>天,合计:<span id="hournum">0</span>小时 </div>
<script language="javascript">
window.onload = function() {
    document.getElementById('year').innerHTML = focusy;
    renderCalendar(focusy);
}
</script>
</body>
</html>
--
FROM 210.51.173.*