I have a script that dynamically creates a table with a varying number of columns and rows based on a db query.
This is done twice, on two different db tables.
I have a row at the bottom of each table with an input whose value is the sum of the cells in the column above.
These inputs are named itotal$m (where $m is an incrementing number) for the first table and etotal$m for the second table. So what I end up with is a number of input fields with the names itotal1, itotal2 etc for the first row of totals and etotal1, etotal2 etc for the second row.
I want to perform some simple maths with these totals, subtracting etotal1 from itotal1, etotal2 from itotal2 and so on, then displaying the result in another input.
I would like to use javascript function attached to an onChange event so that the user can change the input box values and see the result.
Unfortunately, I have not managed to figure out how to do this. Any help would be appreciated!
Assuming :
the two tables to have id="iTable" and id="eTable",
all the column total fields to have class="colTotal",
the two tables to be congruous (ie. their columns are in the same order),
the target input elements to have class="diffValue", then :
jQuery:
$(function(){
var $iTableTotals = $("#iTable .colTotal");
var $eTableTotals = $("#eTable .colTotal");
var $diffValues = $(".diffValue");
$(".colTotal").on('change keyup', function() {
$iTableTotals.each(function(i){
var diff = Number($iTableTotals.eq(i).val()) - Number($eTableTotals.eq(i).val());
$diffValues.eq(i).val(diff);
});
});
$iTableTotals.eq(0).change();
});
See fiddle
Related
I'm attempting to create a form to update multiple rows of data from a table. The table has four columns ( cola, colb, colc, cold ). I am generating the form dynamically with a foreach loop in my view. At present I am using
text('cola[][cola]', $this->cola...
And on down to name and then populate the form fields. This works fine except that it returns an array of four arrays ( cola, colb, colc, cold ), so that I have all of my cola values in one array and all of my colb values in another etc.
What I would like is to return an array of each row that is submitted, so that my result would be something like
0(cola=3, colb=7, colc=2, cold=99)
So that I can access the values simply with a for each loop. I am, however, HTML remedial and cannot seem to get the name right on the form elements to accomplish this. I know that the answer is obvious, but I keep running into either the arrays I do not want or only submitting the data from the final row.
Edit for clarifications...
Use of
text('row[$this->key][cola]'
Or
text('row[$i][cola]'
with $i as an iterator results in one array with the name of $i or $this->key that only returns the last row submitted. Removing the quotes, as in
text(row[$i][cola]
Results in an undefined constant, because the string is expected.
The closest that I have come to success is
text('row['<php echo $i ?>'][cola]'
This actually names the form elements correctly, but breaks the elements themselves. They render as plain text and not as input boxes. I really am going a bit bonkers on this one.
'' is for string literals, you want interpolation, "".
$a = 'hi';
echo "$a there";
// hi there
I am needing a jquery function that checks the database for the max videos allowed for a specific match type of a specified matchID and also the current number of videos already assigned to that particular match.
With this information, I need to construct x amount of inputs (max number of videos for match type) and also populate the inputs where the videos already exist.
For example:
One match could be of type 3 games, which in that case I would need to populate 3 different inputs, also checking to see if the match has videos already existing and filling in those input values with the corresponding video information in order for it to be edited. I completed mostly everything on my own, I have the corresponding inputs displaying fine based on the max amount of videos allowed per that Match Type. The only issue I am having is after generating the inputs, what would be the best way of looping through them based on the videoEditVideoCount ( the total number of videos for the specified match )
To sum it all up:
I have a Edit Video Form
--Dropdown Menu to select which match you would like to edit the videos for
---ON change
---GET max video allowed per match type
---APPEND max video value of inputs to form
function populateEditVideo(matchid){
$.ajax({
url : '/index.php/ajax/populateEditVideo',
type : 'POST',
data : {'matchID' : matchid},
dataType : 'json',
success : function (result) {
$("div#videoEdit").empty();
for(var i = 1; i <= result['videoEditVideoMax']; i++){
$('<label for="videoEditYoutubeURL">Video ' + i + '</label><input name="videoEditYoutubeURL'+i+'" id="videoEditYoutubeURL" type="text" maxlength="16" />').appendTo("div#videoEdit");
}
for(var i = 1; i <= result['videoEditVideoCount']; i++){
$("input#videoEditYoutubeURL"+i).css("background-color", "red");
}
Let's say videoEditVideoCount = 2 and videoEditVideoMax = 3
What I would like to do is append 3 text inputs, and then modify the first 2 input values.
Any help would greatly be appreciated, thanks!
You've got the id of the <input> elements wrong. You forgot to append the number. This would mean the background colour would not change to red.
My aim is to create two columns that grows automatic. The problem is that I want to compare column 1 to column2.
(i.e) if col1 contents > col2 contents add a content to col2 else if col1==col2 add next content to col1 until all unknown contents amount are laid out.
How can I keep track of the contents in the columns so that to compare the two columns?
It would look something like this, instead of numbers the would be characters
if your content is plain text use jquery to do that with two class (col1 and col2):
var co1=$('.col1').val();
var co2=$('.col2').val();
if(co1.length > co2.length)
{
$('.col1').append('some html');
}else if(co1.length <= co2.length){
$('.col2').append('some html');
}
in other case you can do this method too.
I have a pretty basic page that shows every five minutes of the day (12:00, 12:05, 12:10, etc). Next to each time is a dropdown <select> with the numbers 1-9. The name of the <select> is the name of the time it corresponds to. The user selects one of the numbers, goes to the next, selects a number, etc. until they get to the bottom and hit submit.
In the database table, each time of the day has its own row, with another field for the number.
How can I submit this form and have it insert the number based on the time of day to the proper row? I can't wrap my head around this for some reason. I don't even need to do validation. This is not a live website.
I think the name of the select should be times[] and the value should be the time.
so in php you can loop through the times[] array and get the row that corresponds to its value. Then update the count accordingly.
<select name="times[]" multiple>
<option value="19:00">1</option>
<option value="19:05">2</option>
</select>
In php psuedo code
foreach ($_GET['times'] as time) {
*sanatize
select row where time = time
update count
}
Assuming you have a table like this:
MyValues
TimeOfDay varchar(50),
Value int
And your posted form data looks like this:
?19:00=1&19:05=2
You will loop through each posted form field and use the key and value of each field to generate an update statement like this:
foreach($_POST as $key => $value)
{
update MyValues set Value = $value where TimeOfDay = $fieldName
}
it seems #dm03514 is good options, but had rather use the $_POST than $_GET, and on the process you can do like this
for($=0;$i<count($_POST['times']);$i++){
#do some action with $_POST['times'][$i]
}
I have a table in database that has 2 columns Name | Age, I display it in a HTML page.
I want to sort the table in HTML page based on a field when the user clicks on it.
I have a PHP function to do the sorting based on a field.
But after obtaining the rows in sorted order in PHP, I'm looking for ways by which I can update the HTML table without navigating away from the page.
You do not need to communicate between the client and server to do this, just sort the table on the client directly.
There is a jQuery plug-in for this that works quite well:
http://tablesorter.com/docs/
You can do sorting in javascript, without having to communicate with the server. For example, this code will sort a table based on the content of the Nth column:
function sortTable(table, column, skipHeader) {
// Stick each row into an array.
var rows = [];
for (var i = skipHeader ? 1 : 0; i < table.rows.length; i++) {
rows.push(table.rows[i]);
}
// Sort the array based on the innerText of the column'th cell in each row
rows.sort(function(a, b){
a = a.cells[column].innerText;
b = b.cells[column].innerText;
return a < b ? -1 : (b < a ? 1 : 0);
});
// Re-order the rows by removing/appending in the sort order
for (var i = 0; i < rows.length; i++) {
var row = rows[i];
var container = row.parentElement;
container.removeChild(row);
container.appendChild(row);
}
}
For example, to sort the first table in the document, on the first column, and skip the header row:
sortTable(document.getElementsByTagName('table')[0], 0, true);
Obviously you'll want to modify this to suit your own tastes, especially the sorting, but it's a lot simpler than having to post the data back to the server, which I think is what you're proposing.
Since others have covered the fact that client-side sorting would work just fine here, I'll just point you to the resource with which I've had the most sucess doing this kind of thing: Google Data Tables, part of their Visualization Library. Here are the deets on what you can do (spoiler: everything you want and more).
Here is a link to a javascript library to make your tables sortable using javascript instead of php. I've used it many times, it works great.
Javascript Sortable Tables by: Stuart Langridge