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:
maybe you need it. hope this help you
http://stackoverflow.com/questions/171027/add-table-row-in-jquery