Блог

ko.html

 lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta http-equiv="X-UA-Compatible" content="IE=edge"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link rel="stylesheet" type="text/css" href="style.css"gt;  lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"gt;lt;/scriptgt;  lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"gt;lt;/scriptgt;  lt;titlegt;FORMlt;/titlegt; lt;/headgt; lt;bodygt; lt;div class="row geneassayform"gt; lt;div class="col-md-4"gt;   lt;form data-bind="with:selectedField"gt;  lt;div class="form-group" gt;    lt;label for="form_geneassaycode"gt;Name:lt;/labelgt;  lt;input type="text" class="form-control" id="form_geneassaycode" placeholder="Enter name" data-bind="value:FieldName"/gt;   lt;/divgt;  lt;div class="form-group"gt;  lt;label for="form_geneassayname"gt;Age:lt;/labelgt;  lt;input type="text" class="form-control" id="form_geneassayname" placeholder="Enter age" data-bind="value:FieldAge"/gt;   lt;/divgt;  lt;div class="form-group"gt;  lt;label for="form_geneassayname"gt;Gender:lt;/labelgt;  lt;input type="radio" value="Male" data-bind="checked: radioSelectedOptionValue" /gt;Male  lt;input type="radio" value="Female" data-bind="checked: radioSelectedOptionValue" /gt;Female   lt;/divgt;     lt;div class="form-group"gt;  lt;label for="form_geneassaycomments"gt;Descriptionlt;/labelgt;   lt;textarea class="form-control" id="form_geneassaycomments" placeholder="Enter your comments" data-bind="value:DescriptionComments"/gt;lt;/textareagt;  lt;/divgt;   lt;div class="form-group"gt;   lt;labelgt;State: lt;/labelgt;  lt;select data-bind="value:selectedValue, optionsText:???" /gt;  lt;option value="" disabled selected hiddengt;Select Statelt;/optiongt;  lt;option value="kerala"gt;Keralalt;/optiongt;  lt;option value="tamilnadu"gt;tamilnadult;/optiongt;  lt;/selectgt;  lt;/divgt;   lt;div class="form-group"gt;  lt;label for="form_geneassayname"gt;Language:lt;/labelgt;  lt;input type="checkbox" value="Malayalam" data-bind="checked: checkboxSelectedOptionValue" /gt;Malayalam  lt;input type="checkbox" value="English" data-bind="checked: checkboxSelectedOptionValue" /gt;English  lt;input type="checkbox" value="Hindi" data-bind="checked: checkboxSelectedOptionValue" /gt;Hindi   lt;/divgt;     lt;/formgt;  lt;button class="btn btn-primary" data-bind="click:addNewField"gt;Submitlt;/buttongt;       lt;/divgt; lt;/divgt; lt;div class="row"gt; lt;div class="col-md-6"gt;  lt;div class="panel panel-default"gt;    lt;div class="panel-body"gt;    lt;table class="table table-condensed table-hover"gt;  lt;trgt;   lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;  lt;thgt;lt;/thgt;    lt;/trgt;   lt;tbodygt;  lt;!-- ko foreach: Fields --gt;  lt;trgt;  lt;td data-bind="text: FieldName"gt;lt;/tdgt;  lt;td data-bind="text: FieldAge"gt;lt;/tdgt;   lt;td data-bind="text: radioSelectedOptionValue"gt;lt;/tdgt;  lt;td data-bind="text: DescriptionComments"gt;lt;/tdgt;  lt;td data-bind="text: selectedValue"gt;lt;/tdgt;  lt;td data-bind="text: checkboxSelectedOptionValue"gt;lt;/tdgt;  lt;tdgt;lt;button data-bind="click: $parent.remove"gt;Removelt;/buttongt;lt;/tdgt;  lt;/trgt;  lt;!-- /ko --gt;  lt;/tbodygt;   lt;/tablegt;      lt;/divgt;  lt;/divgt; lt;/divgt; lt;script type="text/javascript" src="knock.js"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

knock.js

 var formData = '[{"FieldName":"Name","FieldAge":"Age","radioSelectedOptionValue":"Gender","DescriptionComments":"Description","selectedValue":"State","checkboxSelectedOptionValue":"Language"}]';  console.log(formData);   var a = ko.mapping.fromJSON(formData); console.log(a()); var viewModel ={};  var selectedField=ko.observable();     var addNewField=function(){    var newField ={"FieldName":ko.observable(""),"FieldAge":ko.observable(""),"radioSelectedOptionValue":ko.observable(""),"DescriptionComments":ko.observable(""),"selectedValue":ko.observable(""),"checkboxSelectedOptionValue":ko.observable("")};  a.push(newField);  selectedField(newField); }      viewModel.Fields=a; viewModel.addNewField=addNewField;   ko.applyBindings(viewModel);   viewModel.remove = function (row) {  console.log(row);  viewModel.Fields.remove(row); };  

введите описание изображения здесь Флажок и значения выпадающего списка не отображаются в таблице Я не знаю, в чем проблема в этом коде пожалуйста, помогите мне решить эту проблему Заранее спасибо Я дал html и js код Я сделал код js для флажка и выпадающего списка, но он не отображается в таблице