I have two different tables in my html, and lets assume they all have the same data collection - meaning the rows are representing the same object in the collection. I would like to apply a following functionality: when I hover on the row N in Table 1, it highlights row N in Table 1 and the same row in Table 2. I was able to get it done, however I had to manipulate my collection - I added .hover property on object, and treated it as a flag on mouse enter and mouse leave, and added specific styles according. However, I know this should not be done this way - as it breaks the two way data binding rule.
Any ideas on how I can achieve that without manipulating my data?
You could achieve this by using little jQuery:
var tr_class;
$('.table1 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table2 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
function(){
tr_class = $('this').attr('class');
$('this').addClass('highlightBg');
$('.table1 ' + tr_class).addClass('highlightBg');
},
function(){
$(this).removeClass('highlightBg');
$('table1 ' + tr_class).removeClass('highlightBg');
});
Both of your table rows need to have a class like a row number for example counting them:
<tr class='1'>...</tr>
<tr class='2'>...</tr>
.highlightBg defines a background-color for highlighted state, in this example .table1 and .table2 are the classes of the tables.
Think that should do the work.
is this what you want.but I used bit jquery with this.hope this will help to you.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style type="text/css">
div.tableone{
margin:50px;
}
div.tabletwo{
margin: 50px;
}
table{
border:1px solid black;
}
table tr th{
width: 200px;
}
table tr td{
text-align: center;
}
.classOne{
background-color: orange;
color: white;
}
</style>
<body>
<h1>table one</h1>
<div class="tableone">
<table border="2">
<thead>
<tr class="trone">
<th>one</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>dataone</td>
<td>datetwo</td>
</tr>
</tbody>
</table>
</div>
<h1>table two</h1>
<div class="tabletwo">
<table border="2">
<thead>
<tr class="trtwo">
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>datatwo</td>
<td>datethree</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".trone").mouseenter(function(){
$(this).addClass("classOne");
$(".trtwo").addClass("classOne");
});
$(".trone").mouseleave(function(){
$(this).removeClass("classOne");
$(".trtwo").removeClass("classOne");
});
$(".trtwo").mouseenter(function(){
$(this).addClass("classOne");
$(".trone").addClass("classOne");
});
$(".trtwo").mouseleave(function(){
$(this).removeClass("classOne");
$(".trone").removeClass("classOne");
});
});
</script>
</body>
</html>
A solution to the problem, without using jQuery, would be the following:
const table1 = document.getElementsByClassName("table-one")[0];
const table2 = document.getElementsByClassName("table-two")[0];
const table1Rows = table1.querySelectorAll("tr:not(.table-header)");
const table2Rows = table2.querySelectorAll("tr:not(.table-header)");
for (let i = 0; i < table1Rows.length; i++) {
const table1Row = table1Rows[i];
const table2Row = table2Rows[i];
table1Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table1Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
table2Row.addEventListener("mouseover", function(e) {
table1Row.classList.add("hover-class");
table2Row.classList.add("hover-class");
});
table2Row.addEventListener("mouseleave", function(e) {
table1Row.classList.remove("hover-class");
table2Row.classList.remove("hover-class");
});
}
Here you can see the solution in action: JSFiddle
Related
there is an input textbox with the name Basic (id=cb) and two html table cell values with ids le10 and le11. I have to check the input value upto 3 consecutive levels (2 values from 1st table and 3rd one from 2nd table).
say for eg. if the input value is 69000, the two cell values of table id le10 i.e. 69000 and 71100 to be highlighted (its working with the jquery function)
The 3rd value is to be set in the table id le11. The very next higher value to the 71100 is 71800 in the 2nd table i.e. id le11. This 71800 to be shown in the input box id= nb.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style>
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color: yellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr><td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off"/></td></tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<tr><td>56100</td></tr>
<tr><td>57800</td></tr>
<tr><td>59500</td></tr>
<tr><td>61300</td></tr>
<tr><td>63100</td></tr>
<tr><td>65000</td></tr>
<tr><td>67000</td></tr>
<tr><td>69000</td></tr>
<tr><td>71100</td></tr>
<tr><td>73200</td></tr>
<tr><td>75400</td></tr>
<tr><td>77700</td></tr>
</table>
</td>
<td>
<table id="le11" class="table table-responsive table-striped">
<tr><td>67700</td></tr>
<tr><td>69700</td></tr>
<tr><td>71800</td></tr>
<tr><td>74000</td></tr>
<tr><td>76200</td></tr>
<tr><td>78500</td></tr>
<tr><td>80900</td></tr>
<tr><td>83300</td></tr>
<tr><td>85800</td></tr>
<tr><td>88400</td></tr>
<tr><td>91100</td></tr>
<tr><td>93800</td></tr>
</table>
</td>
<td>
Next Basic</td><td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off"/>
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--match and highlight the Current basic textbox value with the level table-->
<script>
$(function () {
$('#cb').on('change keyup', function() {
var search = $(this).val();
$('table#le10 tr td').filter(function() {
if($(this).text() == search){
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').closest('tr').next().addClass('highlight2');
var aftinc = $(this).parent('tr').closest('tr').next().text();
$('#aftinc').val(aftinc);
}else{
$(this).parent('tr').removeClass('highlight');
$(this).parent('tr').closest('tr').next().removeClass('highlight2');
}
})
});
});
//for extending the search to the 2nd table
$(function () {
$('#aftinc').on('input', function() {
var search2 = $(this).val();
$('table#le11b tr td').filter(function() {
if($(this).text() == search2){
$(this).closest('tr').next().addClass('highlight2');
}else{
$(this).closest('tr').next().removeClass('highlight2');
}
})
});
});
</script>
</body>
</html>
You are very close to the answer, what you left to do is to find the next higher value in table #le11. To start the search for next higher value, You can simply put the code after searching first two values.
I referred to this answer to get the next higher value as below:
push values from table #le11 to an array
if there is second value aftinc, find the next higher value of aftinc by Math.reduce
if there is third value found, search and highlight the corresponding cell
I have also make some minor changes to the code, like
change $(this).parent('tr').closest('tr') to $(this).parent('tr'), as mentioned in the comments they output the same result
clear all highlight classes before doing another search, instead of clear it while searching
You can try the code here:
$(function () {
// get values from table le11 for comparison
let tableValues = [];
$('#le11 tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le10 tr').removeClass('highlight highlight2');
$('#le11 tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le10
var aftinc = 0;
$('#le10 tr td').each(function () {
if ($(this).text() == search) {
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').next().addClass('highlight2');
aftinc = $(this).parent('tr').next().text();
$('#aftinc').val(aftinc);
}
});
// if values found, find next higher value in #le11
if (aftinc > 0) {
const closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le11 tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color: yellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}
<div class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr><td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off"/></td></tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<tr><td>56100</td></tr>
<tr><td>57800</td></tr>
<tr><td>59500</td></tr>
<tr><td>61300</td></tr>
<tr><td>63100</td></tr>
<tr><td>65000</td></tr>
<tr><td>67000</td></tr>
<tr><td>69000</td></tr>
<tr><td>71100</td></tr>
<tr><td>73200</td></tr>
<tr><td>75400</td></tr>
<tr><td>77700</td></tr>
</table>
</td>
<td>
<table id="le11" class="table table-responsive table-striped">
<tr><td>67700</td></tr>
<tr><td>69700</td></tr>
<tr><td>71800</td></tr>
<tr><td>74000</td></tr>
<tr><td>76200</td></tr>
<tr><td>78500</td></tr>
<tr><td>80900</td></tr>
<tr><td>83300</td></tr>
<tr><td>85800</td></tr>
<tr><td>88400</td></tr>
<tr><td>91100</td></tr>
<tr><td>93800</td></tr>
</table>
</td>
<td>
Next Basic</td><td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off"/>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
How to apply width to the table columns to avoid changing column width when no results found inside it. Columns in this table can also be hidden dynamically so I can't set fixed width on th element.
<table>
<thead>
<tr>
<th>col1</th>
<th>col2 <i>Filter:</i> <input type="text" ng-model="searchText"></th>
<th ng-hide="hideCol3">col3 <button ng-click="hideCol3 = !hideCol3">Hide column</button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in data | filter: searchText">
<td>{{d.col1}}</td>
<td>{{d.col2}}</td>
<td ng-hide="hideCol3">{{d.col3}}</td>
</tr>
</tbody>
</table>
Columns might be hidden in the table. So for example if I go to the plunker example, hide col3, and search for none existing text, lets say 'abc' the width of the table columns width changes.
I would like table to adjust width when some column is hidden (it is doing it now), but when I'm filtering and there are no results I don't want column width to change
plunker
Here is a way to do it https://jsfiddle.net/kblau237/qkn1z0LL/2/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>NNIndex</title>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js#1.2.x"></script>
<script src="~/Scripts/app.js"></script>
<style>
th, td {
border: 1px solid black;
}
table {
width: 100%;
}
</style>
<script type="text/javascript">
$(function () {
//http://stackoverflow.com/questions/1636201/is-the-order-objects-are-return-by-a-jquery-selector-specified
var cols = $(".manageWidth"); //access each ids with [0]..[2] usejquery each
$.each(cols, function (index, value) {
$('<input>').attr({
type: 'hidden',
class: 'hdnDyn',
id: "hdnDyn" + index,
value: window.getComputedStyle(cols[index], null).getPropertyValue("width")
}).appendTo('body');
});
$("input").keyup(function () {
KeepWidthSame();
});
$(".col3").click(function () {
KeepWidthSame();
});
function KeepWidthSame() {
$("table").css("width", "auto");
var cols = $(".manageWidth");
$.each(cols, function (index, value) {
$(this).css("width", $(".hdnDyn")[index].value);
});
}
})
</script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<table>
<thead>
<tr>
<th class="manageWidth">col1</th>
<th class="manageWidth">col2 <i>Filter:</i> <input type="text" ng-model="searchText"></th>
<th class="manageWidth col3" ng-hide="hideCol3">col3 <button ng-click="hideCol3 = !hideCol3">Hide column</button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="d in data | filter: searchText">
<td>{{d.col1}}</td>
<td>{{d.col2}}</td>
<td ng-hide="hideCol3">{{d.col3}}</td>
</tr>
</tbody>
</table>
</body>
</html>
I have the following code, taken from W3schools,but now I need to fetch the values that are present in a table named, 'create_table' in my 'firstSchema' Database. Kindly help me by suggesting what changes should be made to the code, in order to get it to display the contents on my table.
<!DOCTYPE html>
<html >
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Country }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers_mysql.php")
.then(function (response) {$scope.names = response.data.records;});
});
</script>
</body>
</html>
your code seems fine for actually displaying something but obviously you will need to modify your ng-repeat to reflect the data you are getting from your database. I think what you are missing is the server side aspect of the app, you need to replace the call to the w3schools endpoint with your own endpoint and in there you can query your database and return whatever you want.....
$http.get("yourappsomewhere/query_database_in_here.php")
.then(function (response) {$scope.yourdata = response.data;});
Ok, the title may sound a bit easy or common but my problem is not that easier. I'm working on making a HTML page that displays a database in table rows. A sample code is:
<table>
<tr><td>ABC Hospitals</td></tr>
<tr><td>India</td><td>Contact:9999999999</td></tr>
</table>
<table>
<tr><td>XYZ Blood Bank</td></tr>
<tr><td>NewJersey</td><td>Contact:8888888888</td></tr>
</table>
<table>
<tr><td>ABC Inn</td></tr>
<tr><td>California</td><td>Contact:7777777777</td></tr>
</table>
I have used tables to group data, with each one containing rows to display data. The code gives the following output sample, with the CSS effects added:
Image1 - Sorry, I'm a new user and StackOverflow doesn't allow me to post images.
I'm now in requirement of a 'Find in page' box to search the HTML document for a specific piece of information(say "ABC"). The search must display ONLY the table(s) that contains the query term("ABC"), in our case, hiding ALL other tables which do not contain the search term. I have achieved the sample output by manually editing the HTML, just to more clearly show my requirement. I'm in need of the JScript(or any appropriate) code to achieve the result:
Image2 - Sorry again.
I'm sure somebody here will be able to help me, either provide me some code piece or guiding me to some useful link. Thanks in advance.
-Sriram
var search = document.querySelector('#search');
var database = document.querySelector('#database');
search.addEventListener('input', function (e) {
// Every time the input changes, execute filterMatching.
filterMatching(search.value, database);
});
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
.hidden {
display: none;
}
<input type="text" id="search" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
Never mind, for some reason, the thing doesn't work when the element are stored as 'var' types. So I modified the code slightly as follows: I created a new function:
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
and called
<input type="text" id="search" oninput="fn_search()" />
The program now works fine.
The complete code is below:
<html>
<head>
<style>
table{
padding: 20px;
margin: 10px;
background: #990030;
color: #fff;
font-size: 17px;
font-weight: bold;
line-height: 1.3em;
border: 2px dashed #9ff;
border-radius: 10px;
box-shadow: 0 0 0 4px #990030, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-shadow: -1px -1px #aa3030;
font-weight: normal;
table-layout: fixed;
width: 325px;
height:75px;
}
th, td {
overflow: hidden;
width: 100px;
}
table.hidden {
display: none;
}
</style>
</head>
<body>
<script>
function fn_search(){
var phrase = document.querySelector('#search').value;
filterMatching(phrase, document.querySelector('#database'));
}
function filterMatching(value, parent) {
// Get the parent's children into an array
var children = [].slice.call(parent.children);
// Everything is shown by default.
children.forEach(function removeHiddenFromAll(child) {
child.classList.remove('hidden');
});
// Find those who are not matching
children.filter(function findNonMatching(child) {
// the toLowerCase() on both ensures the search is not case sensitive.
return child.textContent.toLowerCase().indexOf(value.toLowerCase()) < 0;
})
// After we found all the non matching, hide them
.forEach(function hideNonMatching(nonMatching) {
nonMatching.classList.add('hidden');
});
}
</script>
<input type="text" id="search" oninput="fn_search()" />
<div id="database">
<table>
<tr>
<td>ABC Hospitals</td>
</tr>
<tr>
<td>India</td>
<td>Contact:9999999999</td>
</tr>
</table>
<table>
<tr>
<td>XYZ Blood Bank</td>
</tr>
<tr>
<td>NewJersey</td>
<td>Contact:8888888888</td>
</tr>
</table>
<table>
<tr>
<td>ABC Inn</td>
</tr>
<tr>
<td>California</td>
<td>Contact:7777777777</td>
</tr>
</table>
</div>
</body>
</html>
i tried an html program for checking validation for empty field but it does't working?
please help me to show what is the error in my code?
the code snippet is below..
i tried an html program for checking validation for empty field but it does't working?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body
{
padding: 10px;
font-family:Calibri;
font-size:12pt;
}
td
{
padding:5px;
}
input
{
font-family:Calibri;
font-size:12pt;
}
span
{
font-family:Calibri;
font-size:9pt;
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<table>
<tr>
<td>First Name:
</td>
<td><input type='text' id='txtFName' class="required"/ >
</td>
</tr>
<tr>
<td>Last Name:
</td>
<td><input type='text' id='txtLName' class="required"/ >
</td>
</tr>
<tr>
<td>Age:
</td>
<td><input type='text' id='txtAge'/ >
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input type='text' id='txtEmail' class="required"/ >
</td>
</tr>
<tr>
<td colspan="2" style='text-align:center;'><input type="button" id="btnSubmit" value=" Submit ">
</td>
</tr>
</table>
</body>
</html>
<script>
$(document).ready(function() {
$('#btnSubmit').click(function(e)
{
alert("hai");
var isValid = true;
$('input[type="text"]').each(function() {
if ($.trim($(this).val()) == '') {
isValid = false;
$(this).css({
"border": "1px solid red",
"background": "#FFCECE"
});
}
else {
$(this).css({
"border": "",
"background": ""
});
}
});
if (isValid == false)
e.preventDefault();
else
alert('Thank you for submitting');
});
});
</script>
Add the Jquery library first before the plugin, check this fiddle.
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Include jQuery library in your head tag and try.
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Web application frameworks and tools are becoming smarter day by day, if the web-developers-community needs a change in framework/tools which is widely accepted and common, it gets adopted and rolled out, and all such tools have become so much web-developer's friendly today, specially Rails, jQuery etc, now you just need to google your wish, and you will find some plug-able, minimum setup/config libraries waiting for you to try out :)
So in this case just google for html form inputs validations.