I have created a bootstrap datatable like string and its working perfect but i am defining the table in my code only. I want to write it like plugins.
I want to call the function only when i call it like this $('table').newDataTable() but write now i reached this
$(document).ready(function() {
var showInterval = 10;
var showCount = showInterval;
var startCount = 0;
$('table tbody tr').hide();
$('table tbody tr').slice(startCount, showCount).show();
$('.top_div_left select').on('change', function() {
var showCount = $(this).val();
$('table tbody tr').hide();
$('table tbody tr').slice(startCount, showCount).show();
});
$('.top_div_right input').on('input propertychange', function() {
var showCount = $('.top_div_left select').val();
var thisText = $(this).val().trim().toLowerCase();
var i;
if (thisText == "") {
$('table tbody tr').hide();
$('table tbody tr').slice(startCount, showCount).show();
} else {
var trLength = $('table tbody tr').slice(startCount, showCount).length;
$('table tbody tr').slice(startCount, showCount).each(function() {
var rowText = $(this);
if (rowText.text().toLowerCase().indexOf(thisText) == -1) {
$(this).hide();
} else {
$(this).show();
};
});
};
});
var totalRows = $('table tbody tr').length;
var pagiLength = Math.ceil(totalRows / showCount);
for (var i = 1; i <= pagiLength; i++) {
$('.pagination ul li.right').before('<li class="page">' + i + '</li>');
};
$('.pagination ul li.page').eq($('table').attr('data-page') - 1).addClass('active');
$(document).on('click', '.pagination ul li.page a', function(e) {
e.preventDefault();
$('.pagination ul li').removeClass('active');
$(this).parent('li').addClass('active');
var newPage = $(this).text();
showCount = showInterval * newPage;
startCount = showCount - showInterval;
$('table tbody tr').hide();
$('table tbody tr').slice(startCount, showCount).show();
});
$('.pagination ul li.left a').on('click', function(e) {
e.preventDefault();
$('.pagination ul li.page.active').prev('li.page').find('a').trigger('click');
});
$('.pagination ul li.right a').on('click', function(e) {
e.preventDefault();
$('.pagination ul li.page.active').next('li.page').find('a').trigger('click');
});
});
.clear {
clear: both;
}
table {
border-collapse: collapse;
border: 1px solid #ccc;
width: 600px;
margin: 0 auto;
text-align: left;
}
table tr td,
table tr th {
padding: 7px 10px;
}
.top_div {
width: 600px;
margin: 0 auto 10px;
}
.top_div .top_div_left {
float: left;
}
.top_div .top_div_left select {
width: 100%;
border: 1px solid #ccc;
border-radius: 7px;
height: 30px;
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
.top_div .top_div_right {
float: right;
}
.top_div .top_div_right input {
width: 100%;
border: 1px solid #ccc;
border-radius: 7px;
height: 30px;
padding: 0 10px;
box-sizing: border-box;
outline: none;
}
.pagination {
width: 600px;
margin: 10px auto 0;
text-align: right;
}
.pagination ul {
font-size: 0;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0;
float: left;
overflow: hidden;
}
.pagination ul li {
list-style: none;
display: inline-block;
font-size: 16px;
border-right: 1px solid #ccc;
}
.pagination ul li:last-child {
border: none;
}
.pagination ul li a {
padding: 6px 12px;
display: block;
color: #000;
text-decoration: none;
}
.pagination ul li.active a,
.pagination ul li:hover a {
background: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top_div">
<div class="top_div_left">
<select>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div class="top_div_right">
<input type="text">
</div>
<div class="clear"></div>
</div>
<table cellpadding="0" cellspacing="0" border="1" data-page="1">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Count</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Gaurav Aggarwal</td>
<td>First</td>
</tr>
<tr>
<td>2</td>
<td>Anurag Verma</td>
<td>Second</td>
</tr>
<tr>
<td>3</td>
<td>Ankit</td>
<td>Third</td>
</tr>
<tr>
<td>4</td>
<td>Abhishek</td>
<td>Fourth</td>
</tr>
<tr>
<td>5</td>
<td>Niharika</td>
<td>Fifth</td>
</tr>
<tr>
<td>6</td>
<td>Nidhi</td>
<td>Six</td>
</tr>
<tr>
<td>7</td>
<td>Rashmi</td>
<td>Seven</td>
</tr>
<tr>
<td>8</td>
<td>Deepti</td>
<td>Eighth</td>
</tr>
<tr>
<td>9</td>
<td>Neha</td>
<td>Nineth</td>
</tr>
<tr>
<td>10</td>
<td>Shruti</td>
<td>Tenth</td>
</tr>
<tr>
<td>11</td>
<td>Gaurav Aggarwal</td>
<td>First</td>
</tr>
<tr>
<td>12</td>
<td>Anurag Verma</td>
<td>Second</td>
</tr>
<tr>
<td>13</td>
<td>Ankit</td>
<td>Third</td>
</tr>
<tr>
<td>14</td>
<td>Abhishek</td>
<td>Fourth</td>
</tr>
<tr>
<td>15</td>
<td>Niharika</td>
<td>Fifth</td>
</tr>
<tr>
<td>16</td>
<td>Nidhi</td>
<td>Six</td>
</tr>
<tr>
<td>17</td>
<td>Rashmi</td>
<td>Seven</td>
</tr>
<tr>
<td>18</td>
<td>Deepti</td>
<td>Eighth</td>
</tr>
<tr>
<td>19</td>
<td>Neha</td>
<td>Nineth</td>
</tr>
<tr>
<td>20</td>
<td>Shruti</td>
<td>Tenth</td>
</tr>
<tr>
<td>21</td>
<td>Gaurav Aggarwal</td>
<td>First</td>
</tr>
<tr>
<td>22</td>
<td>Anurag Verma</td>
<td>Second</td>
</tr>
</tbody>
</table>
<div class="pagination">
<ul>
<li class="left">«
</li>
<li class="right">»
</li>
</ul>
</div>
I won't update the entire code but explain how to decouple the table from your code. Lets cut down the entire example to just one requirement - Display number of rows selected in the dropdown.
Use JavaScript namespacing to separate your plugin. Pass a generic table object and necessary parameters to the plugin. Idea is to make the function work on any kind of table.
Many times plugins take json object as a parameter. Usually when the input parameters grow large.
$(document).ready(function() {
var showInterval = 5;
var showCount = showInterval;
var startCount = 0;
$('.top_div_left select').on('change', function() {
showCount = $(this).val();
mytableFilter.filter("#mytable", showCount);
});
mytableFilter.filter("#mytable", showCount);
});
(function (mytableFilter, $, undefined) {
mytableFilter.filter = function(tableSelector, count) {
$(tableSelector).find('tbody tr').hide();
$(tableSelector).find('tbody tr').slice(0, count).show();
};
}(window.mytableFilter = window.mytableFilter || {}, jQuery));
JSFiddle
Jquery Plugin Tutorial
Related
I have a working javascript here in jsfiddle from this post and would like to run locally with my browser.
I'm not quite sure what else I need to add to the HTML in order for it to run properly. I read many posts but still couldn't figure out how to fix it.
Below is what I have done but there are errors when running the code snippet, can someone help pls? Thanks.
$(document).ready(function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
});
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
</head>
<body>
<p><input id="myInput" type="text" placeholder="Search for names.." /></p>
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
</body>
</html>
First thing you dont need jQuery here. I did two changes to your code and it worked
Removed $(document).ready( and the closing )
Added onkeyup="myFunction()" on input
Plese check below code.
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
<body>
<p><input id="myInput" onkeyup="myFunction()" type="text" placeholder="Search for names.." /></p>
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
</body>
<script>
function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
};
</script>
First you need to add jquery library, and next step is add onkeyup event to your input for start function
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Example:
function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input id="myInput" type="text" onkeyup="myFunction()" placeholder="Search for names.." /></p>
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
You need to remove this line :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax"></script>
Replace the jquery by the javascript function
$(document).ready(function myFunction() ...)
by the javascript onload event :
<script type="text/javascript"> function myFunction() {...} </script>
<body onload="myFunction()">
And call myFunction() in the input when keyUp like so
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."></p>
To have this :
<!DOCTYPE html>
<html>
<head>
<style>
#myInput {
background-position: 10px 12px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th,
#myTable td {
text-align: left;
padding: 12px;
}
#myTable th {
width: 20%;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header,
#myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body onload="myFunction()">
<p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.."></p>
<table id="myTable">
<thead>
<tr class="header">
<th>Date</th>
<th>Home</th>
<th>Time</th>
<th>Away</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>08/01/2018</td>
<td>SPAIN</td>
<td>16:30 ET</td>
<td>USA</td>
<td>BARCELONA</td>
</tr>
<tr>
<td>08/02/2018</td>
<td>BOLIVIA</td>
<td>18:30 ET</td>
<td>PORTUAL</td>
<td>MADRID</td>
</tr>
<tr>
<td>08/03/2018</td>
<td>PUERTO RICO</td>
<td>18:30 ET</td>
<td>CANADA</td>
<td>CHICAGO</td>
</tr>
<tr>
<td>08/04/2018</td>
<td>MEXICO</td>
<td>19:30 ET</td>
<td>ENGLAND</td>
<td>LONDON</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
function myFunction() {
// Declare variables
var input = document.getElementById("myInput");
var filter = input.value.toUpperCase();
var table = document.getElementById("myTable");
var trs = table.tBodies[0].getElementsByTagName("tr");
// Loop through first tbody's rows
for (var i = 0; i < trs.length; i++) {
// define the row's cells
var tds = trs[i].getElementsByTagName("td");
// hide the row
trs[i].style.display = "none";
// loop through row cells
for (var i2 = 0; i2 < tds.length; i2++) {
// if there's a match
if (tds[i2].innerHTML.toUpperCase().indexOf(filter) > -1) {
// show the row
trs[i].style.display = "";
// skip to the next row
continue;
}
}
}
};
</script>
</html>
I need to make work filter based on last column. Last Column is Category and when I press in option>select I need to show just that one category and hide others, but for now when I click nothing happen and don't have idea why.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
/*
* aria-label has no advantage, it won't be read inside a table
content: attr(aria-label);
*/
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Home</option>
<option>Others</option>
<option>Hobby</option>
<option>Garden</option>
</select>
</div>
<table class="vypis">
<caption>Account</caption>
<thead>
<tr>
<th scope="col">Referencia</th>
<th scope="col">Dátum</th>
<th scope="col">Suma</th>
<th scope="col">Kategória</th>
</tr>
</thead>
<tbody class="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">[[kategoria]]</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Garden</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Home</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="Referencia">[[X04_textovy_popis_obycajne]]</td>
<td data-label="Dátum">[[X02_riadok_1_datum]]</td>
<td data-label="Suma">[[X08_riadok_1_suma]] €</td>
<td data-label="Kategória">Hobby</td>
</tr>
</tbody>
</table>
the problem is in your query for tbody you write #body1 so it will query element with ID body1 while in your html code, tbody is with class body1 not id
const rows = document.querySelectorAll("#body1 > tr"); // <--- will select element with id="body1"
your HTML code:
...
</thead>
<tbody class="body1"> <!--body is using attribute class -->
<tr class="vypis-riadok">
...
what you should do is use class query selector, change # into .
const rows = document.querySelectorAll(".body1 > tr"); // <--- will select element with class="body1"
after that your javascript code should be fine, now add css style for show and hidden class
.hidden{
display: none;
}
should be because I got defined select by ID
In this answer is there exactly what I am looking for. A menu pops up, when clicking on a table row. The only problem is it uses JQuery...
So my question is, can the same be done without JQuery? Perhaps with VueJS, which I am using?
Translated the example
let rows = document.querySelectorAll("tr");
let btnPane = document.getElementById("button-pane");
document.active = '';
if (window.NodeList && !NodeList.prototype.forEach) {
NodeList.prototype.forEach = Array.prototype.forEach;
}
btnPane.addEventListener("mouseover", function() {
btnPane.style.display = "block";
if(document.active)
document.active.style.backgroundColor = "lightblue";
});
btnPane.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
if(document.active)
document.active.style.backgroundColor = "";
});
rows.forEach(function(row) {
row.addEventListener("click", function(e) {
var posLeft = e.clientX + 10;
var posBottom = this.offsetTop + this.offsetHeight+8;
btnPane.style.top = posBottom + "px";
btnPane.style.left = posLeft + "px";
btnPane.style.display = "block";
document.active = this;
});
row.addEventListener("mouseleave", function() {
btnPane.style.display = "none";
});
});
table {
border-collapse: collapse;
}
th, td{
border-bottom: 1px solid #aaa;
}
#mytable tbody tr:hover {
background-color: lightblue;
}
.button-pane {
display: none;
position: absolute;
float: left;
top: 0px;
left: 0px;
background-color: lightblue;
width: 150px;
height: 30px;
padding: 0px;
text-align: center;
}
.button-pane button {
display: inline;
cursor: pointer;
}
<table id="mytable" border="1" width="100%">
<thead>
<tr>
<td>HEADER 1</td>
<td>HEADER 2</td>
<td>HEADER 3</td>
<td>HEADER 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>a</td>
<td>aa</td>
<td>aaa</td>
</tr>
<tr>
<td>Item 2</td>
<td>b</td>
<td>bb</td>
<td>bbb</td>
</tr>
<tr>
<td>Item 3</td>
<td>c</td>
<td>cc</td>
<td>ccc</td>
</tr>
</tbody>
</table>
<div id="button-pane" class="button-pane">
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
</div>
</div>
I am trying to make a comboBox in plain HTMl. Like two div, first div for the searchbox and second div for the list. I want when I click on searcbox then only list appear or render like combobox.
Code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Sweden</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Canada</td>
</tr>
<tr>
<td>Italy</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>France</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
How to integrate searchBox and list in different div and list appear only on click of searchbox like combobox.
You can use only CSS to achieve this
Update your CSS as
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
margin-top: -12px; // Remove space between table and input
display: none; // Hide table by default
}
Add the following CSS
#myInput:focus + #myTable{
display: block; // Show table on focus
}
#myTable:hover{
display: block;
}
UPDATE:
Add the following JS for selection of option from the list
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
_tr.addEventListener('click',function(){
document.getElementById('myInput').value = this.getElementsByTagName('td')[0].textContent;
});
});
UPDATE-2
For Multiple selection use the following JS
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
_tr.addEventListener('click',function(){
var selection = this.getElementsByTagName('td')[0].textContent; //current selection
var selections = document.getElementById('myInput').value; //Old Selections
if(selections !="" ) selections +=","; //add seperator if selections is not empty.
if(selections.indexOf(selection)!=-1) return; //if selection already exist return.
selections+= selection; //Append selection to selections
document.getElementById('myInput').value = selections;
});
});
Here is a snippet
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
display: none;
margin-top:-12px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
#myInput:focus + #myTable{
display: block;
}
#myTable:hover{
display: block;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Sweden</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Canada</td>
</tr>
<tr>
<td>Italy</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>France</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
document.querySelectorAll('#myTable tr:not(.header)').forEach(function(_tr){
_tr.addEventListener('click',function(){
var selection = this.getElementsByTagName('td')[0].textContent;
var selections = document.getElementById('myInput').value;
if(selections !="" ) selections +=",";
if(selections.indexOf(selection)!=-1) return;
selections+= selection;
document.getElementById('myInput').value = selections;
});
});
</script>
</body>
</html>
Do you mean like this?
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
//background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="searchResult">
<form>
<select name="search" id="search" style="display: none;">
</select>
</form>
</div>
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Sweden</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Canada</td>
</tr>
<tr>
<td>Italy</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>France</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, searchBox;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
searchBox = document.getElementById("search");
var option = document.createElement("option");
var length = searchBox.options.length;
for (i = 0; i < length; i++) {
searchBox.options[i] = null;
}
if(filter === ""){
document.getElementById("search").style.display = "none";
}
else {
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
//tr[i].style.display = "";
option.text = option.value = td.innerHTML.toUpperCase();
searchBox.add(option);
} else {
//tr[i].style.display = "none";
}
}
}
var length = searchBox.options.length;
if(length === 0) {
document.getElementById("search").style.display = "none";
}
else {
document.getElementById("search").style.display = "block";
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
#myInput {
//background-image: url('/css/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
#myTable {
border-collapse: collapse;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
}
#myTable th, #myTable td {
text-align: left;
padding: 12px;
}
#myTable tr {
border-bottom: 1px solid #ddd;
}
#myTable tr.header, #myTable tr:hover {
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>My Customers</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<div id="searchResult">
<form>
<select name="SearchThis" id="SearchThis" style="display: none;">
</select>
</form>
</div>
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Sweden</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>Germany</td>
</tr>
<tr>
<td>Canada</td>
</tr>
<tr>
<td>Italy</td>
</tr>
<tr>
<td>UK</td>
</tr>
<tr>
<td>France</td>
</tr>
</table>
<script>
function myFunction() {
var input, filter, table, tr, td, i, searchBox;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
searchBox = document.getElementById("SearchThis");
var option = document.createElement("option");
var length = searchBox.options.length;
for (i = 0; i < length; i++) {
searchBox.options[i] = null;
}
if(filter === "")
{
document.getElementById("SearchThis").style.display = "none";
}
else
{
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
//tr[i].style.display = "";
option.text = option.value = td.innerHTML.toUpperCase();
searchBox.add(option);
} else {
//tr[i].style.display = "none";
}
}
}
var length = searchBox.options.length;
if(length === 0)
{
document.getElementById("SearchThis").style.display = "none";
}
else
{
document.getElementById("SearchThis").style.display = "block";
}
}
}
</script>
</body>
</html>
May this is your desire output! check it and tell me!
Hello my office the next, I happen to have a table generated in html, but I want to capture all the structure of the table without considering the entire first column, until now could only manage to capture all components in a variable, but I need to improve it to capture all but the first column of the table.
.html
<table border="1" id="tblConsulta">
<thead>
<tr>
<th>Eliminar</th>
<th>Dependencia</th>
<th>UU.OO</th>
<th>Documento</th>
<th>Reg</th>
<th>Responsable</th>
<th>Fecha Inicio</th>
<th>Fecha Fin</th>
<th>Fecha Autoriz</th>
<th>Estado</th>
<th>Motivo</th>
</tr>
</thead>
<tr>
<td><input class="editor-active" value="74" disabled="" type="checkbox" /></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>
javascript
var output = '';
$("[id=tblConsulta]").each(function() {
output += $(this).find("thead").html();
$('#tblConsulta tbody tr').each(function() {
var j = 0;
output += '<tr class="">';
$.each(this.cells, function() {
j++;
if (j < 12) {
if (j == 5) {
output += '<td class="date">';
} else if (j == 3) {
output += '<td class="number">';
} else {
output += '<td class="text">';
output += $(this).html();
output += '</td>';
}
}
});
output += '</tr>';
});
});
console.log(output);
I hope you can help me, the idea is to capture the chexbox not want to label in the chain, because then I want to print it in a report.
I have also published jsFiddle: https://jsfiddle.net/movboj2m/
Use tblConsulta tr:gt(1). gt selector: https://api.jquery.com/gt-selector/
Try straight up removing the first column from the table, after having saved it first. Then after your log is printed, put the table back in its original condition, aka:
var output = '';
var saveTable = $("table").html();
$("table").find("th:first").remove();
$("table").find("tr").each(function() {
$(this).find("td:first").remove();
});
$("[id=tblConsulta]").each(function() {
output += $(this).find("thead").html();
$('#tblConsulta tbody tr').each(function() {
var j = 0;
output += '<tr class="">';
$.each(this.cells, function() {
j++;
if (j < 12) {
if (j == 5) {
output += '<td class="date">';
} else if (j == 3) {
output += '<td class="number">';
} else {
output += '<td class="text">';
output += $(this).html();
output += '</td>';
}
}
});
output += '</tr>';
});
});
console.log(output);
$("table").html(saveTable);
.title{
font-weight:bold;
}
.index {
height: 30px;
width: 40px;
display: inline-block;
border: 1px solid white;
background-color: cadetblue;
color: black;
text-align: center;
line-height: 30px;
}
.prev {
height: 30px;
width: 40px;
display: inline-block;
border: 1px solid white;
background-color: cadetblue;
color: black;
text-align: center;
line-height: 30px;
}
.next {
height: 30px;
width: 40px;
display: inline-block;
border: 1px solid white;
background-color: cadetblue;
color: black;
text-align: center;
line-height: 30px;
}
.clicked{
height: 30px;
width: 40px;
display: inline-block;
border: 1px solid black;
background-color: #993333;
color: white;
text-align: center;
line-height: 30px;
}
.enter{
color: white;
border: 1px solid black;
}
#result1{
margin-top: 10px;
margin-left: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="tblConsulta">
<thead>
<tr>
<th>Eliminar</th>
<th>Dependencia</th>
<th>UU.OO</th>
<th>Documento</th>
<th>Reg</th>
<th>Responsable</th>
<th>Fecha Inicio</th>
<th>Fecha Fin</th>
<th>Fecha Autoriz</th>
<th>Estado</th>
<th>Motivo</th>
</tr>
</thead>
<tr>
<td><input class="editor-active" value="74" disabled="" type="checkbox" /></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</table>