table heading not appearing on sorting in javascript - 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 ?

Related

Java Script problem with adding and deleting rows

I have been trying to add and delete rows dynamically using Java Script keeping in mind a few custom conditions
1) the entire block of HTML which contains 3 rows must be added when we click on add new row
2) the previously entered row should be deleted with the delete button
3) the drop downs should function as desired ( a section of java script code is used for dropdowns which basically is " if option A is chosen display related options in the next dropdown "
HTML Code
<html lang="en" dir="ltr">
<div class="header" align="center">
<h1>Downtime Report Form</h1>
</div>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript <form class="dt" method="post" id="data1">-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="DowntimeForm.css">
<form method="post">
<table id="data" Width = "100%" >
<tr>
<td width = "10%">Date and time </td>
<td width = "3%">:</td>
<td width = "17%"> <input type="datetime-local" id="breakdown-time"
name="breakdown-time" value="2018-06-12T19:30"
min="2018-06-07T00:00" max="2025-06-14T00:00" required>
</td>
<td width = "10%">Line Number</td>
<td width = "3%">:</td>
<td width = "8%" > <select id="LineSelection" name="Line Number" required>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="60">60</option>
<option value="70">70</option>
</select>
</td>
<td width = "12%" >Operator Name</td>
<td width = "3%">:</td>
<td width = "17%" ><input type="text" name="Operator Name" value="" required id="opname" ></td>
<td width = "11%">Product Type</td>
<td width = "3%">:</td>
<td><input type="text" name="Product Type" value="" required id="ptype"> </td>
<td width="12%"> </td>
<td colspan="2"> </td>
</tr>
<br>
<br>
<br>
<br>
<br>
<tr class="blank_row">
<td colspan="4"></td>
</tr>
<tr>
<td width = "8%" >Downtime Type</td>
<td width = "3%" >:</td>
<td width = "10%" > <select class="form-control" id="firstList" name="firstList" onClick="getdowntimeItem()" required>
</select> </td>
<td width = "12%">Downtime Subtype</td>
<td width = "3%">:</td>
<td width = "10%"> <select class="form-control" id="secondList" name="secondList" required>
</select> </td>
<td width = "12%">Downtime Minutes</td>
<td width ="3%">:</td>
<td width = "10%"><input type="number" name="Downtime Minutes" value="" required id="dmin"> </td>
</tr>
<p> </p>
JavaScript For Dropdowns
<script type="text/javascript">
$(document).ready(function () {
var list1 = document.getElementById('firstList');
list1.options[0] = new Option('--Select--', '');
list1.options[1] = new Option('Electrical', 'Electrical');
list1.options[2] = new Option('Mechanical', 'Mechanical');
list1.options[3] = new Option('Process', 'Process');
list1.options[4] = new Option('Preventive', 'Preventive');
});
function getdowntimeItem(){
 
            var list1 = document.getElementById('firstList');
            var list2 = document.getElementById("secondList");
            var list1SelectedValue = list1.options[list1.selectedIndex].value;
             
            if (list1SelectedValue=='Electrical')
            {
                 
                list2.options.length=0;
                list2.options[0] = new Option('--Select--', '');
                list2.options[1] = new Option('Power Outage', 'Power Outage');
                list2.options[2] = new Option('Drive Fault', 'Drive Fault');
                list2.options[3] = new Option('Motor Issue', 'Motor Issue');
                list2.options[4] = new Option('Sensor Issue', 'Sensor Issue');
                list2.options[5] = new Option('Operator Issue', 'Operator Issue');
                 
            }
            else if (list1SelectedValue=='Mechanical')
            {
                 
                list2.options.length=0;
                list2.options[0] = new Option('--Select--', '');
                list2.options[1] = new Option('Bearing', 'Bearing');
                list2.options[2] = new Option('Gear Box', 'Gear Box');
                list2.options[3] = new Option('Roller Damage', 'Roller Damage');
                list2.options[4] = new Option('Speed Issue', 'Speed Issue');
                list2.options[5] = new Option('Other', 'Other');
                 
            }
else if (list1SelectedValue=='Process')
{
list2.options.length=0;
list2.options[0] = new Option('--Select--','')
list2.options[1] = new Option('Product Change', 'Product Change');
list2.options[2] = new Option('Change Over', 'Change Over');
list2.options[3] = new Option('Fiber Issue', 'Fiber Issue');
list2.options[4] = new Option('Clogging In M/C', 'Clogging in M/C');
list2.options[5] = new Option('Needling Issue', 'Needling Issue');
list2.options[6] = new Option('Other', 'Other');
}
else if (list1SelectedValue=='Preventive')
{
list2.options.length=0;
list2.options[0] = new Option('--Select--','')
list2.options[1] = new Option('Daily PM', 'Daily PM');
list2.options[2] = new Option('Weekly PM', 'Weekly');
}
}
</script>
JavaScript for Add Remove
<script type='text/javascript'>
function addRow(data) {
var data = document.getElementById("data");
var rowCount = data.rows.length;
var row = data.insertRow(rowCount);
var colCount = data.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = data.rows[0].cells[i].innerHTML;
}}
</script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script lang="JavaScript">
function deleteRow(data) {
try {
var table = document.getElementById("data");
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
if(rowCount <= 2) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
catch(e) {
alert(e);
}}
</script>
The Problem I'm facing The add remove button doesn't add the
entire block of rows.
The delete rows doesn't delete the entire block of previous added rows and
only deletes one row
Also after adding a block of rows using JS function the drop downs for added rows doesn't work I believe this is due to the JS controlling the options of the dropdown.
If someone can provide some help regarding this it would certainly be useful

drop down calendar not coming in new inserted row in html table

I have a table single input field with calendar when i click on input drop down calendar is coming to select the date.
By using javascript i am inserting a new row in the table . Row is inserting in the table but date calendar not coming in new inserted row date field as in above line .
I am using the following code
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "minenddate" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
rowCount = parseInt(rowCount) + 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {
count = document.getElementById("minsize").value;
i = 0;
dateId = "datepicker2";
for (i = 0; i <= (count + 1); i++) {
dateId = "#datepicker2" + i;
$(dateId).datepicker();
}
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Date</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='datepicker20' value="2018-08-09" class="form-control"></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />

You have to re-initialize the datepicker on dynamically added
elements.
Here's how to add it.
$('#'+element1.id).datepicker();
function addRow() {
var table = document.getElementById("mintable");
var rowCount = parseInt(document.getElementById("minRows").value);
var rowInsert = parseInt(document.getElementById("sizemin").value);
var row = table.insertRow(rowInsert + 1);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.id = "minenddate" + (rowCount);
element1.className = "form-control";
cell1.appendChild(element1);
$('#' + element1.id).datepicker(); //add this line to initialize
rowCount = parseInt(rowCount) + 1;
document.getElementById("minRows").value = rowCount;
document.getElementById("sizemin").value =
parseInt(document.getElementById("sizemin").value) + 1;
}
$(function() {
count = document.getElementById("minsize").value;
i = 0;
dateId = "datepicker2";
for (i = 0; i <= (count + 1); i++) {
dateId = "#datepicker2" + i;
$(dateId).datepicker();
}
});
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="resources/js/jquery.dataTables.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input type="hidden" id="minsize" value="1">
<div class="">
<table id="mintable" class="table table-bordered table-striped stripe hover row-border">
<thead class="div-head">
<tr>
<th><b>Date</b></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" id='datepicker20' value="2018-08-09" class="form-control" /></td>
</tr>
</tbody>
</table>
<input type="hidden" name="minRows" id="minRows" value='1'>
<input type="hidden" id="sizemin" name="sizemin" value='1' />
</div>
<input type="submit" data-toggle="tooltip" title="Insert new horizon
" data-placement="top" class="btn btn-primary" id="button" value="Add Row" onClick="addRow()" />

why my javascript code dosen't work(about search and filter bar)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>a1</title>
<link rel="stylesheet" href="a1.css" />
<script src="a1.js"></script>
</head>
<body>
<form id = "gallary" method="get" action="">
<div id="searchBox">
<input type="text" id="searchBar" placeholder="Search titles" />
<input type="submit" id="searchBtn" value="search" onclick="searchFunction()"/>
<select name="genre" id ="filterBar">
<option>Genre</option>
<option>Baroque</option>
<option>Mannerism</option>
<option>Neo-classicism</option>
<option>Realisim</option>
<option>Romanticism</option>
</select>
<input type="submit" id = "filterBtn" value="filter" onclick =
"filterFunction()" />
</div>
</form>
<div id="artistBox">
<table>
<caption>Paintings</caption>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
<th>Genre</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="05030.jpg"/></td>
<td>Death of Marat</td>
<td>David, Jacques-Louis</td>
<td>1793</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="120010.jpg"/></td>
<td>Potrait of Eleanor of Toledo</td>
<td>Bronzino, Agnolo</td>
<td>1545</td>
<td>Mannerism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="07020.jpg"/></td>
<td>Liberty leading the people</td>
<td>Delacroix, Eugene</td>
<td>1830</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="13030.jpg"/></td>
<td>Arrangement in Grey and Black</td>
<td>Whistler, James Abbott</td>
<td>1871</td>
<td>Realisim</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="06010.jpg"/></td>
<td>Mademoiselle Caroline Riviere</td>
<td>Ingres, Jean-Auguste</td>
<td>1806</td>
<td>Neo-classicism</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
enter code here
above is my HTML code.
the searchBar is for searcing titles(the second column of tbody), the filter is for filtering genres(the fourth column of tbody).
I want to search and filter some specific content form the table and use on-click to trigger my functions but it didn't work. Can anyone help me?
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementByTagName("tr");
var td;
var filter = document.getElementById("filterBar").value;
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[1];
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}

You are setting the values of 'input', 'tbody','tr', and 'td' at the start of the script. These get evaluated when the script is loaded but destroyed when the the script file is finished loading. That is the "searchFunction" does not know about the values of these tags.
Consider the updated code: (see it in action at: Plunker)
<script type="text/javascript">
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
console.log(input);
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
var filter = document.getElementById("filterBar").value;
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
} // <-- Missing
}
</script>

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.

How to hide and show table that is populated via a form

Below is a form when submitted displays the content in a table.
What works
Content is successfully transferred via form to table.
What is not working
I wanted to hide the table when the page loads and be displayed only after the form is submitted.
I tried #myTableData {visibility: hidden;} in css and then I tried plugging (.style.visibility="visible";) Javascript in my addtable function to display the table but it does not work. I am not sure if I am understanding this right.
Also how do I control the display of the table (like width, background color, font etc). I added (td.style.width = '200px'; but I don't see any changes).
CSS or JS for controlling table ?
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>

1) In function addRow add table.style.visibility = "visible"; ,to display the table, right after var table = document.getElementById("myTableData");.
2) To set styles like width you can can use setAttribute method.
document.getElementById('myTableData').setAttribute("style","width:200px");
Note: I can't see where you make use of addTable function, maybe this is why some of styles are not setted when you want.
function addTable() {
var table = document.createElement('TABLE').style.display = "block";
table.border='0';
for (var i=0; i<3; i++){
var tr = document.createElement('tr');
for (var j=0; j<4; j++){
var td = document.createElement('td');
td.style.width = '200px';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
}
function addRow() {
var myName = document.getElementById("name");
var domainName = document.getElementById("domain");
var url = document.getElementById("url");
var table = document.getElementById("myTableData");
table.style.visibility = "visible";
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
row.insertCell(0).innerHTML= myName.value;
row.insertCell(1).innerHTML= domainName.value;
row.insertCell(2).innerHTML= url.value;
}
function load() {
console.log("Check if this loads");
}
/*
function deleteRow(obj) {
var index = obj.parentNode.parentNode.rowIndex;
var table = document.getElementById("myTableData");
table.deleteRow(index);
}
*/
#myTableData {visibility: hidden;}
body {
background: gray;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML dynamic table using JavaScript</title>
<script type="text/javascript" src="table-app.js"></script>
<link rel="stylesheet" href="table-app.css">
</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="name"></td>
</tr>
<tr>
<td>Domain</td>
<td><input type="text" id="domain">
</td>
</tr>
<tr>
<td>URL</td>
<td><input type="text" id="url"></td>
</tr>
<tr>
<td colspan=2><input type="button" id="add" value="Display as Table" onclick="Javascript:addRow()"></td>
</tr>
</table>
</div>
<table id="myTableData" border="1" cellpadding="2">
<tr>
<th>Name</td>
<th>Domain</th>
<th>URL</th>
</tr>
</table>
</div>
<!--
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div> -->
</body>
</html>

I don't have the rep to comment so I can't ask for details, but just in case you can use jquery, you can hide and show stuff like this:
$(function(){
$("#add").click(function() {
var name = $('#name').val();
var domain = $('#domain').val();
var url = $('#url').val();
$('#hidey').show();
$('#nametd').html(name);
$('#domtd').html(domain);
$('#urltd').html(url);
})
});
https://jsfiddle.net/6dxLsnL4/
Or trigger on form submit instead of click if you want, but there, you might want to consider ajax, because then you can make sure the form is processed on the server side before displaying the results.

Categories