function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
.search_input {
background-image: url(search_icon.png);
background-position: 3px 9px;
background-repeat: no-repeat;
background-size: 12px 12px;
width: 15%;
height: 31px;
padding: 12px 8px 9px 26px;
border: 1px solid #ddd;
margin: 12px 0 12px 0;
border-radius: 7px;
}
.my_tabel {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 13px;
}
.my_tabel th, .my_tabel td {
text-align: left;
padding: 12px;
}
.my_tabeltr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
table, .line{
border: 1px solid;
}
thead
{
background-color: #93B6D2;
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark Scheid</td>
<td>mscgei#wgu.edu</td>
<td>06-jan-15</td>
<td>PK0-003-Project+</td>
<td>03ocb</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Kenneth Nagle</td>
<td>knagle#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>02Oki</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kenneth</td>
<td>matt.bearce#verizonwireless.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)</td>
<td>030c8</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Rafael Moreno</td>
<td>rmoren4#wgu.edu</td>
<td>06-jan-15</td>
<td>N10-005 CompTIA Network+</td>
<td>030c7</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Paul Doyle</td>
<td>doylepaul#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030c6</td>
<td>Course</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Paul Doyle</td>
<td>esmally#gmail.com</td>
<td>06-jan-15</td>
<td>Pearson-220-802-complete-Pearson CompTIA: A+ 220-801(Course & Lab)</td>
<td>030bb</td>
<td>Course</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
I created a table with some data using html and bootstrap and i create a function of filter/searching in input type using pure java script now i need do sorting of data from ascending to descending or vise-versa.
You can just do (arrayName).sort(); it automatically sorts the numbers and letters from small to big for you (From A-Z and 1-(biggest number)), and you can also use:
(arrayName).sort(function(a, b){
return b - a;
});
to sort from the biggest to the smallest
Here is a documentation on the .sort function: https://www.w3schools.com/jsref/jsref_sort.asp
Hopefully it helps!
What you need to do is store the data in a JavaScript array. Then you can iterate over your records and sort them dynamically in JS. Once you're doing that, it's just a matter of clearing and re-rendering your table:
var users = [
{
row: 1,
name: 'B Mark Scheid',
email: 'mscgei#wgu.edu',
date: '06-jan-15',
courses: 'PK0-003-Project+',
guid: '03ocb',
license: 'Course'
},
{
row: 2,
name: 'C Kenneth Nagle',
email: 'knagle#wgu.edu',
date: '06-jan-15',
courses: 'N10-005 CompTIA Network+',
guid: '02Oki',
license: 'Course'
},
{
row: 3,
name: 'A enneth',
email: 'matt.bearce#verizonwireless.com',
date: '06-jan-15',
courses: 'Pearson-220-802-complete-Pearson CompTIA: A+ 220-802(Course & Lab)',
guid: '030c8',
license: 'Course'
}
]
function renderTable(){
users.forEach(function(user, key){
// You'll want to fill this out with all your `td`,
// just doing the first column for demonstration purposes.
var tr = "<tr><th scope=\"row\">"+user.row+"</th><td>"+user.name+"</td></tr>";
$('#myTable tbody').append(tr);
})
}
function clearTable(){
// Clear the table body of all `tr`.
$('#myTable tbody').empty();
}
function sortBy(param){
// Bullt-in array sort.
users = users.sort(function(a,b){
// Handle sorting numbers.
if(typeof a[param] == 'number') return a[param] - b[param];
// Handle sorting strings.
// `localeCompare() tells us whether or not `a` is before `b` in the alphabet.
return a[param].localeCompare(b[param]);
});
}
// We're gonna register click listeners on each of the headers,
// using the `class` names I add in the HTML below.
// This just says: for each of the keys that the first user has,
// mount a click handler.
Object.keys(users[0]).forEach(function(key){
$('.header-' + key).click(function(){
// Pretty self-explanatory.
sortBy(key);
clearTable();
renderTable();
});
});
// Start off with the table showing.
renderTable();
// Your search still works.
function searchFunction() {
let tabel, filter, input, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tabel = document.getElementById("myTable");
tr = document.getElementsByTagName("tr");
for (i = 1; i < tr.length; i++) {
if (tr[i].textContent.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title>Assingment 3</title>
<link rel="stylesheet" href="js-assingment.css" type="text/css"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="js_module.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form name="searching_tabel" id="searching_tabel">
<div class="container">
<span>Search</span>
<input type="text" id="myInput" onkeyup="searchFunction()" class="search_input">
<table class="table table-bordered my_tabel" id="myTable">
<thead>
<tr>
<th class="header-row">#</th>
<!-- I am adding classes to the headers for click listeners. -->
<th class="header-name">Name</th>
<th class="header-email">Email</th>
<th>Date</th>
<th>Courses</th>
<th>UserGuid</th>
<th>License</th>
</tr>
</thead>
<tbody>
<!-- NOTICE THE EMPTY TABLE HERE! WE WILL GENERATE THIS IN THE JS! -->
</tbody>
</table>
</div>
</form>
</body>
</html>
I'll leave descending order as a task for you.
Related
Hi I want to create a simple page where a user enters a postcode an a filtered list is displayed from the read csv file matching the postcode. I have managed to read the file and can output to a table but I'm stuck on the query / filtering part and need to some guidance on connecting the dots. I am a newbie to Javascript and found some exmaples that either are not quite what I am lookingf for or didnt work".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Read CSV</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
table, th, td {
border: 1px solid;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<div class="center">
<h1 class=>Search for your next visit from Us</h1>
<h2 class=>Enter your Postcode?</h2>
<form id="form">
<input class="form-control" id="user-input" placeholder="Enter Site Postcode">
<button id="button" class="btn btn-secondary">Find Visit!</button>
</form>
<table class="table" cellpadding="10">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Sitename</th>
<th scope="col">PostalCode</th>
<th scope="col">Service</th>
<th scope="col">NextDuty</th>
</tr>
</thead>
<tbody>
<script type="text/javascript" charset="utf-8">
d3.text("sample_rev.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("body")
.append("div").attr("class", "container")
.append("table").attr("class", "table table-hover")
.append("tbody")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) {
return d;
}).enter()
.append("td")
.text(function(d) {
return d;
});
});
</script>
</tbody>
</div>
</body>
</html>
This is my table:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
<link href="Champions%20League/Champion%20League.css" rel="stylesheet" type="text/css">
</head>
<body style="border-style: none; border-collapse: collapse; empty-cells: show; table-layout: auto; font-family:Verdana, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif">
<table ;="" style="width: 80%; text-align: center; margin-left: auto; margin-right: auto;"
id="db" cellspacing="2" cellpadding="2" border="1">
<tbody>
<tr>
<td width="10%">09-11-1996</td>
<td width="10%">Norimberga</td>
<td style="text-align: right;" width="15%">Germania</td>
<td width="10%">3-0</td>
<td style="text-align: left;" width="15%">Irlanda del Nord</td>
<td width="25%">Qualificazioni Mondiali 1998 </td>
<td width="5%"><strong>1</strong></td>
</tr>
</tbody>
</table>
<script>
function GetCellValues() {
var table = document.getElementById('db');
var total = 0
for (var r = 0, n = table.rows.length; r < n; r++) {
total += parseInt(table.rows[r].cells[7].innerText)
}
alert(total);
}
GetCellValues()
</script>
</body>
</html>
The script at the end should repeat for a certain number of rows. But I can't extrapolate the numeric value present in the last cell (in this case, 1), since the final value of the total variable is NaN.
How can I fix it?
I have this script to sort all the tr by number and all seems to work, but when its time to assign the new values using innerHTML to each table row then the array with the sorted table rows start changing its value randomly evertime a value is assign to a row and I don't know why:
Heres the code:
Run the snippet to see what I mean and thanks.
"use strict"
let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");
tableHead.addEventListener("click",event=>{
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
let arr = null;
switch(event.target.dataset.type) {
case "number":
arr = Array.from(rows).sort((a,b)=>{
return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
});
break;
case "string":
break;
}
for(let i = 0; i < rows.length; i++) {
console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}
for(let i = 0; i < arr.length;i++) {
rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});
table{
border: 1px solid black;
border-spacing: 0px;
}
td, th{
border: 1px solid rgb(0, 0, 0);
margin: 0px;
padding: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
This is because both rows and arr arrays contain the same element objects, so changing element in one array changes it in another.
In this particular case you can simply append rows to tbody instead:
"use strict"
let table = document.getElementById("grid");
let tableHead = table.querySelector("thead");
tableHead.addEventListener("click",event=>{
let tbody = table.getElementsByTagName("tbody")[0];
let rows = tbody.getElementsByTagName("tr");
let arr = null;
switch(event.target.dataset.type) {
case "number":
arr = Array.from(rows).sort((a,b)=>{
return +a.firstElementChild.innerHTML > +b.firstElementChild.innerHTML ? 1: -1;
});
break;
case "string":
break;
}
for(let i = 0; i < rows.length; i++) {
console.log(rows[i].innerHTML,"rows");//Shows the current order
}
for(let i = 0; i < arr.length;i++) {
console.log(arr[i].innerHTML,"arr"); //Shows the sorted table rows as expected
}
for(let i = 0; i < arr.length;i++) {
tbody.appendChild(arr[i]);
// rows[i].innerHTML = arr[i].innerHTML; //But now arr have randoms values!!
}
});
table{
border: 1px solid black;
border-spacing: 0px;
}
td, th{
border: 1px solid rgb(0, 0, 0);
margin: 0px;
padding: 0.5rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
I would like to create a table in html that adds a column (starting number of columns: 1) every time a user clicks on it.
So Ideally if a user clicks on the table 6 times the table should look like this:
here's my HTML and js:
<!DOCTYPE html>
<html>
<body>
<head>
<title></title>
<script link src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui.min.css">
<link rel = "stylesheet" type" type="text/css" href = "style.css">
<script src="jquery-ui.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</head>
</body>
</html>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#table").click(function()
{
var column = document.createElement("TH")
column.className = "column";
document.getElementById("table").appendChild(column);
});
});
</script>
Instead what happens when the user clicks 6 times is this:
It seems like a new row is being created when the user clicks. Is there a way I can fix this?
Here you go with a solution
$(document).ready(function() {
$("#table").click(function(){
$(this).find('tr').append("<th class='column'></th>");
});
});
.column {
border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id = "table" style="width: 100%; height: 100px; border-style: solid">
<tr>
<th class = "column"></th>
</tr>
</table>
Hope this will help you.
<!DOCTYPE html>
<html>
<head>
<title>Add Coulmn</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
<script>
$(document).ready(function() {
$("#btnAdd").click(function(){
var CoulmnCount=$("table > tbody > tr:first > td").length+1;
$("#table").find('thead').find('tr').append("<th class='head'>header"+CoulmnCount+"</th>");
$("#table").find('tbody').find('tr').append("<td class='column'>Coulmn1"+CoulmnCount+"</td>");
});
});
</script>
</head>
<body>
<input type="submit" value="Add Coulmn" id="btnAdd">
<table id = "table" style="width: 100%; height: 30px; border-style: solid">
<thead>
<tr>
<th class = "head">Header1</th>
</tr>
</thead>
<tbody>
<tr>
<td class = "column">Coulmn1</td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to hide/reveal table rows based on checking a checkbox.
Here it is http://dbdev2.pharmacy.arizona.edu/wideproblem.html
How do I get the hidden row to properly display at the width of the table? I've even tried setting it as a css attribute for that row, and it doesn't work.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>The Case of the Squished Row</title>
<style>
table {
border: 1px solid black;
width: 600px;
}
tr {border:1px solid black;}
tr.anote {width:600px;}
th {
border:1px solid black;
width:50%;
}
td {
border: 1px solid black;
width: 25%;
}
</style>
<script type="text/javascript">
function ShowRow(msg){
var thecheck = document.getElementById("showcheck");
var thebox= document.getElementById("showbox");
var thenote= document.getElementById("shownote");
if (thecheck.checked){
thebox.innerHTML=msg;
thebox.style.color='red';
thenote.style.display='block';
}
else {
thebox.innerHTML='This is a checkbox';
thebox.style.color='black';
thenote.style.display='none';
}
}
</script>
</head>
<body>
<h1>The Case of the Squished Row</h1>
<br><br>
<h2> using display:none CSS property</h2>
<table>
<tbody id="topline">
<tr><th id="showbox">This is a checkbox</th>
<td><input type="checkbox" id="showcheck" onclick="ShowRow('Note is DISPLAY:BLOCK')"></td>
<td>this is filler</td></tr>
</tbody>
<tbody id="shownote" style="display:none">
<tr class="anote"><th>This is a note</th><td>Hey! The box is checked!</td><td>this is filler</td></tr>
</tbody>
<tbody id="botline">
<tr><th>Big Filler</th><td>Little filler</td><td>this is filler</td></tr>
</tbody>
</table>
</body>
</html>
You have to use "table-row-group", not "block" as the value of the "display" property when showing the table row group (the <tbody>).