Basically when a user clicks on a specific link that I have set-up within an SVG graph view on a page, using a click event that calls window.location.href I would like it to branch to a report (html table via anchor tag) that is below the graph and highlight the rows red, matching the rule id, say where rule id equals 90, passed as part of the href link.
I would like to see in my example below, rows 1 and 4 highlighted red to notify the user which rules are affected.
I would also like a means of first resetting the table highlights, just in case they exists from a previous click based on a different rule id href click.
I realise that I will need to use a jQuery .each() function, but just not sure how to check for Rule = 90 and highlight that entire row.
HTML table may look like the following:
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>
Use :contains() jQuery selector to filter elements and .css() to set the values. .closest('tr') will get the parent row.
var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');
*Note : :contains() finds match in the whole text node.
$(document).ready(function(){
var hrefValue = 90;
$('td.the-rule:contains('+hrefValue+')').closest('tr').css('background-color', 'red');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>
You could use .filter and return elements containing roleId.
var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(td){
return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');
$(document).ready(function(){
var ruleId = 90;
$ruleTd = $('.the-rule');
$('.rule-table tr').css('background-color', 'white');
$ruleTd.filter(function(){
return parseInt($(this).text()) === ruleId;
}).parent().css('background-color', 'red');
})
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="rule-table" style="width:100%">
<tbody>
<tr>
<th>Number</th>
<th>Rule</th>
<th>First Name</th>
<th>Points</th>
</tr>
<tr>
<td>1</td>
<td class="the-rule">90</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>2</td>
<td class="the-rule">87</td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>3</td>
<td class="the-rule">22</td>
<td>Adam</td>
<td>Johnson</td>
<td>67</td>
</tr>
<tr>
<td>4</td>
<td class="the-rule">90</td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</tbody>
</table>
Related
could someone help me with this block of code please.
I have a table that usually comes with more than 5 rows.
I want to show only 5 when loading the page, and when clicking on "SHOW MORE" show the rest, when clicking on "SHOW LESS" show only 5.
SHOW MORE and SHOW LESS must be the same button
Can someone help me. I started using Jquery, but I wanted to use pure JS
$("[id*='trid'] > tr").each(function(index) {
if (index >= 5) {
$(this).hide();
}
});
function mostrarRegistros() {
$("[id*='trid'] > tr").each(function(index) {
$(this).show();
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()">Show More/ Show Less</button>
Here is a solution using vanilla js, its one way to do it but could do it differently like attach the button dynamically which would simplify it abit.
If you have multiple tables use a class to define that the table should have reveal functionality, then grab all tables and pass in the element to a function which provides the functionality, then return the set of methods which can call on the buttons, using an id as an identifier.
const tableReveal = function(elm, options) {
// merge options
options = Object.assign({}, {
limit: 3
}, options)
// the tr's
let trs = elm.querySelectorAll('tbody tr')
// shown state
let shown
// funcs
const hide = () => {
trs.forEach((tr, index) => index >= options.limit ? tr.style.display = 'none' : '')
shown = false
}
const show = () => {
trs.forEach((tr) => tr.style.display = 'table-row')
shown = true
}
// initial state
hide()
// reveal funcs
return {
toggle: () => shown ? hide() : show(),
hide,
show
}
}
/**
* Usage:
* - For each over every table-reveal class, init reveal func and pass in element + options, return and assign table[id] for button
*/
let table = {}
document.querySelectorAll('.table-reveal').forEach(el => table[el.getAttribute('id')] = tableReveal(el, {
limit: 5
}))
<table style="width:100%" class="table-reveal" id="table-reveal-1">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-1'].toggle()">Show More / Show Less</button>
<table style="width:100%" class="table-reveal" id="table-reveal-2">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<button type="button" onclick="table['table-reveal-2'].toggle()">Show More / Show Less</button>
And this is a solution from me on jquery, using the pseudo-classes :visble, which determines the visible tags of the tr, as well as the lt() selector to determine the minimum value of the rows in the table.
Also in my example, the button changes the text depending on the need to hide or show the text:
$('button').text('Show More');
and
$('button').text('Show Less');
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
function mostrarRegistros() {
if ($('#trid tr:visible').length <= 5) {
$('#trid tr').show();
$('button').text('Show Less');
} else {
$('#trid tr').hide();
$('#trid tr:lt(5)').show();
$('button').text('Show More');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tbody id="trid">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John 3</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 4</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 5</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>John 6</td>
<td>Doe</td>
<td>80</td>
</tr>
</tbody>
</table>
<br />
<br />
<br />
<button type="button" onclick="mostrarRegistros()"></button>
Can I have a separate js file which performs action on html control events like
I have three tables on a webpage whenever I put over mouse on any table a alert should show.
I want the code in a separate js file and I cannot use id or class as selector
the selector should be the html control only like table.onmouseOver
I have tried using the
table.onmouseover = handler;
function handler(event){
alert("mouseOver done");
return false;
}
but it is not working
<body>
<table border="1">
<tr id="red">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</br>
</br>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
As listed above I want to fire event whenever a mouse comes over any of the one table without id or class selector
Try the below Code Snippet
function handler(event){
alert("mouseOver done");
return false;
}
document.addEventListener("DOMContentLoaded", function() {
var oTables = document.getElementsByTagName("table");
for(var i=0;i<oTables.length;i++)
{
oTables[i].addEventListener("mouseover",handler);
}
});
<html>
<body>
<table border="1">
<tr id="red">
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
</body>
</html>
I need your help.
While I love this jQuery tablesorter plug-in, its only downfall is that my line numbers because out of sorts upon sorting another column. How would one renumber the line item #'s such that they would be in sequence. For example, if I were to click on the [First Name] column, the table becomes sorted as follows in the image below:
As you can clearly see, my numbers on the left are now out of sorts. How could delete and re-number the line item #'s in their proper sequence starting from (lowest to the highest integer).
Here is the markup in question:
$(document).ready(function() {
$("#myTable").tablesorter();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
</script>
<table id="myTable" class="style1" border="1" cellspacing="1">
<thead>
<tr style="border-width: 1px; background-color: #C0C0C0">
<th>#</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>2</td>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>3</td>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>4</td>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
After completing sorting it will fire sortEnd event at that time update the numbering
$(document).ready(function() {
$("#myTable").tablesorter().on("sortEnd", function() {
$(this).find("tr:gt(0)").each(function(i) {
$(this).find("td:eq(0)").text(i+1);
});
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
</script>
<table id="myTable" class="style1" border="1" cellspacing="1">
<thead>
<tr style="border-width: 1px; background-color: #C0C0C0">
<th>#</th>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>2</td>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>3</td>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>4</td>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
Use the sortEnd event and add some code to re-number the first column:
$(document).ready(function()
{
$("#myTable").tablesorter().bind("sortEnd",function(e, t){
var table = $(this);
table.find('tbody tr').each(function(i){
var row = $(this);
var firstCell = row.find('td:first-child');
firstCell.text(i+1);
});
});
}
);
Working fiddle: http://jsfiddle.net/gdxjvtkm/
Assuming this table (actually it could have more columns and rows):
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Now my goal is to be able to click on the table data (cells), for example "Car", and then show only the two cars. Another click on "Car" should show the hole table again. Or one click on "Red", and then only the red vehicles (red car and red motorcycle) should be shown. How can this be achieved using jQuery?
$(function () {
$( "td" ).on( "click", function() {
var type = $(this).text();
$('td:first-child').parent('tr:not(:contains('+type+'))').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="vehicles">
<tr>
<th>Type</th>
<th>Color</th>
<th>Wheels</th>
</tr>
<tr>
<td>Car</td>
<td>Red</td>
<td>4</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Bike</td>
<td>Blue</td>
<td>2</td>
</tr>
<tr>
<td>Car</td>
<td>Blue</td>
<td>4</td>
</tr>
<tr>
<td>Bike</td>
<td>Green</td>
<td>2</td>
</tr>
<tr>
<td>Motorcycle</td>
<td>Red</td>
<td>2</td>
</tr>
</table>
Stores the text from current td, hides tr nodes which do not contain the text.
Here's a really really simple test that might help you get started.
$(function () {
$("#vehicles tr td").click(function () {
var desc = $(this).html();
$("#vehicles tr").css("background-color", "white");
$("#vehicles").find(":contains(" + desc + ")").closest("tr").css("background-color", "red");
});
});
This assigns a click event to every TD element, stores its value somewhere and then checks if said value exists in the table, highlighting the elements that are matched. Give it a spin, I think it'll set you off in the right direction.
In the table I am receiving data from the db, and all the marks have a particular value A or B. According to the value I need to separate the data , if the mark has value A it should be stored under the A and if mark has the value B it should be stored under B. I am not sure how to write the jquery for this problem. I have attached a fiddle along with the post. Showing only the html and the required format of the table.
<table style="width:300px">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>Required Table format
<table style="width:300px">
<tr>
<th>a</th>
<th>b</th>
</tr>
</table>
http://jsfiddle.net/yzzp5/
Try this,
<table style="width:300px" id="marksId">
<tr>
<td>Marks</td>
<td>Value</td>
</tr>
<tr>
<td>30</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>a</td>
</tr>
<tr>
<td>20</td>
<td>a</td>
</tr>
<tr>
<td>50</td>
<td>b</td>
</tr>
<tr>
<td>65</td>
<td>b</td>
</tr>
<tr>
<td>75</td>
<td>b</td>
</tr>
</table>
<br>
Required Table format
<table style="width:300px" id="reqtable">
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Your script goes here
$(function(){
var data={'a':[],'b':[]};
$('#marksId tr').each(function(index,tr){
if($(tr).find('td').eq(1).text()=='a'){
data.a.push($(tr).find('td').eq(0).text());
}
if($(tr).find('td').eq(1).text()=='b'){
data.b.push($(tr).find('td').eq(0).text());
}
});
var HTML='';
// alert(JSON.stringify(data))
// if both have equal counts
$.each(data.a,function(idx,val){
HTML+='<tr><td>'+data.a[idx]+'</td><td>'+data.b[idx]+'</td></tr>';
});
// alert(HTML);
$('#reqtable').append(HTML);
});
You might need to change this code based on requirement but it will give you an idea to work on
Check Example here also.