Implement Dynamic Table with DropDownList in HTML using jQuery

In this article I will explain with an example, how to implement dynamic Table with DropDownList in HTML using jQuery.

When the Add Button is clicked, a new Table Row with a DropDownList will be dynamically created and added to the HTML Table and when the Remove Button is clicked, the Table Row with DropDownList will be removed from the HTML Table using jQuery.

Implementing Dynamic Table with DropDownList in HTML using jQuery

The following HTML Markup consists of an HTML Button which when clicked will dynamically create and add a dynamic Table Row with a DropDownList and a Button and add the dynamic Table Row to the HTML Table.

<head>

</head>

<body>

<hr />

function AddDropDownList() {

//Build an array containing Customer records.

var customers = [

{ CustomerId: 1, Name: "John Hammond", Country: "United States" },

{ CustomerId: 2, Name: "Mudassar Khan", Country: "India" },

{ CustomerId: 3, Name: "Suzanne Mathews", Country: "France" },

{ CustomerId: 4, Name: "Robert Schidner", Country: "Russia" }

];

//Create a DropDownList element.

var ddlCustomers = $("<select />");

//Add the Options to the DropDownList.

$(customers).each(function () {

var option = $("<option />");

//Set Customer Name in Text part.

option.html(this.Name);

//Set Customer CustomerId in Value part.

option.val(this.CustomerId);

//Add the Option element to DropDownList.

ddlCustomers.append(option);

});

//Reference the container Table.

var tblContainer = $("#tblContainer");

//Add the Table row.

var row = tblContainer[0].insertRow(-1);

//Add the DropDownList to Table Row.

var cell = row.insertCell(-1);

$(cell).append(ddlCustomers);

//Create a Remove Button.

var btnRemove = $("<input type = 'button' value = 'Remove'/>");

btnRemove.click(function () {

//Determine the reference of the Row using the Button.

var row = btnRemove.closest("TR");

//Delete the Table row.

row.remove();

});

//Add the Remove Buttton to Table Row.

cell = row.insertCell(-1);

$(cell).append(btnRemove);

};

</script>

</body>

</html>

Explanation:

Adding dynamic Table Row with Dynamic DropDownList

When the Add button is clicked, the AddDropDownList JavaScript function is called. Inside the JavaScript function, first a JSON Array is generated.

Then a dynamic DropDownList element is created and then using loop all items from the JSON array are added to the dynamic DropDownList element.

Note: For more details on populating HTML DropDownList using JSON Array, please refer my article Populate DropDownList from JSON Array using jQuery.

Once populated the dynamic DropDownList is added to the HTML Table Row which later will be added to the main Container HTML Table.

Deleting Dynamic DropDownList

For the Delete functionality, a dynamic Button named Remove is created and added to the HTML Table Row which contains the DropDownList.

The Remove button is also assigned with an OnClick event handler inside which, first the reference the child HTML Row which contains the DropDownList and also the Remove Button is determined and then using the Index, the HTML Row is removed from the HTML Table.

Screenshot