I have two tables with different heights next to each other. I would like the tables to slideToggle independently.
When selecting the table headers, currently nothing is happening...
The fiddle: http://jsfiddle.net/wod51fvL/
Any comments welcomed!
The HTML:
<h1>Test Heading 1</h1>
<table>
<tr>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="clientClick" colspan="3" style="cursor:pointer;">Client</th>
</tr>
</thead>
<div id="clientResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
<td valign="top">
<table class="tableSort">
<thead>
<tr>
<th id="employeeClick" colspan="3" style="cursor:pointer;">Employee</th>
</tr>
</thead>
<div id="employeeResult">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</div>
</table>
</td>
</tr>
</table>
The JS:
var j$ = jQuery.noConflict();
j$(document).ready(function () {
j$("#clientClick").click(function () {
j$("#clientResult").slideToggle(600);
});
});
j$(document).ready(function () {
j$("#employeeClick").click(function () {
j$("#employeeResult").slideToggle(600);
});
});
A very bad html and js
You can't wrap tr tags into div.
You don't need to call document.ready function twice
Here is a quick jsfiddle to fit your example. It needs to be improved(no time sorry).
http://jsfiddle.net/wod51fvL/7/
$(document).ready(function () {
$("#clientClick").click(function () {
$("#clientResult").slideToggle(600);
});
$("#employeeClick").click(function () {
$("#employeeResult").slideToggle(600);
});
});
Related
How can I add new <tr> after a clicked <tr>. On click of this <tr> and remove now created when click other <tr> (with repeat 1st scenario) by jQuery?
I tried like this, but it does not work:
$("#test_table tr").click(function() {
$(this).prev().remove();
$(this).closest('tr').append('<tr><td>2.2</td></tr>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
Given your goal it seems that you want to replace the current tr with the new HTML snippet. To do that you just need to call after() to insert the new HTML, then remove() to clear the original tr:
$("#test_table tr").click(function() {
$(this).after('<tr><td>2.2</td></tr>').remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
However, as the only effect of this is to change the text within the td, you can just call text() instead:
$("#test_table tr").click(function() {
$(this).find('td').text('2.2');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="test_table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
There is a table that is sorted by clicking from larger to smaller values. How to make sure that the ordinal number of the value is always between 1 and 5 after sorting the table?
That is, the numerical order should always be between 1 and 5 and should not be sorted.
$(document).ready(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
Never heard of - and therefore never used - stupidtable but it doesn't look like there is a call-back event once the sorting has completed.
So instead, I've used a timeout as part of the click event.
The within the timeout finds all the first-child <td> elements, and uses the index of each to set the text of the element.
As the stupidsort code does the sort 10-milliseconds after the client event, I've had to make it 20 in the code for it to work...
$(function() {
var $table = $('#simpleTable').stupidtable();
$table.find('thead th[data-sort]').on('click', function() {
$(this).eq(0).stupidsort();
// After a short period, set the values
setTimeout(function() {
$table.find("tbody tr td:first-child").each(function(i, v) {
$(this).text((i + 1).toString());
});
}, 20);
});
});
<table id="simpleTable">
<thead>
<tr>
<th data-sort="int">#</th>
<th data-sort="int">int</th>
<th data-sort="float">float</th>
<th data-sort="string">string</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>15</td>
<td>18</td>
<td>banana</td>
</tr>
<tr>
<td>2</td>
<td>95</td>
<td>36</td>
<td>coke</td>
</tr>
<tr>
<td>3</td>
<td>2</td>
<td>152.5</td>
<td>apple</td>
</tr>
<tr>
<td>4</td>
<td>53</td>
<td>88.5</td>
<td>zebra</td>
</tr>
<tr>
<td>5</td>
<td>195</td>
<td>858</td>
<td>orange</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stupidtable/1.1.3/stupidtable.min.js"></script>
I'm reading data into an html table from a database and would like to alternate the row color when the value in the first column changes -- nothing fancy just alternate between two colors to help visually group the data. The issue I'm having is the groups of data is dynamic, and I don't know how to change the colors based on dynamic data. I'm open to use CSS, jquery, javascript -- whatever tricks you have that would work. I've created a very simple jsFiddle that has all rows the same color for you to play with.
UPDATED EXPLANATION:
When I say I want the row colors to alternate based on the value of a column changing, what I mean is, when looking at my fiddle example, the table rows start off aliceblue, and the value in the first column is 1. When that value changes to 2 I want the table rows to change colors to lightgreen. When the Key column value then changes to 3 I want the colors to switch back to aliceblue. When the key column value changes to 4 I want it to flip back to light green. Hope this helps to clarify...
As always, any help you can give would be greatly appreciated!!
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
<div id="banner-message">
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have added some javascript logic to make it work. I have added two scenarios. One if class should be based on the Odd/Even values and another is if class should be based on the value change.
See the Snippet below:
$(document).ready(function(){
$("#banner-message tbody tr").each(function() {
if(parseInt($(this).find("td").first().html()) % 2 == 0){
$(this).addClass("altColor");
}
});
let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != parseInt($(this).find("td").first().html())){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = parseInt($(this).find("td").first().html());
});
});
tbody tr {
background: aliceblue;
}
.altColor {
background: lightgreen;
}
div {
display:inline-block;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
Based on the Even/Odd values
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
<div id="banner-message2">
Based on the value change
<table>
<thead>
<tr>
<th>Key</th>
<th>val</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>5</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I hope this will help you :)
You can alternate color on a table with the :nth-child selector and the odd and even rules.
More can be found there https://www.w3.org/Style/Examples/007/evenodd.en.html
Try something like this:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
If you want to get the whole string in column use
$(document).ready(function(){
//let prevValue = parseInt($("#banner-message2 tbody tr").first().find("td").first().html());
let prevValue = $("#banner-message2 tbody tr").find("td:first").html();
console.log(prevValue);
let currentClass = '';
$("#banner-message2 tbody tr").each(function() {
if(prevValue != $(this).find("td:first").html()){
(currentClass=='')?currentClass = 'altColor':currentClass='';
}
$(this).addClass(currentClass);
prevValue = $(this).find("td:first").html();
});
});
In the below code, the first td has rowspan applied making the rest of the cells in that columns shift to the right. Here I want the cells in that column to hide instead of shifting, except the first cell which has rowspan. How do I do that in jQuery or CSS.
So, I want all the cells having 1 to be hidden except the one which was spanned.
Any suggestions would be helpful.
Fiddle: http://jsfiddle.net/a191jffw/28/
th, td{
width:70px;
}
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
This might be what your looking for.
$("table tr td[rowspan]").each(function() {
var i = $("table tr td").index($(this))
$("table tbody tr").each(function(_, x) {
$(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
});
})
Demo
$("table tr td[rowspan]").each(function() {
var i = $("table tr td").index($(this))
$("table tbody tr").each(function(_, x) {
$(x).children('td:eq(' + i + ')').not('[rowspan]').hide();
});
})
th, td{
width:70px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
Try this using jquery and css 'visibilty'.
$('table td').each( function(){
if ( !$(this).attr('rowspan') ) {
$(this).css({
'visibility' : 'hidden'
});
}
});
I perfer css to javascript, for those users which might be anti-javascript. With that said I'm throwing my solution out there.
tr > td:nth-child(1){
display:none;
}
tr:first-child > td:first-child{
display:table-cell;
}
I hope this help you.
$('#result td').each(function() {
if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
$(this).hide();
}
});
$('#result td').each(function() {
if ((!$(this).attr('rowspan') && ($(this).html() == 1))) {
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
I have tried to provide a solution with pure javascript. This should also work even if you change rowspan value.
(function(){
window.addEventListener('load',function(){
var td=document.querySelector('#result td[rowspan]');
var n=Number(td.getAttribute('rowspan'));
var tr=td.parentElement;
for(var i=0;i<n-1;i++){
tr=tr.nextElementSibling;
tr.firstElementChild.style.display="none";
}
});
})()
(function(){
window.addEventListener('load',function(){
var td=document.querySelector('#result td[rowspan]');
var n=Number(td.getAttribute('rowspan'));
var tr=td.parentElement;
for(var i=0;i<n-1;i++){
tr=tr.nextElementSibling;
tr.firstElementChild.style.display="none";
}
});
})()
th, td{
width:70px;
}
<div id="result">
<table border="1">
<tbody>
<tr>
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
I am trying to change css style for the first visible row on a table using jQuery and css rules.
When i change the offset i would like to show first visible table TBODY row in red using my css rule.
this is my code example :
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
Thanks for your help.
Through Pure css it's not possible:- Targeting first visible element with pure CSS
But through jQuery you can do like below:-
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
});
$(".is-visible:first").css({"background-color":"red"});
$(".is-visible").not(":first").css({"background-color":"#ffffff"});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You have to do using jQuery. Try below code.
$(document).ready(function(){
$('input').on('change',function(){
$.each($("tbody>tr"), function(index, element) {
offset = $('input').val();
if(index < offset){
$("#row-"+index).removeClass('is-visible');
}else{
$("#row-"+index).addClass('is-visible');
}
$(".is-visible").css({"background-color":"white"});
$("#row-"+offset).css({"background-color":"red"});
});
})
});
table tbody>tr{
display:none;
}
table tbody>tr.is-visible{
display:block;
}
table tr.is-visible:first-child{
background-color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
offset : <input type="number" min="0" max="100">
<hr>
<table class="table">
<thead>
<tr>
<th>TH 1</th>
<th>TH 2</th>
<th>TH 3</th>
</tr>
</thead>
<tbody>
<tr class="is-visible" id="row-0">
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="is-visible" id="row-1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr class="is-visible" id="row-2">
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr class="is-visible" id="row-3">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr class="is-visible" id="row-4">
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr class="is-visible" id="row-5">
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
</tbody>
</table>
You can see: https://jsfiddle.net/dkhny7t9/3/