javascript - Slider filtering table numeric column - javascript

I am trying to add a slider on my page which is filtering a specific numeric column,of a specific class of a specific class table.
I have tried to correct and make modifications of many existing example1,example2 ... without success.
I use Zurb-Foundation slider. Slider works for now, but it is not linked with anything of my page(not useful at all). Here is the HTML for the slider ;
<div class="large-9 columns">
<div class="slider" data-slider data-initial-start="0.5" data-end="1" data-step="0.05" id="slider-filter">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns">
<input type="number" id="slider-number">
</div>
According to the Foundation doc and examples above, here is my JS :
$(document).ready(function () {
$(function () {
$("#slider-filter").slider({
slide: function (event, ui) {
// in this function we can define what happens when a user changes the sliders
console.log("Slider is moving");
}
})
})
})
I am failing already at this part, of detecting my slider movement... I also tried according to the doc this line(var elem = new Foundation.Slider(element, options);) in order to use within the .slide()... no success.
Table example :
<table id="Table-to-filter">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr class="Prt">
<td>XXXX</td>
<td>23</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>51</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>77</td>
<td>XXXX</td>
</tr>
<tr class="Prt">
<td>XXXX</td>
<td>215</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>450</td>
<td>XXXX</td>
</tr>
<tr class="Chi-to-filter">
<td>XXXX</td>
<td>450</td>
<td>XXXX</td>
</tr>
Any detailed help would be more than appreciated to solve this problem using Foundation slider.
Thank you.
After Nowres Rafed's response :
FILTERING OF BIGDATA TABLE
After many tries, here is what I have been able to do. I have explications and questions about my code.
As you can see, my table is organised with this structure, an expandable parent row that gives many child rows if you click on arrow icon. I would like to use the slider to filter the "Score" column of both parent and child rows. My score is stored on a "accordion menu", not on a simple <td>.
I was wondering is there a better way to filter only the Score column ? I used the row.cells indice, does it change the speed to do it with the row.cells name (i.e "Score") ? Do you think I used the correct way to acces to my score value, using : $(colx.getElementsByClassName("accordion-title")).html();
Moreover, I divided the filtering of parent and child rows on two different loops, is it possible to improve this part ?
Many thanks for your help.

You are initializing the plugin in the wrong way, there is no jQuery plugin called slider in your code.
Here is a working example for your case:
$(function() {
var $filter = $('.slider');
$filter.foundation();
$filter.on('moved.zf.slider', function() {
var slideValue = $('#sliderOutput1').val();
// Do your filtering here
console.log(slideValue);
});
});
Live: https://codepen.io/anon/pen/VbYZgO
Just add your columns filtering code and it's done.
edited:
I think you can make it simpler: https://codepen.io/anon/pen/Qvjqyo
add score-value class on each accordion-title, you can extend the exemple if you wish to distinguish between child and parent rows...

Related

Retrieving data from two different sources to fill <tr> in table javascript/Vue.js

Good day developers ... im trying to get data from two different sources in order to fill a tr , using v-for.My idea was using 2 v-for referring two different sources but the result isnt the right one .
lets say i got this 2 data sources
all_games=[
{game_id: 1, game_player: messi},
{game_id: 2, game_player: cr7},
{game_id: 3, game_player: Roni},
{game_id: 4, game_player: Ibra},
]
lastGameStatus=[ "Looses", "Wins", "Wins", "Looses"]
then on my html tag trying to build my table i set this
<v-simple-table>
<template>
<thead>
<th>Game #</th>
<th>Game Player</th>
<th>Game Status</th>
</thead>
<tbody >
<tr v-for="(game,index) in all_games" :key="index" >
<td> # {{game.game_id}}</td>
<td> {{game.game_player}}</td>
=======UNTIL HERE BEING RENDERED TO THE MAIN DATA SOURCE THE TABLE FILLS PERFECT===
<span v-for="(value1, index1) in lastGameStatus" :key="index1" >
<td >
{{value1}}
</td>
</span>=======THEN HERE TRYING TO USE A SECOND V-FOR ON A SPAN TO ROLL A 3rd <td> I GOT THE PROBLEM=====
</tr>
</tbody>
</template>
</v-simple-table>
My ideal result would be a table like this :
Game# Game Player Game status
----------------------------------------
#1 messi Looses
#2 cr7 Wins
#3 Roni Wins
#4 Ibra Looses
Is possible to improve this using two v-for to fill a same row ?
thanks in advance!!!!
It's not recommended to use span as direct child of tr so try to use onetd to render a data in given index :
<td >
{{lastGameStatus[index]}}
</td>

How do I expand and collapse (i.e. toggling) a table row (tr)?

With my preexisting knowledge (for example this one) I have seen so far that a div container can easily be toggled (i.e. hide and show). However I am pretty confused when I have some data inside tr and I want to display and hide few items once that tr is clicked. Let's consider a food menu (I name it "Rice"), and there are few sub menus under that category (I name them "Fried rice", "Boiled rice"...). Once the "Rice" is clicked (or possibly if I have a arrow or plus icon to click on), the sub menus should get displayed. Similarly, they should hide themselves once the arrow is clicked again.
Please see in this website how they toggle the restaurant menu with arrow key. I want to do the exactly same thing.
The code I am working on:
<div class="media-right">
<table class="table">
<tr>
<td>
<h3 class="menu-title">Rice</h3>
</td> <!--make this tr expandable and collapsable-->
<td>
<div class="menu-rate">$100.00</div>
</td>
</tr>
<tr>
<td>
<h3 class="menu-title">Fried Rice</h3></td>
<td>
<div class="menu-rate">$50.00</div>
</td>
</tr>
<tr>
<td>
<h3 class="menu-title">Boiled Rice</h3></td>
<td>
<div class="menu-rate">$25.00</div>
</td>
</tr>
</table>
</div>
You can try a class "Accordion" which has the similar functionality.
You can find it here in detail.
<script>
$(function(){
$('.menu-rate').click(function(){
$(this).closest('.container').toggleClass('collapsed');
});
});
</script>
Something like this?
function Rice(){
if(document.getElementById("Rice").style.display == "none"){
document.getElementById("Rice").style.display = "block";
}else{
document.getElementById("Rice").style.display = "none";
}
}
function boiledRice(){
if(document.getElementById("boiledRice").style.display == "none"){
document.getElementById("boiledRice").style.display = "block";
}else{
document.getElementById("boiledRice").style.display = "none";
}
}
function friedRice(){
if(document.getElementById("friedRice").style.display == "none"){
document.getElementById("friedRice").style.display = "block";
}else{
document.getElementById("friedRice").style.display = "none";
}
}
<div class="media-right">
<table class="table">
<tr>
<td>
<a onclick="Rice()"><h3 class="menu-title">Rice</h3></a><div id="Rice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td> <!--make this tr expandable and collapsable-->
<td>
<div class="menu-rate">$100.00</div>
</td>
</tr>
<tr>
<td>
<a onclick="friedRice()"><h3 class="menu-title">Fried Rice</h3></a><div id="friedRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td>
<div class="menu-rate">$50.00</div>
</td>
</tr>
<tr>
<td>
<a onclick="boiledRice()"><h3 class="menu-title">Boiled Rice</h3></a><div id="boiledRice" style="display:none;"><ul><li>1</li><li>2</li><li>3</li></ul></div></td>
<td>
<div class="menu-rate">$25.00</div>
</td>
</tr>
</table>
</div>
Is there a constraint that is forcing you to utilize a table? Since you're already using jQuery, you could easily achieve this type of functionality with jQuery UI's accordion widget.
$( "#accordion" ).accordion({
collapsible: true
});
Here's a basic example.
If you're open to use a library for this, you can try using bootstrap-table by wenzhichin. I find it very flexible.
Subtable - http://issues.wenzhixin.net.cn/bootstrap-table/#options/sub-table.html
Collapsing row - http://issues.wenzhixin.net.cn/bootstrap-table/#methods/expandRow-collapseRow.html
checkout collapsible elements on material design made by google, really helpful an easy to use:
http://materializecss.com/collapsible.html

<tr> dropdown issue in dynamic table. html / php

I am trying to do a drop-down table row beneath another one in a semi auto-generated table. I searched for a bit and learned that you could not animate table elements directly. I tried wrapping my table in a div and the animation worked.
My problem now is that I don't really know how to proceed to make my table with that div while looping on a specific part. It just messes up the table, some way or another.
<body>
<table>
<tbody>
<tr>
// HEAD OF TABLE //
</tr>
{{FOREACH}}
<tr>
// ALWAYS VISIBLE TR //
</tr>
<tr class="hidden hideable{{$i.id}}">
//CONTENTS//
</tr>
{{/FOREACH}}
</tbody>
</table>
$(document).ready(function() {
$(".btn").click(function(e){
e.preventDefault();
var tar = $('.hideable'+$(this).attr('attrib_target'));
tar.slideToggle('slow');
// tar.toggle();
});
});
Where should I open and close the div to have something functional?
EDIT: What I need is basically:
Table header (fixed)
Table Row with basic information (fixed)
Table Row hidden with more info (togglable)
The problem I have is the loop because I need to wrap the hidden table row inside a div AND a table (otherwise, the div is just ejected from the table because of their property). the loop keeps messing with my different attemps at doing it right to be able to animate the hidden part.
Thanks.
Any part of table elements, be it <tr> or <tbody> do not hide the overflowing content if the set height is less than the actual height of the contents. That's why the animations don't work with table elements. I would advise to wrapping your content inside a <div> and using slideToggle to animate.
Please check the code below:
$(document).ready(function() {
$(".btn").click(function(e) {
e.preventDefault();
var tar = $('.hideable' + $(this).attr('data-target'));
tar.slideToggle('slow');
// tar.toggle();
});
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>
// HEAD OF TABLE //
</th>
</tr>
</thead>
<tbody>
<!-- {{FOREACH}} -->
<!-- FOREACH ITERATION 1 -->
<tr>
<td>
// ALWAYS VISIBLE TR //
<button type="button" class="btn" data-target="1">Show</button>
</td>
</tr>
<tr>
<td>
<div class="hidden hideable1">
//CONTENTS//
</div>
</td>
</tr>
<!-- END: FOREACH ITERATION 1 -->
<!-- FOREACH ITERATION 2 -->
<tr>
<td>
// ALWAYS VISIBLE TR //
<button type="button" class="btn" data-target="2">Show</button>
</td>
</tr>
<tr class="">
<td>
<div class="hidden hideable2">
//CONTENTS//
</div>
</td>
</tr>
<!-- END: FOREACH ITERATION 2 -->
<!-- {{/FOREACH}} -->
</tbody>
</table>

How to get a background image of a table with no ID with javascript?

I'm trying to get a backround image from a table but this table has no ID, it just says "" to the ID. All the functions to get the images that I've found ask for the 'tableid' but none of them work. :(
To be more specific about the problem, I need to check if this background image has a specific name, if so, I'll need the text of this table. But I can't get the text without knowing how to identify which table has that image on the background.
Any ideas?
Just editing to set a code (yes, it's a beginner code...)
var a = 44
var b = ""
var c = ""
for (i=0; i < a; i++)
{
b = document.getElementsByTagName("table")[i].getAttribute("background")
if b = "common/imgs/tabfade1.gif"
{
c = document.getElementsByTagName("b")[i].getProperty("textContent")
}
}
return c;
Thanks in advance.
Lets say you have those tables with different backgrounds:
<table style="background: url('/file/Fw7FiAU/0b3f6fce-b461-488c-bb6e-cc92987cf6fb.jpg') no-repeat center center;"><tbody><tr><td>hey</td></tr><tr></tr></tbody></table>
<table style="background:url('/file/Fw7FiAU/teki.jpg') no-repeat center center;"><tbody><tr><td>hi</td></tr><tr></tr></tbody></table>
<table style="background:url('/file/Fw7FiAU/beki.jpg') no-repeat center center;"><tbody><tr><td>ho</td></tr><tr></tr></tbody></table>
<table style="background:url('/file/Fw7FiAU/yuli.jpg') no-repeat center center;"><tbody><tr><td>hiya</td></tr><tr></tr></tbody></table>
Use any element selector depending on browser support - e.g. "getElementsByTagName" etc. For this example I have used "querySelectorAll" .Use the "getComputedStyle(tables[i],null)" to grab the background style and check for the desired image name in order to identify which table is the one you need.
var tables= document.querySelectorAll('table');
for(var i=0;i<tables.length;i++){
if(window.getComputedStyle(tables[i],null).background.match(/yuli/i)){
/*do what you have to do with this table*/
console.log(window.getComputedStyle(tables[i],null).background);
//console outputs the style: rgba(0, 0, 0, 0) url("https://****************/file/Fw7FiAU/yuli.jpg") no-repeat scroll 50% 50% / auto padding-box border-box
}
}
Modify the style selector accordingly if it is background-image.
Cheers
You don't need to have an id attribute to select elements using JavaScript. You can do stuff like selecting all tables on the page, or the second one, or table with a given class etc.
A great way to do that would be jQuery, a JavaScript library for querying and interacting with the DOM.
EDIT:
Here is a simple example, that uses jQuery to select all tables and logs their background-image css property to the browser's console. Hopefully you can use this as a starting point:
$('table').each(function(index, table){
var bgImage = $(table).css('background-image');
console.log('bgImage: ' + bgImage);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr> <tr>
<td>aaa aaa aaa aaa aaa aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr> <tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr> <tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
</table>

Copy Row from one table to another using Javascript

I have created two tables on my page. I want that when a user clicks on a table row, the data of that row is copied to another table.
<div class="processor">
<table id="proctable">
<tr class="header">
<th>Description</th>
<th>Price</th>
</tr>
<tr class="hover">
<td><span id="4770K">Intel Core i7 4770K 4TH GEN. 3.5GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</span></td>
<td>$320</td>
</tr>
<tr class="hover">
<td><span id="4771">Intel Core i7 4771 4TH GEN. 3.5GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</span></td>
<td>$290</td>
</tr>
<tr class="hover">
<td><span id="4770">Intel Core i7 4770 4TH GEN. 3.4GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</span></td>
<td>$280</td>
</tr>
<tr class="hover">
<td><span id="4771">Intel Core i5 4670K 4TH GEN. 3.4GHZ 6MB CACHE MAX TURBO FREQUENCY 3.8GHZ</span></td>
<td>$240</td>
</tr>
</table>
<div id="aside">
<table id="comptable">
<tr class="header">
<th>Product</th>
<th>Price</th>
</tr>
</table>
</div>
I have searched for any help I may find but could not get any specific answer.
Here is the link to the code on jsfiddle
http://jsfiddle.net/jibranjb/LzgNd/#&togetherjs=fcgCI5QRn8
I am fairly new to Javascript and jQuery so please consider that.
Not sure what you wanted exactly. But if you want to store the data you can store it using arrays. ( you can use any data structure, I am using them as they are simple)
Check the below code, I am using items array, to store the selected row. On clicking the Add to List button, the selected tr will be added to the array and it will be display in the respective table.
var items = [];
$(".addBtn").on("click", function() {
var newTr = $(this).closest("tr").clone();
items.push(newTr);
newTr.appendTo( $("#comptable") );
});
I have added the Add to List button, the updated html markup would be;
<td>
<input class="addBtn" type="button" value="Add to List">
</td>
Updated Fiddle Demo
add this script ( using Jquery)
$('#proctable tr.hover').unbind('click').click(function(){
$(this).clone().appendTo('#comptable');
return false;
})
http://jsfiddle.net/4qFgX/3/
I will suggest this:
$('#proctable tr.hover').click(function () {
var x = $(this)[0].outerHTML
$('#comptable').append(x);
});
Something like this ?
$(function() { // when dom is ready
$('#proctable tr.hover a').on('click', function(e) { // when you click on a link
var row = $(this).parents('tr').eq(0); // you get the direct parent of the current clicked element
$('#comptable').append(row); // you append this parent row in the other table
e.preventDefault(); // your prevent the default link action
});
});
http://jsfiddle.net/LzgNd/1/

Categories

Resources