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);
	}
}
Triangle Background css 01

Triangle Background css 01

Tablet style code texte

Tablet style code texte

SwiperJS style02 avec 6 colonnes

SwiperJS style02 avec 6 colonnes

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Loading style book loader

Loading style book loader

Image hover 03

Image hover 03

Google Style Login

Google Style Login

Form login 02

Form login 02

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js