DateShiftsShiftDetailsAlternate

An alternate way of laying out Date/Shifts/Shift Details

by clayshannon

HTML

<div>Yo</div>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<br/>
<select class="d1s1j1" disabled>
    <option>select a cat</option>
    <option>option 1</option>
    <option>option 2</option>
</select>
<button id="abler">enable 5</button>
<br/>
<TABLE COLS="6" id="sceduleTbl" name="sceduleTbl">
    <COLGROUP min-width="20%"></COLGROUP>
    <COLGROUP min-width="20%"></COLGROUP>
    <COLGROUP min-width="15%"></COLGROUP>
    <COLGROUP min-width="15%"></COLGROUP>
    <COLGROUP min-width="15%"></COLGROUP>
    <COLGROUP min-width="15%"></COLGROUP>
    <TR>
        <TD class="headerrow" align="center" valign="middle">
             <B>DATE</B>
          </TD>
          <TD class="headerrow" align="center" valign="middle">
            <B>SHIFTS</B>
         ...

CSS

body {
    border-radius: 5px 10px 15px 20px;
    border: 1px solid black;
}
table {
    width: 100%;
    border-collapse:collapse;
    border:1px solid dodgerblue;
}
.shiftblock {
    border:1px solid orange;
}
.shiftblockbottom {
    border-bottom:1px solid orange;
}
.headerrow {
    border:1px solid forestgreen;
}
.hide {
    visibility: hidden;
}

JavaScript

$('#hideselector').change(function () {
    var hideCount = $(this).val();
    $('.d1s1j1').addClass('hide').slice(hideCount).removeClass('hide');
});

$('#abler').click(function () {
    var enableCount = 5;
    $('.d1s1j1').attr('disabled', 'disabled').slice(0, enableCount).removeAttr('disabled');
});