How to add a row on button click?

问题

in this fiddle there is an add timing button. There is default row having week day dropdown,from time textfield,to time textfield and hospital drop down.Now when I click on the add timing button I want another row having week day dropdown,from time textfield,to time textfield and hospital dropdown.

Can any body please tell me how to do that?

This is my knockout code

var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
    this.id = ko.observable(id);
    this.day = ko.observable(day);
    this.fromtime = ko.observable(fromtime);
    this.totime = ko.observable(totime);
    this.hospital = ko.observable(hospital);
    this.hospitalId = ko.observable(hospitalId);
};

var Patientp = function () {
    this.id = ko.observable(idValue);
    this.name = ko.observable(nameValue);
    this.degree = ko.observable(degreeValue);
    this.gender = ko.observable(genderValue);
    //this.consultant= ko.observableArray(consultantArrValue);
    this.username = ko.observable(usernameValue);
    this.password = ko.observable(passwordValue);
    this.email = ko.observable(emailValue);
    this.mobile = ko.observable(mobileValue);
    this.imgFile = ko.observable(imgFileValue);
    this.imgSrc = ko.observable(imgSrcValue);
    this.imagePath = ko.observable(imagePathValue);
    this.userid = ko.observable(useridValue);
    this.department = ko.observable(departmentValue);
    //this.consultant= ko.observableArray(consultantArrValue);
    //this.consultant= ko.observable(consultantValue);
    this.addSlot = function (doctor) {


        var docSchedule = new DocSchedule();
        iter = iter + 1;
        docSchedule.id(iter);

    }


}
idValue = 'hi';
useridValue = 'hi';
nameValue = 'hi';
addressValue = 'adress';
genderValue = 'hi';
mobileValue = 'hi';
//these fields are not available
usernameValue = 'hi';
passwordValue = 'hi';
emailValue = 'hi';
imgFileValue = 'imagefileValue';
imgSrcValue = 'ui_resources/img/profile_pic.png';
imagePathValue = 'imagePathValue';
consultantArrValue = null; //'${currentpatient.user.name}';
consultantValue = "d1";
degreeValue = 'hi';
departmentValue = 'hi';



var iter = 0;
var patp = new Patientp();
ko.applyBindings(patp);

回答1:

1. You don't have observableArray schedules in Patientp doctor.schedules.push(docSchedule); throws Uncaught TypeError: Cannot read property 'push' of undefined

Try this:

var iter = 0;
var DocSchedule = function (id, day, fromtime, totime, hospital, hospitalId) {
    this.id = ko.observable(id);
    this.day = ko.observable(day);
    this.fromtime = ko.observable(fromtime);
    this.totime = ko.observable(totime);
    this.hospital = ko.observable(hospital);
    this.hospitalId = ko.observable(hospitalId);
};

var Patientp = function () {
    this.id = ko.observable(idValue);
    this.name = ko.observable(nameValue);
    this.degree = ko.observable(degreeValue);
    this.gender = ko.observable(genderValue);
    this.username = ko.observable(usernameValue);
    this.password = ko.observable(passwordValue);
    this.email = ko.observable(emailValue);
    this.mobile = ko.observable(mobileValue);
    this.imgFile = ko.observable(imgFileValue);
    this.imgSrc = ko.observable(imgSrcValue);
    this.imagePath = ko.observable(imagePathValue);
    this.userid = ko.observable(useridValue);
    this.department = ko.observable(departmentValue);
    this.schedulers = ko.observableArray([]);
}
idValue = 'hi';
useridValue = 'hi';
nameValue = 'hi';
addressValue = 'adress';
genderValue = 'hi';
mobileValue = 'hi';
usernameValue = 'hi';
passwordValue = 'hi';
emailValue = 'hi';
imgFileValue = 'imagefileValue';
imgSrcValue = 'ui_resources/img/profile_pic.png';
imagePathValue = 'imagePathValue';
consultantArrValue = null;
consultantValue = "d1";
degreeValue = 'hi';
departmentValue = 'hi';

function vm() {
    var self = this;
    self.person = new Patientp();
    self.schedule = new DocSchedule();
    self.schedules = ko.observableArray([new DocSchedule(iter)]);

    self.addSlot = function () {
        console.log('added');
        iter++;
        var docSchedule = new DocSchedule(iter);
        self.schedules.push(docSchedule);
    };

    self.removeSlot = function () {
        console.log('removed');
        self.schedules.remove(this);
    }
};
var viewModel = new vm();
ko.applyBindings(viewModel, document.getElementById('addDoctorSchedules'));

Here is the Demo

来源：https://stackoverflow.com/questions/23441061/how-to-add-a-row-on-button-click