0

我正在尝试创建一些可编辑数据的特定视图（用于时间表系统），而我目前正在处理的部分需要以某种方式滚动。这不太可能需要垂直滚动，但需要水平移动。我在一个单独的 div 中有自动溢出的表，但我不知道如何继续。我将不胜感激任何帮助。

根据要求，代码如下，但没有什么可显示的。由于公司对服务器的限制，我无法访问任何 CSS。行的内容由 Javascript 函数创建（此时，它只是创建了 40 个相同<td>的元素，宽度设置为 30，整数值设置为 1 - 40，以确保表格足够宽以需要滚动）。无论<td>元素的宽度设置为多少，div 都会压缩它们。

<div id='TimeScroller' width='100%' style='overflow:auto;'>
    <table id='TimeData'>
        <tr id='Days' style='font-family: "Courier New", Courier, monospace; font-size: 11px;'>
        </tr>
    </table>
</div>

更新：我又遇到了这个问题。我尝试了下面列出的解决方案，但没有运气。相反，我设法找到了一种不需要这种滚动功能的方法。不幸的是，我的新项目需要我弄清楚，所以我毕竟必须解决问题。我正在使用的代码如下：

<td>
    <div id='am_scheduleScroller' style='overflow: auto;'>
        <table id='am_scheduleDisplay' width='100%' border='0' cellpadding='0' cellspacing='0' style='empty-cells: show;'>
            <thead>
                <tr id='am_schedule_formatBar'></tr>
                <tr id='am_schedule_tableTitleBar'></tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</td>


var totalDays;

$(document).ready(function() {
    var today = new Date();
    $('#am_monthSelector_from').val(today.getMonth() + 1).prop('selected', true);
    $('#am_yearSelector_from').val(today.getFullYear()).prop('selected', true);

    getDates();
    loadData();
});


function getDates() {
    var moLen = new Array();
    var moSelFrom = $('#am_monthSelector_from').val();
    var moSelTo = $('#am_monthSelector_to').val();
    var yrSelFrom = $('#am_yearSelector_from').val();
    var yrSelTo = $('#am_yearSelector_to').val();
    var months = new Array();
    var firstDay;
    var firstDate = '';
    totalDays = 0;

    var mo = moSelFrom;
    var yr = yrSelFrom;
    // Grab the length of the previous month (for the weekly divisions)
    if(mo == 1) {
        mo = 12;
        yr--;
    } else
        mo--;

    // Collect month lengths
    var index = 0;
    while(yr < yrSelTo || mo < moSelTo) {
        months[index] = mo;
        moLen[index] = new Date(yr, mo, 0).getDate();
        if(mo == 12) {
            mo = 0;
            yr++;
        }
        mo++;
        index++;
    }
    months[index] = moSelTo;
    moLen[index] = new Date(yrSelTo, moSelTo, 0).getDate();


    // Decide first day for week listings (title row)
    firstDay = new Date(yrSelFrom, months[1], 1).getDay();
    if(firstDay != 1) {
        totalDays += +firstDay - 1;
        firstDay = (moLen[0] - firstDay) + 2;
        firstDate = months[0] + ' / ' + firstDay + ' / ' + yrSelFrom;
    } else
        firstDate = months[1] + ' / 1 / ' + yrSelFrom;

    for(var i = 1; i < moLen.length; i++) {
        totalDays += moLen[i];
    }

    // Schedule formatting row
    var dateList = '';
    for(var i = 0; i < totalDays; i++)
        dateList = dateList + '<td style="width:30px;"></td>';
    $('#am_schedule_formatBar').html(dateList);


    // Date row (divided into weeks)
    var moIndex = 1;
    var day = 8;
    yr = yrSelFrom;
    if(firstDay != 1) {
        day = 7 - (moLen[0] - firstDay);
    }
    dateList = '<td style="width:30px; border: 1px solid black; border-bottom: 2px solid black;" id="am_date_0" align="center" colspan="7">' + firstDate + '</td>';
    for(var i = 7; i < totalDays; i += 7) {
        dateList = dateList + '<td style="width:30px; border: 1px solid black; border-bottom: 2px solid black;" id="am_date_' + i + '" align="center" colspan="7">' + months[moIndex] + ' / ' + day + ' / ' + yr + '</td>';
        day += 7;
        if(day > moLen[moIndex]) {
            day = day - moLen[moIndex];
            if(moIndex == 12) {
                yr++;
                moIndex = 1;
            } else 
                moIndex++;
        }
    }

    $('#am_schedule_tableTitleBar').html(dateList);
    $('#am_resource_tableTitleBar').html('<td><b>Employee:</b></td>');
}


function loadData() {
    var data = '<tr>';

    for(var i = 0; i < totalDays; i++) {
        data = data + '<td align="center" id="am_sched_' + empID + '_' + date + '" align="center" style="border-bottom: 1px solid black;"></td>';
    }
    data = data + '</tr>';

    $('#am_scheduleDisplay tbody').html(data);
    $('#am_resourceList tbody').html('<tr><td>' + empID + ':' + empName + '</td></tr>');


    var startElt = $('#am_sched_' + empID + '_' + start);
    startElt
        .html('Out')
        .attr('colspan',length)
        .css('backgroundColor', '#00FFFF')
        .closest('tbody');


    var prevElt = startElt.next();
    startElt = prevElt.next();
    for(var i = 1; i < length; i++) {
        prevElt.remove();
        prevElt = startElt;
        startElt = startElt.next();
    }
}

任何帮助将非常感激。谢谢！

4

1 回答 1

0

这应该有效：

<div id='TimeScroller'style='overflow:auto;width:100%'>
    <table id='TimeData' style="table-layout:fixed; width:100%">
        <tr id='Days' style='font-family: "Courier New", Courier, monospace; font-size: 11px;'>
        </tr>
    </table>
</div>
于 2013-07-19T20:51:08.217 回答