Code For Table

Basic HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-
UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
width, initial-scale=1.0"> <title>CSS Keyboard</title> <link rel="stylesheet"
href="style.css"> </head> <body>  <script
src="app.js"></script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Keyboard</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<script src="app.js"></script>
</body>
</html>
HTML Code For Table Structure:
<div class="container">
<input type="search" oninput="filter_table(this, 'table_filter')"
class="form_control"
placeholder="Filter This Table...">
<table class="_table table_sort">
<thead>
<tr>
<th>SL</th>
<th>Name</th>
<th>Phone</th>
<th>Address</th>
<th width="50px">Action</th>
</tr>
</thead>
<tbody id="table_filter">
<tr>
<td>02</td>
<td>Tamim</td>
<td>+8801770 xxxxxx</td>
<td>Address One</td>
<td>
<div class="action_btn">
<a href="#" class="click_ripple_shine success" title="View">
<i class="icon fa fa-eye"></i>
</a>
<a href="#" class="click_ripple_shine warning" title="Edit">
<i class="icon fa fa-pencil-square-o"></i>
</a>
<a href="#" class="click_ripple_shine danger" title="Delete">
<i class="icon fa fa-close"></i>
</a>
</div>
</td>
</tr>
<tr>
<td>01</td>
<td>Khalid Hossain</td>
<td>Address Two</td>
<td>
</a>
</a>
</a>
</div>
</td>
</tr>
<tr>
<td>03</td>
<td>Sadik Hossain</td>
<td>Address Three</td>
<td>
</a>
</a>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<input type="search" oninput="filter_table(this, 'table_filter2')"
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody id="table_filter2">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
<div class="container"> <input type="search" oninput="filter_table(this,
'table_filter')" class="form_control" placeholder="Filter This Table..."> <table
class="_table table_sort"> <thead> <tr> <th>SL</th> <th>Name</th> <th>Phone</th>
<th>Address</th> <th width="50px">Action</th> </tr> </thead> <tbody
id="table_filter"> <tr> <td>02</td> <td>Tamim</td> <td>+8801770 xxxxxx</td>
<td>Address One</td> <td> <div class="action_btn"> <a href="#"
class="click_ripple_shine success" title="View"> <i class="icon fa fa-eye"></i>
</a> <a href="#" class="click_ripple_shine warning" title="Edit"> <i class="icon fa
fa-pencil-square-o"></i> </a> <a href="#" class="click_ripple_shine danger"
title="Delete"> <i class="icon fa fa-close"></i> </a> </div> </td> </tr> <tr>
<td>01</td> <td>Khalid Hossain</td> <td>+8801770 xxxxxx</td> <td>Address Two</td>
<td> <div class="action_btn"> <a href="#" class="click_ripple_shine success"
title="View"> <i class="icon fa fa-eye"></i> </a> <a href="#"
class="click_ripple_shine warning" title="Edit"> <i class="icon fa fa-pencil-
square-o"></i> </a> <a href="#" class="click_ripple_shine danger" title="Delete">
<i class="icon fa fa-close"></i> </a> </div> </td> </tr> <tr> <td>03</td> <td>Sadik
Hossain</td> <td>+8801770 xxxxxx</td> <td>Address Three</td> <td> <div
class="action_btn"> <a href="#" class="click_ripple_shine success" title="View"> <i
class="icon fa fa-eye"></i> </a> <a href="#" class="click_ripple_shine warning"
title="Edit"> <i class="icon fa fa-pencil-square-o"></i> </a> <a href="#"
class="click_ripple_shine danger" title="Delete"> <i class="icon fa fa-close"></i>
</a> </div> </td> </tr> </tbody> </table> </div> <div class="container"> <input
type="search" oninput="filter_table(this, 'table_filter2')" class="form_control"
placeholder="Filter This Table..."> <table class="_table table_sort"> <thead> <tr>
<th>Company</th> <th>Contact</th> <th>Country</th> </tr> </thead> <tbody
id="table_filter2"> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td>
<td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco
Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td>
<td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td>
<td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi
Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td> <td>Italy</td> </tr> </tbody> </table> </div>
<input type="search" oninput="filter_table(this, 'table_filter')"
<thead>
<tr>
<th>SL</th>
<th>Name</th>
<th>Phone</th>
<th>Address</th>
<th width="50px">Action</th>
</tr>
</thead>
<tbody id="table_filter">
<tr>
<td>02</td>
<td>Tamim</td>
<td>Address One</td>
<td>
</a>
</a>
</a>
</div>
</td>
</tr>
<tr>
<td>01</td>
<td>Khalid Hossain</td>
<td>Address Two</td>
<td>
</a>
</a>
</a>
</div>
</td>
</tr>
<tr>
<td>03</td>
<td>Sadik Hossain</td>
<td>Address Three</td>
<td>
</a>
</a>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<input type="search" oninput="filter_table(this, 'table_filter2')"
<thead>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody id="table_filter2">
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
CSS Code:
should I joined now, with students.* {

box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #efefef;
padding: 25px;
}
.container {
max-width: 900px;
width: 100%;
margin: 25px auto;
padding: 15px;
background-color: #fff;
box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;
border-radius: 5px;
overflow-x: auto;
}
.form_control {
border: 1px solid #0002;
background-color: transparent;
outline: none;
padding: 8px 12px;
width: 60%;
color: #333;
margin-bottom: 15px;
}
.form_control::placeholder {
color: inherit;
opacity: 0.5;
}
.form_control:is(:hover, :focus) {
box-shadow: inset 0 1px 6px #0002;
border-radius: 5px;
}
.success {
background-color: #24b96f !important;
}
.warning {
background-color: #ebba33 !important;
}
.primary {
background-color: #259dff !important;
}
.secondery {
background-color: #00bcd4 !important;
}
.danger {
background-color: #ff5722 !important;
}
.action_btn {
display: inline-flex;
align-items: center;
}
.action_btn>* {
border: none;
outline: none;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 8px 14px;
position: relative;
transition: 0.3s ease-in-out;
}
.action_btn>*+* {
border-left: 1px solid #0003;
}
.action_btn>*:hover {
filter: hue-rotate(-20deg) brightness(0.97);
transform: scale(1.05);
border-color: transparent;
box-shadow: 0 2px 10px #0004;
border-radius: 4px;
}
.action_btn>*:active {
transform: scale(1);
}
._table {
width: 100%;
border-collapse: collapse;
}
._table :is(th, td) {
padding: 8px 10px;
}
._table th {
position: relative;
user-select: none;
}
._table th:hover {
background-color: #0001;
cursor: pointer;
}
._table th::after {
content: '\25b4';
position: absolute;
right: 10px;
font-size: inherit;
transform-origin: center;
transform: rotate(180deg);
}
._table th.asc {
}
._table th.asc::after {
}
should I joined now, with students.* { box-sizing: border-box; padding: 0; margin:
0; font-family: Arial, Helvetica, sans-serif; } body { background-color: #efefef;
padding: 25px; } .container { max-width: 900px; width: 100%; margin: 25px auto;
padding: 15px; background-color: #fff; box-shadow: 0 2px 20px #0001, 0 1px 6px
#0001; border-radius: 5px; overflow-x: auto; } .form_control { border: 1px solid
#0002; background-color: transparent; outline: none; padding: 8px 12px; width: 60%;
color: #333; margin-bottom: 15px; } .form_control::placeholder { color: inherit;
opacity: 0.5; } .form_control:is(:hover, :focus) { box-shadow: inset 0 1px 6px
#0002; border-radius: 5px; } .success { background-color: #24b96f !
important; } .warning { background-color: #ebba33 !important; } .primary
{ background-color: #259dff !important; } .secondery { background-color: #00bcd4 !
important; } .danger { background-color: #ff5722 !important; } .action_btn
{ display: inline-flex; align-items: center; } .action_btn>* { border: none;
outline: none; color: #fff; text-decoration: none; display: inline-block; padding:
8px 14px; position: relative; transition: 0.3s ease-in-out; } .action_btn>*+*
{ border-left: 1px solid #0003; } .action_btn>*:hover { filter: hue-rotate(-20deg)
brightness(0.97); transform: scale(1.05); border-color: transparent; box-shadow: 0
2px 10px #0004; border-radius: 4px; } .action_btn>*:active { transform: scale(1);
box-shadow: 0 2px 5px #0004; } ._table { width: 100%; border-collapse:
collapse; } ._table :is(th, td) { border: 1px solid #0002; padding: 8px
10px; } ._table th { position: relative; user-select: none; } ._table th:hover
{ background-color: #0001; cursor: pointer; } ._table th::after { content: '\25b4';
position: absolute; right: 10px; font-size: inherit; transform-origin: center;
transform: rotate(180deg); } ._table th.asc { background-color: #0001; } ._table
th.asc::after { transform: rotate(0deg); }
should I joined now, with students.* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
body {
background-color: #efefef;
padding: 25px;
}
.container {
max-width: 900px;
width: 100%;
margin: 25px auto;
padding: 15px;
background-color: #fff;
box-shadow: 0 2px 20px #0001, 0 1px 6px #0001;
border-radius: 5px;
overflow-x: auto;
}
.form_control {
background-color: transparent;
outline: none;
padding: 8px 12px;
width: 60%;
color: #333;
margin-bottom: 15px;
}
.form_control::placeholder {
color: inherit;
opacity: 0.5;
}
.form_control:is(:hover, :focus) {
box-shadow: inset 0 1px 6px #0002;
border-radius: 5px;
}
.success {
background-color: #24b96f !important;
}
.warning {
background-color: #ebba33 !important;
}
.primary {
background-color: #259dff !important;
}
.secondery {
background-color: #00bcd4 !important;
}
.danger {
background-color: #ff5722 !important;
}
.action_btn {
display: inline-flex;
align-items: center;
}
.action_btn>* {
border: none;
outline: none;
color: #fff;
text-decoration: none;
display: inline-block;
padding: 8px 14px;
position: relative;
transition: 0.3s ease-in-out;
}
.action_btn>*+* {
border-left: 1px solid #0003;
}
.action_btn>*:hover {
filter: hue-rotate(-20deg) brightness(0.97);
transform: scale(1.05);
border-color: transparent;
border-radius: 4px;
}
.action_btn>*:active {
transform: scale(1);
}
._table {
width: 100%;
border-collapse: collapse;
}
._table :is(th, td) {

padding: 8px 10px;
}
._table th {
position: relative;
user-select: none;
}
._table th:hover {
cursor: pointer;
}
._table th::after {
content: '\25b4';
position: absolute;
right: 10px;
font-size: inherit;
transform-origin: center;
}
._table th.asc {
}
._table th.asc::after {
}
JavaScript Code:
let table_sort_elements = document.querySelectorAll('.table_sort');

if(table_sort_elements)
{
table_sort_elements = Array.isArray(table_sort_elements) ? table_sort_elements :
Object.values(table_sort_elements);
table_sort_elements.forEach(table_sort_element=>{
let thead_cells = table_sort_element.querySelectorAll('thead>tr>*');
if(thead_cells)
{
thead_cells = Array.from(thead_cells);
thead_cells.forEach((thead_cell, index)=>{
thead_cell.addEventListener('click', function(){
this.classList.toggle('asc');
sortTableByColumn(table_sort_element, index, !this.classList.contains('asc'));
});
});
}
});
}
function sortTableByColumn(table, column, desc=false)
{
let tbody = table.querySelector('tbody'),
rows = tbody.querySelectorAll('tr');
rows = rows.isArray ? rows : Object.values(rows);
function compare(a, b) {
// console.log(a.children[column], b.children[column]);
let aText = a.children[column].innerText.trim(),
bText = b.children[column].innerText.trim();
return (aText < bText) ? -1 : 1;
}
rows.sort(compare);
if(desc) rows.reverse();
tbody.innerHTML = '';
let i = 0;
while (i<rows.length) {
tbody.appendChild(rows[i]);
i++;
}
}
/* <a href="https://freetoolssite.com/how-to-create-a-popup-in-html-css-and-
javascript/">html table filter javaScript</a> code start */
function filter_table(This, table_id)
{
let recordLists = document.querySelectorAll(`#${table_id}>*`);
if(recordLists)
{
hide_tr(recordLists);
recordLists.forEach(recordList=>{
let str = recordList.innerText.toLowerCase(),
value = This.value.toLowerCase();
if(str.indexOf(value)>=0)
{
recordList.style.display = '';
}
});
}
}
function hide_tr(recordLists) {
recordList.style.display = 'none';
});
}
/* <a href="https://freetoolssite.com/css-text-animation-using-html-css-and-
javascript/">html table filter javaScript</a> code end */
if(table_sort_elements) { table_sort_elements =
Array.isArray(table_sort_elements) ? table_sort_elements :
Object.values(table_sort_elements);
table_sort_elements.forEach(table_sort_element=>{ let thead_cells =
table_sort_element.querySelectorAll('thead>tr>*'); if(thead_cells) { thead_cells =
Array.from(thead_cells); thead_cells.forEach((thead_cell,
index)=>{ thead_cell.addEventListener('click', function()
{ this.classList.toggle('asc'); sortTableByColumn(table_sort_element, index, !
this.classList.contains('asc')); }); }); } }); } function sortTableByColumn(table,
column, desc=false) { let tbody = table.querySelector('tbody'), rows =
tbody.querySelectorAll('tr'); rows = rows.isArray ? rows : Object.values(rows);
function compare(a, b) { // console.log(a.children[column], b.children[column]);
let aText = a.children[column].innerText.trim(), bText =
b.children[column].innerText.trim(); return (aText < bText) ? -1 : 1; }
rows.sort(compare); if(desc) rows.reverse(); tbody.innerHTML = ''; let i = 0; while
(i<rows.length) { tbody.appendChild(rows[i]); i++; } } /* <a
href="https://freetoolssite.com/how-to-create-a-popup-in-html-css-and-
javascript/">html table filter javaScript</a> code start */ function
filter_table(This, table_id) { let recordLists = document.querySelectorAll(`#$
{table_id}>*`); if(recordLists) { hide_tr(recordLists);
recordLists.forEach(recordList=>{ let str = recordList.innerText.toLowerCase(),
value = This.value.toLowerCase(); if(str.indexOf(value)>=0)
{ recordList.style.display = ''; } }); } } function hide_tr(recordLists)
{ recordLists.forEach(recordList=>{ recordList.style.display = 'none'; }); } /* <a
href="https://freetoolssite.com/css-text-animation-using-html-css-and-
javascript/">html table filter javaScript</a> code end */
if(table_sort_elements)
{
table_sort_elements = Array.isArray(table_sort_elements) ?
table_sort_elements : Object.values(table_sort_elements);
table_sort_elements.forEach(table_sort_element=>{
let thead_cells = table_sort_element.querySelectorAll('thead>tr>*');
if(thead_cells)
{
thead_cells = Array.from(thead_cells);
thead_cells.forEach((thead_cell, index)=>{
thead_cell.addEventListener('click', function(){
this.classList.toggle('asc');
sortTableByColumn(table_sort_element, index, !
this.classList.contains('asc'));
});
});
}
});
}
function sortTableByColumn(table, column, desc=false)

{
let tbody = table.querySelector('tbody'),
rows = tbody.querySelectorAll('tr');
rows = rows.isArray ? rows : Object.values(rows);
function compare(a, b) {
// console.log(a.children[column], b.children[column]);
let aText = a.children[column].innerText.trim(),
bText = b.children[column].innerText.trim();
return (aText < bText) ? -1 : 1;

}
rows.sort(compare);
if(desc) rows.reverse();
tbody.innerHTML = '';
let i = 0;
while (i<rows.length) {
tbody.appendChild(rows[i]);
i++;
}
}
/* html table filter javaScript code start */

function filter_table(This, table_id)
{
let recordLists = document.querySelectorAll(`#${table_id}>*`);
if(recordLists)
{
hide_tr(recordLists);
let str = recordList.innerText.toLowerCase(),
value = This.value.toLowerCase();
if(str.indexOf(value)>=0)
{
recordList.style.display = '';
}
});
}
}
function hide_tr(recordLists) {
recordList.style.display = 'none';
});
}
/* html table filter javaScript code end */

Code For Table

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Code For Table

Uploaded by

Copyright:

Available Formats

Basic HTML Structure:

should I joined now, with students.* {

._table :is(th, td) {

let table_sort_elements = document.querySelectorAll('.table_sort');

function sortTableByColumn(table, column, desc=false)

rows = rows.isArray ? rows : Object.values(rows);

return (aText < bText) ? -1 : 1;

/* html table filter javaScript code start */

You might also like