mh-github · February 15, 2017 16:58
diff --git a/addDeleteScreenRowWithComboBox.html b/addDeleteScreenRowWithComboBox.html
 <html>
 <head>
    <title> Dynamically add / delete rows in HTML page </title>

    <style>
        .dropdown {
            position: relative;
            width: 200px;
        }
        .dropdown select
        {
            width: 100%;
        }
        .dropdown > * {
            box-sizing: border-box;
            height: 1.5em;
        }
        .dropdown select {
        }
        .dropdown input {
            position: absolute;
            width: calc(100% - 20px);
        }
    </style>
    
    <script language="javascript">
        var options = ["", 'Option 1', 'Option 2', 'Option 3']
        function updateSelectValue() {
            this.previousElementSibling.value = this.value;
            this.previousElementSibling.focus();
        }

        var globalRowCount = 2;
        function addScreenRow(tableID)
        {
            var table     = document.getElementById(tableID);
            var rowCount  = table.rows.length;
            var row       = table.insertRow(rowCount);

            var cell1     = row.insertCell(0);
            var element1  = document.createElement("input");
            element1.type = "checkbox";
            cell1.appendChild(element1);

            var cell2       = row.insertCell(1);
            cell2.innerHTML = globalRowCount; //rowCount + 1;

            var cell3       = row.insertCell(2);
            var element2    = document.createElement("input");
            element2.type   = "text";
            cell3.appendChild(element2);

            var cell4       = row.insertCell(3);
            var div         = document.createElement("div");
            div.classList.add("dropdown");

            var tf          = document.createElement("input");
            tf.classList.add("input");
            div.appendChild(tf);

            var sel = document.createElement("select");
            sel.classList.add("select");

            var opt;
            for (var i=0; i<options.length; i++) {
                opt      = document.createElement("option");
                opt.text = options[i];
                sel.appendChild(opt);
            }

            sel.addEventListener("change", updateSelectValue);
            div.appendChild(sel);

            cell4.appendChild(div);

            globalRowCount++;
        }

        function delScreenRow(tableID)
        {
            try {
                var table    = document.getElementById(tableID);
                var rowCount = table.rows.length;

                for (var i=0; i<rowCount; i++) {
                    var row    = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if (null != chkbox && true == chkbox.checked) {
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
                }
            }
            catch(e) {
                alert(e);
            }
        }

    </script>
 </head>

 <body>
    <table id="dataTable" border="1">
        <tr>
            <td><input type="checkbox" name="chk"/></td>
            <td> 1 </td>
            <td> <input type="text" /> </td>
            <td> 
                <div class="dropdown">
                    <input type="text" name="field" id="field" />
                    <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
                        <option></option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                </div>
            </td>
        </tr>
    </table>

    <input type="button" value="Add Row"    onclick="addScreenRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="delScreenRow('dataTable')" />

 </body>
 </html>
	<html>
	<head>
	<title> Dynamically add / delete rows in HTML page </title>

	<style>
	.dropdown {
	position: relative;
	width: 200px;
	}
	.dropdown select
	{
	width: 100%;
	}
	.dropdown > * {
	box-sizing: border-box;
	height: 1.5em;
	}
	.dropdown select {
	}
	.dropdown input {
	position: absolute;
	width: calc(100% - 20px);
	}
	</style>

	<script language="javascript">
	var options = ["", 'Option 1', 'Option 2', 'Option 3']
	function updateSelectValue() {
	this.previousElementSibling.value = this.value;
	this.previousElementSibling.focus();
	}

	var globalRowCount = 2;
	function addScreenRow(tableID)
	{
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);

	var cell1 = row.insertCell(0);
	var element1 = document.createElement("input");
	element1.type = "checkbox";
	cell1.appendChild(element1);

	var cell2 = row.insertCell(1);
	cell2.innerHTML = globalRowCount; //rowCount + 1;

	var cell3 = row.insertCell(2);
	var element2 = document.createElement("input");
	element2.type = "text";
	cell3.appendChild(element2);

	var cell4 = row.insertCell(3);
	var div = document.createElement("div");
	div.classList.add("dropdown");

	var tf = document.createElement("input");
	tf.classList.add("input");
	div.appendChild(tf);

	var sel = document.createElement("select");
	sel.classList.add("select");

	var opt;
	for (var i=0; i<options.length; i++) {
	opt = document.createElement("option");
	opt.text = options[i];
	sel.appendChild(opt);
	}

	sel.addEventListener("change", updateSelectValue);
	div.appendChild(sel);

	cell4.appendChild(div);

	globalRowCount++;
	}

	function delScreenRow(tableID)
	{
	try {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;

	for (var i=0; i<rowCount; i++) {
	var row = table.rows[i];
	var chkbox = row.cells[0].childNodes[0];
	if (null != chkbox && true == chkbox.checked) {
	table.deleteRow(i);
	rowCount--;
	i--;
	}
	}
	}
	catch(e) {
	alert(e);
	}
	}

	</script>
	</head>

	<body>
	<table id="dataTable" border="1">
	<tr>
	<td><input type="checkbox" name="chk"/></td>
	<td> 1 </td>
	<td> <input type="text" /> </td>
	<td>
	<div class="dropdown">
	<input type="text" name="field" id="field" />
	<select onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
	<option></option>
	<option>Option 1</option>
	<option>Option 2</option>
	<option>Option 3</option>
	</select>
	</div>
	</td>
	</tr>
	</table>

	<input type="button" value="Add Row" onclick="addScreenRow('dataTable')" />
	<input type="button" value="Delete Row" onclick="delScreenRow('dataTable')" />

	</body>
	</html>
No results found