We Keep Coding

table heading not appearing on sorting in javascript

I am building a sample project named Tennis Club Management based on HTML,CSS,Javascript.In this i have html pages like profile.html, manageFees.html,index.js etc. In manageFees.html, when the page gets loaded, a dynamic table gets displayed which shows data from online API in tabular format and there is also a search box for searching the records.
Problem :- When i search a particular data(record) in search box. the search result gets displayed in the table , but the table heading gets disappeared and table CSS properties get distorted.
Below are the code files and Screenshots
index.js
/* --------------------MANAGE FEES PAGE------------------- */
/*----------TESTING CODE FOR SHOW FEES-----------*/
function showfees() {
console.log("Show Fees button clicked...");
document.querySelector(".showfees").style.display = "none";
document.querySelector("#feesregistration").style.display = "none";
if (istableCreated) {
document.querySelector("#table-responsive").style.display = "none";
}
document.querySelector(".searchbox").style.display = "block";
if (istableCreated == false) {
istableCreated = true;
var myTable = document.createElement("table");
myTable.className = "table-responsive";
myTable.id = "table-responsive";
myTable.style.marginLeft = "15%";
myTable.style.paddingLeft = "8%";
myTable.style.paddingRight = "11%";
document.body.appendChild(myTable);
var maintr = document.createElement("tr");
document.body.appendChild(myTable).appendChild(maintr);
var thmatchID = document.createElement("th");
thmatchID.innerHTML = "Match ID";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thmatchID);
var thmatchplayerName = document.createElement("th");
thmatchplayerName.innerHTML = "Player Name";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thmatchplayerName);
var thmatchDate = document.createElement("th");
thmatchDate.innerHTML = "Fees Date";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thmatchDate);
var thFeesAmount = document.createElement("th");
thFeesAmount.innerHTML = "Amount";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thFeesAmount);
var thMembershipType = document.createElement("th");
thMembershipType.innerHTML = "Membership Type";
document.body.appendChild(myTable).appendChild(maintr).appendChild(thMembershipType);
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
// console.log(this.responseText);
var JSONarr = JSON.parse(this.responseText);
console.log(JSONarr);
// ----------SUPER TESTING CODE-----------
for (var i = 0; i < JSONarr.length; i++) {
console.log(JSONarr[i].id, JSONarr[i].name, JSONarr[i].address.city, JSONarr[i].address.zipcode);
var myTr = document.createElement("tr");
document.body.appendChild(myTable).appendChild(myTr);
var tdID = document.createElement("td");
tdID.innerHTML = `${JSONarr[i].id}`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdID);
var tdplayerName = document.createElement("td");
tdplayerName.innerHTML = `${JSONarr[i].name}`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdplayerName);
var tdAddress = document.createElement("td");
tdAddress.innerHTML = `04/04/2020`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdAddress);
var tdFeesAmount = document.createElement("td");
tdFeesAmount.innerHTML = `10000`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdFeesAmount);
var tdMembershipType = document.createElement("td");
tdMembershipType.innerHTML = `Annually`;
document.body.appendChild(myTable).appendChild(myTr).appendChild(tdMembershipType);
}
}
};
xhttp.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhttp.send();
}
else {
document.querySelector("#table-responsive").style.display = "block";
}
if (statictableboolean == true) {
document.querySelector(".staticTable").style.display = "none";
}
// document.querySelector(".staticTable").style.display = "none";
}
//-------------SEARCHING IMPLEMENTATION IN SEARCH BOX----------------
function mySearch() {
var input, filter, found, table, tr, td, i, j;
input = document.getElementById("searchbox");
filter = input.value.toUpperCase();
table = document.getElementById("table-responsive");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td");
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
found = true;
}
}
if (found) {
tr[i].style.display = "";
found = false;
}
else {
tr[i].style.display = "none";
}
}
}
manageFees.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Manage Fees</title>
<!-- ADDING FONT AWESOME CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- ADDING BOOTSTRAP CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- ADDING STYLE.CSS -->
<link rel="stylesheet" href="/css/style.css">
</head>
<body onload="showfees()">
<!-- ADDING BUTTONS LIKE SHOW MATCHES, ADD MATCHES USING CSS BOOTSTRAP -->
<!-- <button type="button" class="btn btn-secondary showfees" onclick="showfees()">Show Fees</button> -->
<button type="button" class="btn btn-secondary addfees" onclick="addfees()">Add Fees</button>
<button type="button" class="btn btn-danger showfees" onclick="showfees()">Back</button>
<!-- ADDING SEARCH BAR -->
<input type="text" class="searchbox" id="searchbox" onkeyup="mySearch()" placeholder="Search by ID...">
<!-- CREATING REGISTRATION PAGE FOR ADDING FEES -->
<table class="feesregistration" id="feesregistration">
<!-- <tr>
<td>
<label>ID :</label>
</td>
<td>
<input type="text" class="feesid" id="feesid">
</td>
</tr> -->
<tr>
<td>
<label>Name :</label>
</td>
<td>
<input type="text" class="playerNameFees" id="playerNameFees" maxlength="40">
</td>
<td>
<label class="playerNameFeeserror"></label>
</td>
</tr>
<tr>
<td>
<label>Fees For :</label>
</td>
<td>
<select class="feesFor" id="feesFor">
<option value="select">---Select---</option>
<option value="court">Court</option>
<option value="tournament">Tournament</option>
<option value="both">Both</option>
</select>
</td>
<td>
<label class="feesForerror"></label>
</td>
</tr>
<tr>
<td>
<label>Fee Type :</label>
</td>
<td>
<select class="feesType" id="feesType">
<option value="select">---Select---</option>
<option value="monthly">Monthly</option>
<option value="halfyearly">Half Yearly</option>
<option value="annually">Annually</option>
</select>
</td>
<td>
<label class="feesTypeerror"></label>
</td>
</tr>
<tr>
<td>
<label>Date :</label>
</td>
<td>
<input type="date" class="feesdate">
</td>
<td>
<label class="feesdateerror"></label>
</td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-success savefees" onclick="saveFees()">SAVE</button>
</td>
<td>
<button type="button" class="btn btn-info clearfees" onclick="clearfees()">CLEAR</button>
</td>
</tr>
</table>
<!-- ADDING BOOTSTRAP JS -->
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
<!-- ADDING INDEX.JS -->
<script src="/js/sidebar.js"></script>
<script src="/js/index.js"></script>
</body>
</html>
Screenshots
Any solution please ?

how to get table rows select option value using checkbox

I have the following html table with select option in one of the columns. I want to display the values of the rows that are checked but don't know how to work with the select option value. Can someone help me modify the code? If not using DOM, can we just use PHP to get all checked values and store in $ variable? Finally I will submit the checked values and insert into table using PHP. Thanks a lot.
<?php
require_once("connMysql.php");
$stu_add = mysqli_query($db_link, "SELECT * FROM stu");
$rowcount = mysqli_num_rows($stu_add);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>how to get options value in html table</title>
</head>
<body>
<table id="table" border="1">
<tr>
<th style="text-align:center; width:70px">Classname</th>
<th style="text-align:center; width:100px">Student ID</th>
<th style="text-align:center; width:100px">Name</th>
<th style="text-align:center; width:100px">Grade</th>
<th style="text-align:center; width:100px">Select</th>
</tr>
<?php
if($stu_add-> num_rows > 0 ){
while ($row = $stu_add-> fetch_assoc()){
?>
<tr>
<td id="classname" style="text-align:center;"><?php echo $row['classname'];?></td>
<td id="stuid" style="text-align:center;"><?php echo $row['stuid'];?></td>
<td id="stu_name" style="text-align:center;"><?php echo $row['stu_name'];?></td>
<td><select name="grade" id="grade">
<option value="">-Please select-</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</td>
<td align="center">
<input type="checkbox" id="checked" name="checked[]" value="<?php echo $row['stuid'];?>">
</td>
</tr>
<?php
}
}
?>
<input type="text" id="classname" size="10">
<input type="text" id="stuid" size="10">
<input type="text" id="stu_name" size="10">
<input type="text" id="grade" size="10">
<button class="" onclick="showData()">Show data</button>
</table>
<script>
function showData()
{
var table = document.getElementById('table');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
// document.getElementById("classname").value = this.cells[0].innerHTML;
// document.getElementById("stuid").value = this.cells[1].innerHTML;
// document.getElementById("stu_name").value = this.cells[2].innerHTML;
// document.getElementById("grade").value = this.cells[3].innerHTML.options[0].text;
var a = this.cells[0].innerHTML;
var b = this.cells[1].innerHTML;
var c = this.cells[2].innerHTML;
var d = this.cells[3].innerHTML.options[0].text;
var data = a + b + c + d;
alert(data);
};
}
}
</script>

As the above user says you can get the id of the checkbox and use onchange then pass the value to the function.
```
$('#checkbox').change(function(){
var query = $(this).val();
showdata(query);
});
```

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>

Select box not changing while dynamically adding rows in a table

Hi iam able to add rows dynamically from the table below using javascript but the onchange function fired on the select box only works on the first row added how do you make it work for every row being added.Thanks.
<html>
<body>
<link href="style.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src='script.js'></script>
<table id="addProducts" border="1">
<tr>
<td>POI</td>
<td>Quantity</td>
<td>Price</td>
<td>Product</td>
<td>Add Rows?</td>
</tr>
<tr>
<td>1</td>
<td><input size=25 type="text" id="lngbox" readonly=true/></td>
<td><input size=25 type="text" id="price" readonly=true/></td>
<td>
<select name="selRow0" class="products">
<option value="value0">Product 1</option>
<option value="value1">Product 2</option>
</select>
</td>
<td><input type="button" id="delProducts" value="Delete" onclick="deleteRow(this)"/></td>
<td><input type="button" id="addmoreProducts" value="AddMore" onclick="insRow()"/></td>
</tr>
</table>
<div id="shw"></div>
</body>
</html>
$(function () {
$("select.products").on("change", function () {
var selected = $(this).val();
$("#price").val(selected);
})
});
function deleteRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('addProducts').deleteRow(i);
}
function insRow()
{
var x = document.getElementById('addProducts');
// deep clone the targeted row
var new_row = x.rows[1].cloneNode(true);
// get the total number of rows
var len = x.rows.length;
// set the innerHTML of the first row
new_row.cells[0].innerHTML = len;
// grab the input from the first cell and update its ID and value
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
// grab the input from the first cell and update its ID and value
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
// append the new row to the table
x.appendChild(new_row);
}

I've updated your code. This should work now. Look at this jsfiddle:
JS:
$(function () {
$(document).on('change', 'select.products', function(){
var selected = $(this).val();
$(this).parents('tr').find('.price').val(selected);
});
$(document).on('click', '.addProduct', function(){
var ele = $(this).parents('tr').clone();
ele.find('input[type=text]').val('');
$(this).parents('tr').after(ele);
});
$(document).on('click', '.delProduct', function(){
if($(this).parents('table').find('tr').length > 2) {
$(this).parents('tr').remove();
}
});
});
Also I've updated your HTML:
<td><input size=25 type="text" class="lngbox" readonly=true/></td>
<td><input size=25 type="text" class="price" readonly=true/></td>
<td><input type="button" class="delProduct" value="Delete" /></td>
<td><input type="button" class="addProduct" value="AddMore" /></td>

Try this,
$("select.products").on("change", function(){
var selectedValue = $(this).val();
var td = $(this).parent();
(((td).parent()).children()[2].getElementsByTagName("input")[0]).value = selectedValue;
});

Javascript writing into Table not working

I just decided to code a little html file which should create a multiplication table with integers from "start" to "end". Start and End are set before in a HTMl Form...
I can give 2 numbers as input and the tr and td elements are create but accessing them by ClassName and filling them with innerHTML does somehow not work.
Here is the Code:
<html>
<head>
<title>Das groࠥ 1x1</title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function malnehmen(Wert1, Wert2) {
Ausgabe = Wert1 * Wert2;
return Ausgabe;
}
function tabelle() {
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(i = start; i < end+1; i++) {
Reihe = document.createElement("tr");
att = document.createAttribute("class");
att.value = i + "a";
Reihe.setAttributeNode(att);
document.getElementById("Darein").appendChild(Reihe);
for(ii = start; ii < end+1; ii++) {
Feld = document.createElement("td");
att2 = document.createAttribute("class");
att2.value = malnehmen(i, ii);
Feld.setAttributeNode(att2);
Reihe.appendChild(Feld);
}
}
}
function ausfuellen() {
tabelle();
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(a = start; a < end+1; a++) {
alert("Hier denn?");
document.getElementsByClassName(a + "a").innerHTML = a.toString();
for(aa = start; aa < end+1; aa++) {
multi = malnehmen(a, aa);
alert("Angekommen");
document.getElementsByClassName(multi).innerHTML = multi.toString();
}
}
}
</script>
<body>
<FORM name="printer">
<TABLE>
<tr>
<td>Beginnt bei:</td>
<td>
<input type="number" name="anfang" size="3">
</td>
</tr>
<tr>
<td>Endet bei:</td>
<td>
<input type="number" name="ende" size="3">
</td>
</tr>
<tr>
<td>
<input type="button" name="wassolldas" value="Erstellen" onclick="javascript: tabelle();">
</td>
</tr>
</TABLE>
</FORM>
<br>
<TABLE id="Darein" border="1">
</TABLE>
</body>
Does anybody know what I did wrong?
I built in 2 alerts just to see if the javascript part reaches the for loop but there is no pop up in browser.