Bootstrap Form Table

by etiennenoel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js"></script>
<form method="POST" />
<table class="table table-hover table-bordered">
    <thead>
        <!-- This will be generated with Twig so it is normal that is does not correspond to the data below -->
        <tr>
            <th style="width:50px;">Nom</th>
            <th colspan="6" style="text-align:center">Élément #1</th>

        </tr>
        <tr>
            <th></th>
            <th class="try">1</th>
            <th class="try">2</th>
            <th class="try">3</th>
            <th class="try">4</th>
            <th class="try">5</th>
            <th class="try">6</th>

        </tr>
    </thead>
    <tbody data-bind="foreach: playersEvaluation()">
        <tr data-bind="">
            <td data-bind="text: $data.playerName"></td>
            <!-- ko foreach: evaluatedExercises -->
            <!-- ko foreach:tries -->
            <td>
                <input type="text" data-bind="value: result" />
            </td>
            <!-- /ko -->
            <!-- /ko -->
        </tr>
    </tbody>
</table>
<input type="hidden" name="a" data-bind="value: exportToJSON()" />
<pre data-bind="text: exportToJSON()">
    
</pre>
<input type="submit" />
</form>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 input[type="text"] {
    font-size:10pt;
    margin:0px;
    text-align:center;
    width:30px;
}
.try {
    width:30px;
    text-align:center;
    vertical-align:middle;
}
.table th {
    text-align:center;
    vertical-align:middle;
}
.table td {
    text-align:center;
    vertical-align:middle;
}

JavaScript

function appViewModel() {
    var self = this;

    self.playersEvaluation = ko.observableArray();
    self.exportToJSON = ko.computed(function() {
          return ko.mapping.toJSON(self.playersEvaluation())
    }, this);
}

var viewModel = new appViewModel();

var dataContent = [{
    playerId: 2,
    playerName: "allo",
    evaluatedExercises: [{
        id: 1,
        evaluationExerciseId: 1,
        numberOfTries: 6,
        tries: [{
            id: 0,
            number: 0,
            result: 0
        }, {
            id: 0,
            number: 0,
            result: 0
        }]
    }]
}, {
    playerId: 2,
    playerName: "allo",
    evaluatedExercises: [{
        id: 1,
        evaluationExerciseId: 1,
        numberOfTries: 6,
        tries: [{
            id: 0,
            number: 0,
            result: 0
        }, {
            id: 0,
            number: 0,
            result: 0
        }]
    }]
}]


viewModel.playersEvaluation(ko.mapping.fromJS(dataContent));
ko.applyBindings(viewModel)