Add Remove dynamic rows with dynamic ID of input in HTML table

<!DOCTYPE html>
<html>
<head>
	<title> Add/Remove dynamic rows with dynamic ID of input in HTML table | par NGLESSON </title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Add/Remove dynamic rows with dynamic ID of input in HTML table">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<BODY class="container">
<div class="row">
    <div class="col-12 mt-5 " nowrap>
		<INPUT type="button" class="btn btn-md btn-success" value="Add Row" onclick="addRow('dataTable')" />
		<INPUT type="button" class="btn btn-md btn-danger" value="Delete Row" onclick="deleteRow('dataTable')" />
	</div>
	<div class="col-12 mt-5">
		<TABLE id="dataTable" class="table table-hover">
			<TR>
				<TD><INPUT type="checkbox" name="selectedinput" id="selectedinput" /></TD>
				<TD><INPUT type="text" name="inputname" id="inputname" class="form-control"/></TD>
				<TD><INPUT type="number" name="inputage" id="inputage" class="form-control"/></TD>
				<TD>
					<SELECT name="inputcountry" id="inputcountry" class="form-control">
					    <OPTION value="0"></OPTION>
						<OPTION value="01">Maroc</OPTION>
						<OPTION value="02">France</OPTION>
						<OPTION value="03">Canada</OPTION>
						<OPTION value="04">Mali</OPTION>
					</SELECT>
				</TD>
			</TR>
		</TABLE>
	</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</BODY>
</HTML>

                                    

function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	var colCount = table.rows[0].cells.length;
	for(var i=0; i<colCount; i++) {
		var newcell	= row.insertCell(i);
		newcell.innerHTML = table.rows[0].cells[i].innerHTML;
		//alert(newcell.childNodes);
		switch(newcell.childNodes[0].id) {
			case "inputname":
					newcell.childNodes[0].value = "";
					newcell.childNodes[0].id = "inputname"+rowCount;
					break;
			case "inputage":
					newcell.childNodes[0].value = "";
					newcell.childNodes[0].id = "inputage"+rowCount;
					break;
			case "selectedinput":
					newcell.childNodes[0].checked = false;
					newcell.childNodes[0].id = "selectedinput"+rowCount;
					break;
			case "inputcountry":
					newcell.childNodes[0].selectedIndex = 0;
					newcell.childNodes[0].id = "inputcountry"+rowCount;
					break;
		}
	}
}

function deleteRow(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) {
			if(rowCount <= 1) {
				alert("Cannot delete all the rows.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
	}catch(e) {
		alert(e);
	}
}
Bootstrap Cookie Alert pages

Bootstrap Cookie Alert pages

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Convertir une div en image

Convertir une div en image

Input valid invalid HTML CSS

Input valid invalid HTML CSS

Partager sur les réseaux sociaux

Partager sur les réseaux sociaux

Planète animée style01

Planète animée style01

Pure CSS Percentage Circle

Pure CSS Percentage Circle

SwiperJS style01

SwiperJS style01

Timeline style04

Timeline style04

creation dune icone de prechargement avec css

creation dune icone de prechargement avec css

page scroll progress bar

page scroll progress bar

toggle switch style03

toggle switch style03