Search and display the table values while typing - javascript

I refer the following code from stack-overflow itself.but it will not working, anyone can tell what should I update this code.
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>
with these simple concept am struggling so far.so please help me.

If i type ap or apple means the correspondent values only should
display other than should hide
Note , not certain if expected result is to toggle td elements ? As js at Question appear to toggle tr elements ? To toggle td elements where text input matches td text, try adding .find("td") before call to .show() to substitute filtering td elements for parent tr elements
If input "app" only td containing text "Apple" should be displayed
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.find("td").show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 209px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<html>
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><input type="text" id="search" placeholder="Type to search"></center>
<center><table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table></center>
</body>
</html>

code is not working because your "search.js" file need jquery
in you code Jquery file missing with jquery it's working fine
it must be
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="search.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
check this fiddle

Added jquery-1.9.1.js in html..
<head>
<title>Search Event</title>
<script type="text/javascript" src="search.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link href="search.css" rel="stylesheet" type="text/css">
</head>
Fiddle

Related

JS in HTML gets stuck on if statements

My objective is to create a web game where a country name is given and the user must enter the correct capital of that country. A new row is then inserted with the country and answer and whether it's correct and a new country is shown. I have both the random country selector and insert new row working when I press the button with the id of "pr2__submit".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YourName 20200000</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="jquery/css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<link href="./capital_game.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Oswald:wght#700&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<style>
table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 850px;
border-collapse: collapse;
}
th, td {
padding-bottom: 15px;
text-align: left;
border-bottom: 2px solid #D3D3D3;
}
</style>
</head>
<body>
<script src="jquery/js/jquery-1.9.0.min.js"></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="./country_capital_pairs.js"></script>
<script src="./capital_game.js"></script>
<!--Your HTML here-->
<h1 style="font-size:70px; text-align: center; font-family: 'Bakbak One', cursive;" >Name the capital <i class="far fa-flag"></i></h1>
<script>
function randomCountry(){
let x = Math.floor(Math.random() * pairs.length);
document.getElementById("pr2__question").innerHTML = pairs[x].country;
let y = pairs[x].capital;
}
</script>
<script>
function focusInput() {
document.getElementById("pr2__answer").focus();
document.getElementById("pr2__answer").value = "";
}
</script>
<script>
function newRow() {
let guess = document.getElementById("pr2__answer").value;
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
break;
}
</script>
<table id="myTable" style="font-size:200%;" class="center">
<tr style="border-bottom: 3px solid #330066; font-family: 'Oswald', sans-serif;">
<th>Country</th>
<th>Capital</th>
<th>Answer</th>
</tr>
<tr>
<td id="pr2__question"></td>
<td><input id="pr2__answer" type="text" placeholder="Your answer" autofocus><br></td>
<td> <button id="pr2__submit" onclick="newRow(); randomCountry(); focusInput();">See Answer</button> </td>
</tr>
<tr>
<td id="lastQuestion"></td>
<td id="lastAnswer">No entry to show</td>
<td id="correctAnswer"></td>
</tr>
</table>
<script>
randomCountry();
</script>
<script>
var inputText = document.getElementById("pr2__answer");
inputText.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("pr2__submit").click();
}
});
</script>
</body>
</html>
But when I try to add an if statement to determine whether the correct answer was input it does not work, and the random country selector and and insert new row stop working.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>YourName 20200000</title>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="jquery/css/ui-lightness/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
<link href="./capital_game.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Bakbak+One&family=Oswald:wght#700&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<style>
table {
margin-left: auto;
margin-right: auto;
table-layout: fixed;
width: 850px;
border-collapse: collapse;
}
th, td {
padding-bottom: 15px;
text-align: left;
border-bottom: 2px solid #D3D3D3;
}
</style>
</head>
<body>
<script src="jquery/js/jquery-1.9.0.min.js"></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="./country_capital_pairs.js"></script>
<script src="./capital_game.js"></script>
<!--Your HTML here-->
<h1 style="font-size:70px; text-align: center; font-family: 'Bakbak One', cursive;" >Name the capital <i class="far fa-flag"></i></h1>
<script>
function randomCountry(){
let x = Math.floor(Math.random() * pairs.length);
document.getElementById("pr2__question").innerHTML = pairs[x].country;
let y = pairs[x].capital;
}
</script>
<script>
function focusInput() {
document.getElementById("pr2__answer").focus();
document.getElementById("pr2__answer").value = "";
}
</script>
<script>
function newRow() {
let guess = document.getElementById("pr2__answer").value;
if (guess === y) {
var table = document.getElementById("myTable");
var row = table.insertRow(2);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
cell3.innerHTML = "NEW CELL3";
break;
}
}
</script>
<table id="myTable" style="font-size:200%;" class="center">
<tr style="border-bottom: 3px solid #330066; font-family: 'Oswald', sans-serif;">
<th>Country</th>
<th>Capital</th>
<th>Answer</th>
</tr>
<tr>
<td id="pr2__question"></td>
<td><input id="pr2__answer" type="text" placeholder="Your answer" autofocus><br></td>
<td> <button id="pr2__submit" onclick="newRow(); randomCountry(); focusInput();">See Answer</button> </td>
</tr>
<tr>
<td id="lastQuestion"></td>
<td id="lastAnswer">No entry to show</td>
<td id="correctAnswer"></td>
</tr>
</table>
<script>
randomCountry();
</script>
<script>
var inputText = document.getElementById("pr2__answer");
inputText.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("pr2__submit").click();
}
});
</script>
</body>
</html>

table.insertRow from button in table doesn't work

Why the button "proba2" adds row in the table, but the button "Insert", who is in the table - adds row, which disappears at the function end?
My code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Parameter AutoCgen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table,
th,
td {
padding: 10pt;
border-style: solid;
border-width: 1pt;
border-collapse: collapse;
text-align: center;
white-space: nowrap;
margin: auto;
}
table {
width: auto;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
input[type=text] {
background-color: transparent;
border-width: 0px;
}
</style>
<script>
'use strict';
var proba = function() {
for (var r of document.getElementsByTagName('table')[0].rows)
for (var d of r.cells) console.log(d.innerHTML);
}
var ins_after = function(obj) {
obj = obj || window.event;
var r = document.getElementsByTagName('table')[0].insertRow(obj.parentNode.parentNode.rowIndex);
var c1 = r.insertCell(0);
var c2 = r.insertCell(1);
var c3 = r.insertCell(2);
c1.innerHTML = 'drugo_ne6to';
alert(c1);
}
</script>
</head>
<body>
<form>
<table>
<caption style='font-size: 1.5em;'>Parameters list</caption>
<tr>
<th>Insert after</th>
<th>Delete</th>
<th>Parameter name</th>
</tr>
<tr>
<td>
<button onclick="ins_after(this);">Insert</button>
</td>
<td>ne6to</td>
<td>
<input type="text" name="property">
</td>
</tr>
</table>
</form>
<button onclick="proba();">proba1</button>
<button onclick="ins_after(this);">proba2</button>
</body>
</html>
The two buttons have the same one callback function on onclick event.
I try this in Chrome and Mozilla and the result is the same.
When I press "Insert" the new row appears in the table, I use alert to can see this, because after the function end, the row disappears again.
Also when I add several rows with button "proba2" and after that try the button "Insert" - it adds new row, then all new created rows disappears at the callback function end.
Apologize if this is trivial, but I'm new to JS.
It is disappearing because your button is in a form, so it is refreshing the page each time.
Try and add event.preventDefault(); at the end of your function to prevent the default functionality of the button in the form.
Here is a working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Parameter AutoCgen</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
table, th, td {
padding: 10pt;
border-style: solid;
border-width: 1pt;
border-collapse: collapse;
text-align: center;
white-space: nowrap;
margin: auto;
}
table {
width: auto;
}
tr:nth-child(even) {background-color: #f2f2f2;}
input[type=text] {
background-color: transparent;
border-width: 0px;
}
</style>
<script>
'use strict';
var proba = function () {
for (var r of document.getElementsByTagName('table')[0].rows)
for (var d of r.cells) console.log(d.innerHTML);
}
var ins_after = function (obj) {
obj = obj || window.event;
var r = document.getElementsByTagName('table')[0].insertRow(obj.parentNode.parentNode.rowIndex);
var c1 = r.insertCell(0);
var c2 = r.insertCell(1);
var c3 = r.insertCell(2);
c1.innerHTML = 'drugo_ne6to';
event.preventDefault();
//alert(c1);
}
</script>
</head>
<body>
<form>
<table>
<caption style='font-size: 1.5em;'>Parameters list</caption>
<tr>
<th>Insert after</th>
<th>Delete</th>
<th>Parameter name</th>
</tr>
<tr>
<td>
<button onclick="ins_after(this);">Insert</button>
</td>
<td>ne6to</td>
<td>
<input type="text" name="property">
</td>
</tr>
</table>
</form>
<button onclick="proba();">proba1</button>
<button onclick="ins_after(this);">proba2</button>
</body>
</html>
A button inside a form has by default type="submit" and by clicking on it you will submit the form and reload the page, resetting your table rows (check the accepted answer here Disable form auto submit on button click)
To avoid this kind of behavior add type="button" to your "Insert" button inside the table like this:
<form>
<table>
<caption style='font-size: 1.5em;'>Parameters list</caption>
<tr>
<th>Insert after</th>
<th>Delete</th>
<th>Parameter name</th>
</tr>
<tr>
<td>
<button type="button" onclick="ins_after(this);">Insert</button>
</td>
<td>ne6to</td>
<td>
<input type="text" name="property">
</td>
</tr>
</table>
</form>

How to make a print preview and print buttons for my html form

Hi currently i'm working on a html form with some fields, what all I need is to get a print preview of that form with the filled answers and later it should be printed on clicking on a print button. Can any one please help me out with this, I would be very thankful to you if you can.
Here is the example you can refer this.
Html code :
<html>
<body id="printarea">
<table class="tble">
<tr>
<td>
Student Name
</td>
<td>
John Sypon
</td>
</tr>
<tr>
<td>
Student Rollnumber
</td>
<td>
R001
</td>
</tr>
<tr>
<td>
Student Address
</td>
<td>
132 Kane Street Toledo OH 43612.
</td>
</tr>
<tr>
<td>
<input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
</td>
<td>
<input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>
</td>
</tr>
</table>
</body>
</html>
And include this css link:
<link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />
now print.css file :
#media print /*--This is for Print--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
-webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/
}
}
#media screen /*--This is for Print Preview Screen--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
}
}
and style.css
#media screen /*--This is for Screen--*/
{
.btn
{
background-color: #AFAFAF;
display: block;
}
.tble
{
background-color: #E5E5E5;
border: 1px solid #CD853F;
}
}
Now include this javascript code :
<script type="text/javascript">
/*--This JavaScript method for Print command--*/
function PrintDoc() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
/*--This JavaScript method for Print Preview command--*/
function PrintPreview() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
</script>
I hope this answer help!!!
Try,
$('button').on('click',function(){
print();
});
For print preview you can try Print and Print Preview separately using HTML, CSS and JavaScript
You can use javascript method window.print()

Getting a table row to act as a link

I am trying to have my table rows work as links. I have found a few answers on SO that show how to do it, but for some reason my code is not working. Could anyone help me find what is causing it to not work? Thanks.
I have tried looking at
Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)
and
how to get selected table row values using jquery?
so far.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>X</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
tr {
margin:2px;
padding:10px;
display:block;
background:#EEE;
cursor:pointer;
}
tr:hover {
background:#BBB;
}
</style>
</head>
<body>
<script>
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
</script>
<table class="tbl">
<tr class=clickableRow href="http://www.zombo.com">
<td>2014</td>
<td>ACADIA</td>
<td>SLE-2</td>
</tr><tr class=clickableRow href='http://www.xkcd.com'>
<td>2014</td>
<td>ACADIA</td>
<td>Denali</td>
</tr><tr class=clickableRow href='http://www.legit_url_not_fake_at_all.com'>
<td>2014</td>
<td>ACADIA</td>
....
(SNIP)
Thanks.
Use the Document.ready:
<script>
$(document).ready(function(){
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
});
</script>

Why the vertical scroll bar moves automatically?

I don't understand why the vertical scroll bar moves automatically to the most top position when "Line 9" clicked, for example. Further clicks does not move the scroll bar. Could anyone explain why, and how to fix this ?
I work with Firefox 3.6.3.
HTML:
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript" src="test.js"></script>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
JS:
$(document).ready(function() {
$(".column1").each(function(index) {
$(this).after("<td class='column2'>Details " + index + "</td>");
$(this).toggle(function() { $("[row='" + index + "'] .column2").fadeIn("fast") },
function() { $("[row='" + index + "'] .column2").fadeOut("fast") });
});
});
CSS:
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
width: 100px;
background-color: green;
color: white;
}
.column2 {
display: none;
width: 200px;
background-color: blue;
color: white;
}
After doing some trial and error tests, it looks like this is related to the moment that the browser recalculates and redraws the table when you fade in/fade out one of the cells. There's nothing wrong with your code, and jQuery is correctly toggling the 'display' property of the cell - it looks like it's a minor bug in FF.
Probably the easiest way around it is to avoid toggling table cells themselves, and instead toggle the contents of the column2 cell, like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="JavaScript">
$(document).ready(function() {
$("td.column1").each(function(index) {
$(this).after('<td class="column2"><span class="details">Details ' + index + '</span></td>');
$(this).toggle(
function(){$(this).siblings('.column2').children('span.details').fadeIn("fast")},
function(){$(this).siblings('.column2').children('span.details').fadeOut("fast")}
)
});
});
</script>
<style type="text/css" media="screen">
div {
overflow: auto;
height: 100px;
width: 300px;
border: 1px solid blue;
}
.column1 {
cursor: pointer;
}
.column2 .details{
display:none;
}
</style>
</head>
<body>
<div>
<table>
<tr row='0'><td class='column1'>Line 0</td></tr>
<tr row='1'><td class='column1'>Line 1</td></tr>
<tr row='2'><td class='column1'>Line 2</td></tr>
<tr row='3'><td class='column1'>Line 3</td></tr>
<tr row='4'><td class='column1'>Line 4</td></tr>
<tr row='5'><td class='column1'>Line 5</td></tr>
<tr row='6'><td class='column1'>Line 6</td></tr>
<tr row='7'><td class='column1'>Line 7</td></tr>
<tr row='8'><td class='column1'>Line 8</td></tr>
<tr row='9'><td class='column1'>Line 9</td></tr>
</table>
</div>
</body>
</html>
So, the script adds the column2 cell, and that stays visible the whole time - instead we show/hide the <span class="details"> within it. I've tested this version in FF 3.6.3 and it behaves as it should!
Oh - and I cleaned up your jQuery selectors for better performance. If you want more info on why, let me know!
I copied and tried your code, on Firefox 3.6.3 and Chrome 5.0.375.29. And saw nothing what you described so I am at loss.
Scrollbar moved only when scrolling normally, not when clicking on the text.

Categories