I've got a table of cities, ordered by alphabetic order, and I've got another table with the alphabet. I would like to select a letter in this table and fade out the cities who don't begin with this letter, only the cities with this initial.
Could anybody help me?
Actually that's quite simple. Bind an onclick handler (a simple function) to the rows of the alphabet table. In that function, get the clicked letter from the mouse event, iterate through the rows of your city table and check if the city name begins with the clicked letter. You can then either display or hide that row with element.style.display = "block" / "none";
Btw, iterating through tables in JavaScript is simple, you can use this solution:
How do I iterate through table rows and cells in javascript?
I won't post any code for now, you should try to implement something by yourself first.
Related
I've to create a table with a row of input boxes.
The values entered in will then be multiplied by script and the answer placed in the last input box, the row total, if you will.
There is a button above the table to add another row.
Each time a row is added, the same input boxes need to appear, and the same 'row script' to calculate the row total.
Once a particular row has been added/updated, and it's row total calculated, a final number needs to be found, which is essentially the total of the row totals. Let's call it the column total.
My skills aren't super high, am learning as I go, especially from the decent responses this site seems to attract. One hopes this is at least understandable....
I've managed to get row to be added by a button using table.insertrow, and the scripts for doing the math are no problem. I have also managed to use a simple loop to create the dynamic variable names for each input box; named the same and numbered by row.
Where I'm stuck is generating the scripts to totalise a line and then another tot totalise the table, as the script needs to factor in how many rows there are, and I can't see how to write this except using Eval() (so far..).
I've also experimented a little with this and each but just got bogged down and could no longer see the logical flow.
What I've written to date is now just a mess.
Instead of posting code for comment/fix, I seek to better understand which way to address the problem using Javascript if at all possible, hopefully without using Eval().
Any suggestions would be welcomed by this brain-dead, gone bleary, wishing he hadn't started, noob.
UPDATE: Have seen a lot of ways to use JQuery, but it's not for me at the moment.
perhaps phrased differently - how in javascript would you loop through a table column, adding up all of the cell contents (numbers) in that column, please. I can't seem to figure out how to use Each as the variable names are different (numbered) per row.
Something like this:
var tr = document.createElement("<tr>");
var td = document.createElement("<td>");
tr.appendChild(td);
You have to create table row, fill it with cells, cells with buttons and so on. As result you will have table row variable which you can insert every time your button clicked.
I have a container in which there are five rows with multiple columns. When you click on a row the entire row should move downwards so the first row should become the second row. I searched for this but what I found didn't work for me, could you point me to some articles or give me an idea to help me solve this.
Yes, you can do that with jquery using click event and then get the previous or next row element and manipulating their indexes, using the index method present in jquery
use the index method to get their position and then apply +1/-1 logic for changing the index
I have a table that contains a list of cities. Every row has a checkbox with city class.
Although all cities are present in the source code of the page the table show only ten city at time (because I want it to do so). In the bottom of the table there is a button that shows the next cities.
I want to know how many checkboxes are checked.
So, I tried $('.city').length, but this function counts only the checkboxes present in the table at that moment, and not the checkboxes that are effectively present in the DOM. (For example: in the DOM there are 30 cities present, the table shows only 10 cities at time. The function above returns 10.)
How can I count all checkboxes that are checked?
UPDATE:
Using DataTable, I solved with:
var nodes = $('#table').DataTable().rows().nodes();
With it I get all rows of table.
Try this:
$('input:checkbox:checked').length
For your city you can do following
$('input:checkbox.city:checked')
Try:
$('input[type=checkbox].city:checked').length
Try this:
$("input[type=checkbox]:checked").length
$('input.cbx').on('change', function () {
alert($('input.cbx:checked').length);
});
DEMO
Get the class that is similar to check box and get length
I have a table with two columns. And i can't change it. In the left column there are checkboxes, their id's and names are made from this pattern - id="selected[0]" and so on.
In the right column there are only anchor tags with text inside.
I need to check if checkbox next to specific cell with specific text is checked or not.
You can use jquery to find a cell containing a specific text.
e.g. if text is 'hello world' than you can do a search for nodes and go to next element to it like this
var checkBox = $("td:contains('hello world')").next(); // to go to next, use prev() to go to previous element to the cell
var isChecked = checkBox.is(":checked"); // to check if checkbox is checked
I have here a website I work at, and I have tried something like:
$(".camera").parent().hide();
$(".treicamere").parent().hide();
To display only apartments with 2 rooms. I know its not the best way to do that, so I'm wondering if there's a better way to sort them. Website is made in Wordpress and heres a link. You can inspect element to check formatting:
http://www.sudpark.ro/apartamente/disponibilitate/
This is gonna be nasty. You ready ? :)
First, give each p -the ones you use as buttons- same class e.g. p_camera. Then add them a custom attr to get the index of them like : data-index="1". After that youre set. This is your click function for filtering.
$("p.p_camera").on("click", function(){
$("#my-table tr").not(".cf").not(":has(td[colspan=10])").hide()
.find("td:eq(1):contains('"+ $(this).attr("data-index") +"')").parent().show();
});
FIDDLE
I can explain anything if there's something you dont understand
Since this is a Wordpress site, you may consider using a table plugin that does exactly that, like Tabulizer for Wordpress that will allow you to filter your table rows based on column values. You can add search filter on specific columns, with different types of search filters (input box, select box) and search methods (contains, exact match, starts with, numeric range,etc) Here some ideas:
Create a column filter for the number of rooms. The visitor will
select from a drop-down list the desired number of rooms
(Nr.Camere). Same with number of balconies.
Create a column filter for the square meters. The visitor can find all apartments greater than 50 square meterr, less than 100 square meters or between 50 and 100 square meters.
You can also combine filtering with sorting controls.
Here is a demo http://www.tabulizer.com/index.php/support-menu/tabulizer-tips/63-sort-second-row