JSFiddle - React, Tailwind, and code Playground

by ks2512

HTML

<h2>All Students</h2>

<table>
    <thead>
        <tr>
            <th>StudentID</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: AllStudents">
        <tr>
            <td data-bind="text: StudentId"></td>
            <td data-bind="text: FirstName"></td>
            <td data-bind="text: LastName"></td>
            <td> <!--<span data-bind="text: $parent.AllScores().length"><span>-->
             <select data-bind="options:$parent.AllScores,
                   optionsText: 'Marks',
                   optionsValue: 'scoreId'
                   optionsCaption: 'Choose...'">                       
              </select>
           </td>
       </tr>
    </tbody>
</table>

JavaScript

var students = [{
    "$id": "1",
        "Id": 1,
        "FirstName": "Joe",
        "LastName": "User",
        "StudentId": 1234567
}, {
    "$id": "2",
        "Id": 2,
        "FirstName": "Betty",
        "LastName": "Rogers",
        "StudentId": 2345678
}, {
    "$id": "3",
        "Id": 3,
        "FirstName": "Steven",
        "LastName": "Sanders",
        "StudentId": 3456789
}];

var courses = [{
    "$id": "1",
        "Id": 1,
        "CourseName": "CptS 122"
}, {
    "$id": "2",
        "Id": 2,
        "CourseName": "CptS 223"
}];

var score = [{
    "$id": "1",
        "scoreId": 1,
        "Marks": 70
}, {
    "$id": "2",
        "scoreId": 2,
        "Marks": 60
}, {
    "$id": "3",
        "scoreId": 3,
        "Marks": 50
}, {
    "$id": "4",
        "scoreId": 4,
        "Marks": 40
}];

function AppViewModel() {

    this.AllStudents = ko.observableArray(students);
    this.AllCourses = ko.observableArray(courses);
    this.AllScores = ko.observableArray(score);
    this.CurrentCourse = ko.observable("1");

    var self = this;
}

ko.applyBindings(new AppViewModel());