0

編集可能なデータ (タイムシート システム用) の特定のビューを作成しようとしていますが、現在取り組んでいる部分は、特定の方法でスクロールできる必要があります。垂直方向にスクロールする必要はほとんどありませんが、水平方向に移動する必要があります。自動オーバーフローを使用して別の div にテーブルがありますが、どうすればよいかわかりません。助けていただければ幸いです。

要求どおりにコードが続きますが、表示するものはあまりありません。サーバーに対する企業の制限により、CSS にアクセスできません。行のコンテンツは Javascript 関数によって作成されます (この時点では<td>、幅が 30 に設定された 40 個の同一の要素と 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