CSC jisi-1

jsdoit.css

* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #dff;
  font: 14px sans-serif;
}

table, td, th {
border: 1px #ccc solid;
}

jsdoit.html

<!-- <table>
    <tr><th colspan=8 bgcolor="#ffcc00">社員</th><th colspan=7 bgcolor="#66ff66">パートナー</th></tr>
    <tr><th>PJ名</th><th>氏名</th><th>前日<br>終業</th><th>超過合計</th>
        <th>法定/代休</th><th>本日</th><th>理由</th><th>前月超過</th>
        <th>氏名</th><th>超過</th><th>本日</th><th>理由</th></tr>
    <tr><td>ABC社システム統合</td><td><button type="button" name="aaa" value="aaa">編集</button>○○　義男</td>
        <td>19:30</td><td>10.0h</td><td></td>
        <td>09:00</td><td></td><td>15.5h</td>
        <td><button type="button" name="aaa" value="aaa">編集</button>△△　浩</td><td>7.0h</td>
        <td>09:00</td><td></td></tr>
    <tr><td>ABC社システム統合</td><td><button type="button" name="aaa" value="aaa">編集</button>○○　和正</td>
        <td>19:30</td><td>15.5h</td><td></td>
        <td>09:00</td><td></td><td>15.5h</td>
        <td><button type="button" name="aaa" value="aaa">編集</button>△△　文子</td><td>11.5h</td>
        <td><font color="#f00">09:05</font></td><td><font color="#f00">事故延着</font></td></tr>
    <tr><td>ABC社システム統合</td><td><button type="button" name="aaa" value="aaa">編集</button>○○　睦夫</td>
        <td>19:30</td><td>13.5h</td><td></td>
        <td>09:00</td><td></td><td>15.5h</td>
        <td><button type="button" name="aaa" value="aaa">編集</button>△△　浩二</td><td>6.5h</td>
        <td>09:00</td><td></td></tr>
</table> -->

<script type="text/javascript" src="js/jquery.timepicker.js"></script>

<table>
    <thead>
        <tr><th colspan=8 bgcolor="#ffcc00">社員</th><th colspan=7 bgcolor="#6f6">パートナー</th></tr>
        <tr><th>PJ名</th><th>氏名</th><th>前日<br>終業</th><th>超過合計</th>
        <th>法定/代休</th><th>本日</th><th>理由</th><th>前月超過</th>
        <th>氏名</th><th>超過</th><th>本日</th><th>理由</th></tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: pjName"></td>
            <td><button type="button" name="aaa" value="aaa">編集</button><span data-bind="text: empName"></span></td>
            <td data-bind="text: lastDayEnd"></td>
            <td data-bind="text: sumExcess"></td>
            <td data-bind="text: offWork"></td>
            <td data-bind="text: todayStart"></td>
            <td data-bind="text: reason"></td>
            <td data-bind="text: lastMonthExcess"></td>
            <td><button type="button" name="aaa" value="aaa">編集</button><span data-bind="text: pnName"></span></td>
            <td data-bind="text: pnSumExcess"></td>
            
            <td><span style="color=#f00;"><p data-bind="text: pnTodayStart, style: {color : (pnTodayStart==='09:00')? 'black' : 'red'}" /></span></td>
            <td><span style="color=#f00;"><p data-bind="text: pnReason, style: {color : (pnTodayStart==='09:00')? 'black' : 'red'}" /></span></td>
        </tr>
    </tbody>
</table>

jsdoit.js

ko.applyBindings({
    people: [
        { pjName: 'ABC社システム統合', empName: '○○　義男', lastDayEnd: "19:30", sumExcess: "10.0h",
         offWork: " ", todayStart: "09:00", reason: " ", lastMonthExcess: "15.0h",
         pnName: "△△　輝明", pnSumExcess: "7.0h", pnTodayStart: "09:00", pnReason: " "},
        { pjName: 'ABC社システム統合', empName: '○○　和正', lastDayEnd: "19:30", sumExcess: "15.5h",
         offWork: " ", todayStart: "09:00", reason: " ", lastMonthExcess: "11.5h",
         pnName: "△△　文子", pnSumExcess: "11.5h", pnTodayStart: "09:05", pnReason: "事故延着" },
        { pjName: 'ABC社システム統合', empName: '○○　睦夫', lastDayEnd: "19:30", sumExcess: "13.5h",
         offWork: " ", todayStart: "09:00", reason: " ", lastMonthExcess: "15.5h",
         pnName: "△△　浩二", pnSumExcess: "6.5h", pnTodayStart: "09:00", pnReason: " " }
    ]
});



/*
$(function() {
  $('#basicExample').timepicker();
});
*/