CSC Jisi-2

jsdoit.css

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

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

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

jsdoit.html

<br>

<button >前月</button>
<U>2022年2月1日現在</U>のPJメンバーアサイン状況
<button >翌月</button>

<br>
<table>


    <tr bgcolor="#6f6">
        <th bgcolor="#fc0">PJコード</th><th bgcolor="#fc0">PJ名</th><th bgcolor="#fc0">PL/PM氏名</th><th bgcolor="#6f6">社員氏名</th><th bgcolor="#6f6">社員No.</th>
        <th>PJ開始</th><th>PJ終了予定</th><th>(以前のPJ)</th><th>備考</th>
    </tr>
<!--     <tr>
        <td>07200</td><td>ABC社システム統合</td><td>○○　義男</td><td>○○　義男</td>
        <td>38950</td><td>2021/11/01</td><td>2022/03/31</td><td>LMN</td><td>cc</td><td></td>
    
    </tr>
    <tr>
        <td>&nbsp;〃</td><td>&nbsp;〃</td><td>&nbsp;〃</td><td>○○　和正</td>
        <td>33651</td><td>2021/11/01</td><td>2022/03/31</td><td>STY</td><td>cc</td><td></td>
    </tr>
    <tr>
        <td>&nbsp;〃</td><td>&nbsp;〃</td><td>&nbsp;〃</td><td>○○　睦夫</td>
        <td>44739</td><td>2021/11/15</td><td>2022/03/31</td><td>LMN</td><td>cc</td><td></td>
    </tr> -->
    

    
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: pjCode"></td>
            <td data-bind="text: pjName"></td>
            <td data-bind="text: plName"></td>
            <td data-bind="text: empName"></td>
            <td data-bind="text: empNo"></td>
            <td data-bind="text: pjStart"></td>
            <td data-bind="text: pjEnd"></td>
            <td data-bind="text: lastPj"></td>
            <td data-bind="text: comment"></td>
        </tr>
    </tbody>
    

</table>

jsdoit.js

/* var viewModel = {
    people： [
        { pj: '07200', plname: "○○　義男", name: "○○　睦夫" }
    ]
};
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
}*/


//ko.applyBindings(new AppViewModel());

/*
ko.applyBindings({
    people： [
        { pj : '07200', plname : "○○　義男", name : "○○　睦夫" },
        { pj : '07200', plname : "○○　義男", name : "○○　睦夫" }
    ]
});
*/

ko.applyBindings({
    people: [
        { pjName: 'ABC社システム統合', empName: '○○　義男', pjCode: "07200", plName: "○○　義男",
         empNo: "38950", pjStart: "2021/11/01", pjEnd: "2022/03/31", lastPj: "LMN社生産管理システム",
         comment: "　", pnSumExcess: "7.0h", pnTodayStart: "09:00", pnReason: " "},
        { pjName: 'ABC社システム統合', empName: '○○　和正', pjCode: "07200", plName: "○○　義男",
         empNo: "33651", pjStart: "2021/11/01", pjEnd: "2022/03/31", lastPj: "STY社データ移行",
         comment: "　", pnSumExcess: "11.5h", pnTodayStart: "09:05", pnReason: "事故延着" },
        { pjName: 'ABC社システム統合', empName: '○○　睦夫', pjCode: "07200", plName: "○○　義男",
         empNo: "44739", pjStart: "2021/11/15", pjEnd: "2022/03/31", lastPj: "LMN社生産管理システム",
         comment: "　", pnSumExcess: "6.5h", pnTodayStart: "09:00", pnReason: " " }
    ]
});
     /*
<!--         <td>07200</td><td>ABC社システム統合</td><td></td><td>○○　義男</td>
        <td>38950</td><td>2021/11/01</td><td>2022/03/31</td><td>LMN</td><td>cc</td><td></td>
        
            </tr>
            <tr>
        <td>&nbsp;〃</td><td>&nbsp;〃</td><td>&nbsp;〃</td><td>○○　和正</td>
        <td>33651</td><td>2021/11/01</td><td>2022/03/31</td><td>STY</td><td>cc</td><td></td>
            </tr>
            <tr>
        <td>&nbsp;〃</td><td>&nbsp;〃</td><td>&nbsp;〃</td><td>○○　睦夫</td>
        <td>44739</td><td>2021/11/15</td><td>2022/03/31</td><td>LMN</td><td>cc</td><td></td> -->
            
            

<!--         {   pj : '07200',
            plname : "○○　義男",
            name : "○○　義男" },
        {   pj : '07200',
            plname : "○○　義男",
            name : "○○　和正" }, */