[RESOLVED]How to add html elements dynamically using JavaScript?

AJAX, HTML, Image, Jquery, Knockout, Table, View, Web Forms, , , , , , ,

I have two image buttons Add and Remove, following these two buttons i have a DDL and TXTBox.

My Requirement is when i click on Add image button another row must appear showing ADD,Remove, DDL and TXTBox

and when i click on Remove the row must be deleted.

Hi,

If you are fine with knockout.js, check this:

<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
</head>
<body>
<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td>
                <input type="button" value="Add" data-bind="click: $root.addItem" />
            </td>
            <td>
                <input type="button" value="Remove" data-bind="click: $root.removeItem" />
            </td>
            <td>
                <select data-bind="options: $root.options, value: option, optionsText: 'text'"></select>
            </td>
            <td>
                <input data-bind="value: name" />
            </td>
        </tr>
    </tbody>
</table>
<script>
function Item(name, option) {
    var self = this;
    self.name = name;
    self.option = ko.observable(option);
}
function ViewModel() {
    var self = this;
    self.options = [{
        text: "one",
        val: 1
    }, {
        text: "two",
        val: 2
    }];

    // Editable data
    self.items = ko.observableArray([
    new Item("Steve", self.options[0]),
    new Item("Bert", self.options[0])]);
    self.addItem = function () {
        self.items.push(new Item("", self.options[0]));
    }
    self.removeItem = function (item) {
        self.items.remove(item);
    }
}
ko.applyBindings(new ViewModel());
</script>
</body>
</html>

The below url uses pure javascript alone to achive the same functionality:

http://www.joegarrepy.com/tableaddrow_jscript.htm

maybe you need it. hope this help you

http://stackoverflow.com/questions/171027/add-table-row-in-jquery

Leave a Reply