In this article I will explain with an example, how to implement dynamic Table with DropDownList in HTML using JavaScript.
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 JavaScript.
Implementing Dynamic Table with DropDownList in HTML using JavaScript
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.
<html xmlns="">
    <input type="button" id = "btnAdd" onclick = "AddDropDownList()" value = "Add DropDownList" />
    <hr />
    <table id = "tblContainer" border="0" cellpadding="5" cellspacing="5"></table>
    <script type="text/javascript">
        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 = document.createElement("SELECT");
            //Add the Options to the DropDownList.
            for (var i = 0; i < customers.length; i++) {
                var option = document.createElement("OPTION");
                //Set Customer Name in Text part.
                option.innerHTML = customers[i].Name;
                //Set CustomerId in Value part.
                option.value = customers[i].CustomerId;
                //Add the Option element to DropDownList.
            //Reference the container Table.
            var tblContainer = document.getElementById("tblContainer");
            //Add the Table row.
            var row = tblContainer.insertRow(-1);
            //Add the DropDownList to Table Row.
            var cell = row.insertCell(-1);
            //Create a Remove Button.
            var btnRemove = document.createElement("INPUT");
            btnRemove.value = "Remove";
            btnRemove.type = "button";
            btnRemove.onclick = function () {
                //Determine the reference of the Row using the Button.
                var row = btnRemove.parentNode.parentNode;
                //Delete the Table row using its Index.
            //Add the Remove Buttton to Table Row.
            cell = row.insertCell(-1);
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 JavaScript.
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.
Implement Dynamic Table with DropDownList in HTML using JavaScript
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.