We Keep Coding

how to auto increment cell id's when cloning table row using JavaScript?

I'm trying to create a function in java script to add a row to a table by incrementing the id, I have two selects,
1- first select we select course or training
2- title depending on first select for example when I choose course in title I will have all the courses
my problem is that when i click on add new row it adds the row but it does not change title
function addNewRow(tabl) {
this.event.preventDefault();
let tab = document.getElementById(tabl);
let rowCount = tab.rows.length;
let cellCount = tab.rows[0].cells.length;
let row = tab.insertRow(rowCount);
for (let i = 0; i < cellCount; i++) {
let cell = row.insertCell(i);
if (i < cellCount - 1) {
//cell.innerHTML='';
cell.innerHTML = tab.rows[1].cells[i].innerHTML;
} else {
cell.innerHTML = '';
}
}
}
<div class="table-responsive">
<label for="objetinscription"><h4>Vos Objet D'inscription</h4></label>
<table class="table table-hover" id="objetinscription">
<caption>
<button class="parene-btn bg-bleu" onclick="addNewRow('objetinscription')">Ajouter</button>
</caption>
<thead>
<tr>
<th>Cours</th>
<th>Intitulé</th>
<th></th>
</tr>
</thead>
<tr>
<td><select class="form-select" id="typecours" onchange="onchange_inscription()" name="cours[]">
<option selected value="">-- Faites votre choix --</option>
<option value="Cours">Cours</option>
<option value="Formation">Formation</option>
</select>
</td>
<td>
<select id="intitule" name="intitule[]" class="form-select">
</select>
</td>
<td>
<input class="blue" type="button" class="btn" value="Supprimer" onclick="deleteRow('objetinscription',this)"/>
</td>
</tr>
</table>
</div>

I want to dynamically add row data to HTML Table

I have two input fields, date and miles.
The HTML table has those columns. How do I grab the input values and on "submit" button, insert that data into a new row in the table?
var mileSubmit = document.getElementById("add-mileage");
mileSubmit.addEventListener("click", function () {
const date = document.getElementById("date_miles").value;
const mileage = document.getElementById("miles").value;
console.log(date, mileage);
document
.getElementById("mile_book")
.appendChild(document.createElement("tr"));
});
<form class="miles_form">
<label for="date">Date:</label>
<input type="date" id="date_miles" name="date_miles">
<label>Enter Current Mileage:</label>
<input name="mileage" type="number" id="miles">
</form>
<table id="mile_book">
<tr>
<th>Date</th>
<th>Mileage</th>
</tr>
</table>

Create td elements and append them to the tr element that you created.
var mileSubmit = document.getElementById("add-mileage");
mileSubmit.addEventListener("click", function() {
const date = document.getElementById("date_miles").value;
const mileage = document.getElementById("miles").value;
const row = document.createElement("tr");
const td1 = document.createElement("td");
td1.innerText = date;
row.appendChild(td1);
const td2 = document.createElement("td");
td2.innerText = mileage;
row.appendChild(td2);
document
.getElementById("mile_book")
.appendChild(row);
});
<form class="miles_form">
<label for="date">Date:</label>
<input type="date" id="date_miles" name="date_miles">
<br>
<label>Enter Current Mileage:</label>
<input name="mileage" type="number" id="miles"><br>
<button type="button" id="add-mileage">Add</button>
</form>
<table id="mile_book">
<tr>
<th>Date</th>
<th>Mileage</th>
</tr>
</table>

How to count 1 option selected in dropdown from different rows added and display in textbox?

How to count 1 option selected in dropdown from different rows and display count in textbox?
I would like to count total value casualties of different rows and display count of total value casualties in textbox id injury.
Codes for dropdownlist && textbox && add row:
<select name="type" id="dd">
<option>Select a Type</option>
<option value="casualties">Casualties</option>
<option value="notcasualties">Not Casualties</option>
</select>
</select>
<label>Casualties:</label><input type="text" id="injury">
<btn><input type="button" value="addrow" onclick="addrow('dataTable2')" /></btn>
This codes are only able to display count = 1 in textbox id injury for the first row but not the added rows. I would like to total up count of value casualties after different rows are added. Could anyone help me.
$('#dd').change(function(){
var count = $('#dd option:selected').length;
$('.injury').val(count);
});
Thanks in advance!

Add onchange="select($(this).val())" in select tag and following function in script
function select(value){
if(value==="casualties"){
$("#injury").val(parseInt($("#injury").val())+1);
}
else{
$("#injury").val(parseInt($("#injury").val())-1);
if($("#injury").val()<0)
$("#injury").val("0");
}
}
and remove
$('#dd').change(function(){
var count = $('#dd option:selected').length;
$('.injury').val(count);
});

I made some changes that full fill your purpose
<html>
<head><title>table example</title></head>
<body>
<table id="dataTable2">
<tr>
<th></th>
<TH>Admin No/Staff ID:</TH>
<TH>Name:</TH>
<TH>Contact No:</TH>
<TH>Types of People Involved:</TH>
</TR>
<tr>
<td><input type="checkbox" name="checkbox[]"></td>
<TD><input type="text" name="id[]" id="id" /></TD>
<TD><input type="text" name="names[]" id="names"></TD>
<TD><input type="text" name="contacts[]" id="contacts" /> </TD>
<TD>
<select name="type" id="dd" class="selectpicker" data-style="select-with-transition" title="News Type" data-size="7" onchange="show()">
<option value="">Select a Type</option>
<option value="casualties" class="casualties-element">Casualties</option>
<option value="ncasualties">Non-Casualties</option>
<option value="witness">Witness</option>
</select>
</TD>
</tr>
</table>
<p>
<INPUT type="button" value="Add Row" onclick="addRow()" />
</p>
<table id="dataTable1" style="cellpadding:20px;">
<tr>
<th></th>
<TH>Admin No/Staff ID:</TH>
<TH>Name:</TH>
<TH>Contact No:</TH>
<TH>Types of People Involved:</TH>
</tr>
</table>
<p>
<label>No. of Casualties:</label>
<input type="text" name="injury" id="injury" class="injury span2" onClick="show();">
</p>
<script>
var count = 0;
function addRow() {
alert("test");
var table1 = document.getElementById('dataTable1');
var table = document.getElementById('dataTable2');
var did = document.getElementById('id').value;
var dname = document.getElementById('names').value;
var dcontact = document.getElementById('contacts').value;
var dddl = document.getElementById('dd');
var ddlvalue = dddl.options[dddl.selectedIndex].value;
if (ddlvalue == 'casualties') { count++; }
document.getElementById('injury').value = count;
var rowCount = table.rows.length;
//var row = table.insertRow(rowCount);
var row = table1.insertRow(1);
var colCount = table.rows[1].cells.length;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i);
//newcell.innerHTML = table.rows[1].cells[i].innerHTML;
//alert(newcell.childNodes);
switch (i) {
case 0:
newcell.innerHTML = did;
break;
case 1:
newcell.innerHTML = dname;
break;
case 2:
newcell.innerHTML = dcontact;
break;
case 3:
newcell.innerHTML = ddlvalue;
break;
}
}
}
</script>
</body>
</html>

Add data to a html table in Javascript

I have the following problem. I would like to add some data to a table using label values (in this case 7 & 5) but every time I try to add a value, the cells show the message "undefined". The main idea is to create a table which values are going to be used to draw a bar chart (graph) using the highcharts library
<h2>Add Row in JavaScript</h2>
<table id="table" cellspacing="0" border="1">
<tbody>
<tr>
<td>Name</td>
<td>Address</td>
</tr>
</tbody>
</table>
<button onclick="javascript:addRow('table')">Add row</button>
<br></br>
<label id="txt1" value="7" text="a">label 1</label>
<label id="txt2" value="5" text="b">label 2</label>
Script:
function addRow(id){
var label = ($("#txt1").val());
var label2 = ($("#txt2").val());
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label.value));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2.value));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}
Example in JFiddle
Code
Highcharts library
Code

It seems you have taken label instead of textbox, anyway below is working code.
function addRow(id) {
var label = ($("#txt1").attr("value"));
var label2 = ($("#txt2").attr("value"));
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr");
var data1 = document.createElement("td");
data1.appendChild(document.createTextNode(label));
var data2 = document.createElement("td");
data2.appendChild(document.createTextNode(label2));
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
}

JavaScript - Incrementing a value attribute

I have a problem that I can't get my head around (pretty new to JavaScript). Need to know how to increment variables in HTML with an document.createElement event (if that's the right terminology).
I need to increment the 'value' attribute every time the "Add Row" button is clicked and vise versa for the "Delete Row" button.
So far I have:
HTML
<div id='ctrl_container'>
<form action='$thisuri' method='post' id='spa' name='date2'>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<table id="dataTable" border='0' cellspacing='0' cellpadding='0' >
<tr>
<th> Select </th>
<th> ID </th>
<th> Question </th>
</tr>
<tbody>
<tr>
<td> <input type="checkbox" name="chk[]" /> </td>
<td> 1<input type="hidden" name="Q[]" value="1" /> </td>
<td> <input type="text" name="txtbox[]" /> </td>
</tr>
</tbody>
</table>
<input type='Submit' value='Submit Planned Audit' name='send'>
</form>
</div>
JavaScript
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = document.getElementById(tableID).getElementsByTagName('tbody')
[1].getElementsByTagName('tr').length;
var row = table.insertRow(rowCount +1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "hidden";
element1.name = "Q[]";
element1.value = rowCount +1;
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;
}
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) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
Can someone give me some pointers?

Have a look at this jsFiddle: http://jsfiddle.net/pDxnb/1/
It will definitely give you some pointers, since the row is actually being added visibly now. (The rowcount is not the problem here I guess)
The problem was and still is, is that you are adding empty cells as a row. I have added cell2 to the table and we can see things are happening.
var cell2 = row.insertCell(1);
cell2.appendChild(element1);
cell2.innerHTML = rowCount +1;
also what I did to debug is:
alert(rowCount);
You should be able to figure the rest out for yourself. If you need anymore help please comment below.
TIP:
Maybe it would be better to get your highest ID incremented everytime adding a row, and don't worry about the deletion. This way you can never have the same ID's

If you want to increment by name :
var hiddenInputs = document.getElementsByName("Q[]");
EDIT :
for (var i = 0; i <= hiddenInputs.length; i++) {
hiddenInputs[i].value = i + 1;
}
Decrement has the same logic. Now, value of the hiddenInput(DOM element) consist your row count