I have a table in a form. I would like it to add a row automatically if the above row is not blank.
Then, if possible, I would like to delete any empty rows when the next field that is not in the table is selected.
Can this be done?
I have a table in a form. I would like it to add a row automatically if the above row is not blank.
Then, if possible, I would like to delete any empty rows when the next field that is not in the table is selected.
Can this be done?
You can do anything with JS:
"use strict" window.F = {}; // function object/container F.isEmpty = function(elem) { if ( $( elem ).filter(":not(:checkbox,:radio)").val() || $( elem ).filter(":checked").val() ) { // has data return false; } else { return true; } }; F.addRowToTable = function() { $(".cf-table_parent").each( function() { // each table var isBlank = true; $( this ).find("tbody tr:last [vo]").each( function() { // each field in the table return ( isBlank = F.isEmpty( this ) ); // has data }); ( isBlank || $( this ).find(".cf-table-add-row").trigger("click") ); }); }; F.deleteEmptyRows = function() { $(".cf-table_parent tbody tr").each( function() { // each row, by the row var isBlank = true; $( this ).find("[vo]").each( function () { // each field return ( isBlank = F.isEmpty( this ) ); // has data }); ( isBlank && $( this ).closest("tr").find(".cf-table-delete").trigger("click") ); }); }; $(function() { //when ready: load. $( document ).ajaxStop(function() { // when lookups end. F.addRowToTable(); // add after your lookups end $(".cf-table_parent [vo]").focusout( F.addRowToTable ); // initial field event allocation }); $(".cf-table-add-row").click( function() { // add events to new row $( this ).closest("div").find("tr:last [vo]").focusout( F.addRowToTable ); }); $("li>.cf-field>[vo]").focusin( F.deleteEmptyRows ); // When non-table field is 'focused' });
PS: If you want to completely break things forever and ever, add default values to your fields.
PPS: Please do not add default values when using this script (lookup filling is perfectly fine).
This seems to be adding rows, but it adds another row each time I enter another column field in the row above. I have 5 columns in my table. It adds a row when I tab from the first column to the second column, from the second column to the third column, and so on. Can I just made it dependent on a particular field to avoid this? If so, how do I amend the code above?
You are going to have to give me a screenshot or attach your form.
Scrap that, I did not have checkboxes or radio buttons in my test table. Updated original code.
I copied and pasted the above code. I did not make any changes. I am still having the same result. Here is a preview of the chart (in preview mode).
When I clicked in the amount field, a row was added. Again, a row was added when I clicked in Project,...and so on. This means many empty rows which are not deleting, even when I navigate outside of the chart.
It this actually accomplishes what I need it to do, but it is creating too many empty rows.
For what I need the form to do, it would work if I could make an automatic "Add" feature if the Status (CSS Class codingStatus) was "Rejected". Is it possible to make the code specific to the input of a single field?
The problem whatever is in that approved column. That approval column is not empty, or, at the very least, shows something which means that that row is not empty, thus the rows keep getting added because it will only stop if the bottom row is empty, which it will never be.
As I said youa re going to need to give me more details about the table.
Do you have any more questions?
Sorry, I did not have the opportunity to work on my form until now. I will work on it. I have no more questions at this time.