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
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 would like to handle the dirty state for every single row I have in my table. Unfortunately, adding a form around a would break the table, and I can't create it inside since I have a field for every different column. My last column for each row contains buttons: Delete and Update. Update appears only if one of the field of this row has been made dirty.
Somehow, it works already but I am checking each .pristine for every field on that row (#name="ngModel"). My rows are created through something like *ngFor="let row of rows". I believe it would be better to check the .dirty or .pristine on a form rather than on every single element.
Also, if I actually to the update, there is no way I can remove that .dirty status (I tried replacing the data for that row by removing from the array and re-adding it but it is still dirty).
Is there a technique to go around that?
You could use ngModelGroup around each of your rows. Then you can check the dirty flag for the group.
Current scenario:
I have a page that is divided into columns.
There are different blocks on my page that have the ".equalHeight" class assigned to them: 2 of them in first column, 1 in the middle and 2 in the third column.
When I select all blocks using the $(".equalHeight") selector, I get an array of elements.
How can I find the mutual parent for the ones in the first column, the second and the last column?
I need the height from the first column, the second column and the third column, to assign the the children.
Is there an efficient way to do this using jquery?
Also keep in mind that once the first and second element of the array are found, you won't need to do the check for the second one in the array, because it's already updated by the first one, thus making the loop faster...
Any ideas?
Thanks
M.
Basically you're going to iterate over the row checking .outerHeight and determine the biggest one. Link to jquery documentation
jquery-match-height does a great job of this with jquery (github page). It does a lot more than it sounds you need (both features-wise and in terms of browser compatability), but check out jquery.matchHeight.js's lines 221-284
In JQuery, we can cache almost any objects returned by a selector, and in my case, I cache the children (<tr>s) of a selected element (<tbody> in a table) in a variable called rows.
I then call JQuery methods on this rows, which manipulate individual rows. For example, if there are 5 rows in total and I want to swap the first and the last row:
rows.eq(4).after(row1);
rows.eq(0).before(row5);
However, this does not work. The first row gets to the bottom but the bottom row does not get to the top.
What does it work is to get a fresh copy of the children on each manipulation. For comparision, please see: http://jsfiddle.net/QNS5G/
What is causing problems for the cached approach here?
After you change the row order in the DOM, the order in the jQuery object does not change.
So t1_rows.eq(4).after(t1_row1); moves the first row to the bottom (row 1 goes after the fifth row in the jQuery object). Then t1_rows.eq(0).before(t1_row5); tries to place the last row before row 1. Since it's already there, you don't see any changes.
Perhaps you are thinking el.after(something) places el after something, but it's the other way around, it actually places something after el.
Let me translate your code into english.
First, take row 1 and insert it after row 5
Then, take row 5 and insert it before row 1
The second operation does nothing because row1 has moved to the bottom of the list. It's already right before row5.
var tbody = $(document.getElementById('t1_parent')),
first_row = tbody.find('tr:eq(0)'),
last_row = tbody.find('tr:eq(4)');
last_row.prependTo(tbody);
first_row.appendTo(tbody);
EDIT:
Never mind. Another solution was found.
I'm trying to hack the tablesorter jQuery plugin with no success. What I'm wanting is this...
I have a table (list of sports teams) and a row is set to a specific class. This basically is to show qualificatoin for finals series, so it must always STAY in that place. eg. if someone sorts the table by wins, I still want the 8th row to have the class I gave it at the start with this:
$("table.ladder tr:nth-child(8)").addClass("finals");
As tablesorter is at the moment, when the table is sorted, this TR obviously moves around. What's the best way to make tablesorter KEEP the nth row like this?
Hope this makes sense!!
tableSorter has a under-documented internal function called 'sortEnd' that you can bind to...
$("table.ladder")
.tablesorter()
.bind("sortEnd", function(){
$("table.ladder tr").removeClass("finals");
$("table.ladder tr:nth-child(8)").addClass("finals");
})
I'm assuming you only want to move the class, and not the data. if you have a data row that is always supposed to be at the bottom, you can use the <thead/><tbody/><tfoot/> structure and place that row in <tfoot/>