How: Change "border" of table depending on value?
How: Change "border" of table depending on value?
Hi,
does anyone have an idea how I can accomplish this: A visual help for the user. When there is a change in the numbering I want to have a thicker line (or something similar - CSS class for that row?).
Please see the example in the image: I marked the change in the field (extra field in table): As in the first occurence 7 changes to 6, the record with the 7/1 should be marked somehow special.
I think I would need to intercept rendering of the page, check for the value and attach some CSS to that table row (tr element) - but how do I do this?
Lets disregard, that changing the sorting will mess up the view.
Olaf
does anyone have an idea how I can accomplish this: A visual help for the user. When there is a change in the numbering I want to have a thicker line (or something similar - CSS class for that row?).
Please see the example in the image: I marked the change in the field (extra field in table): As in the first occurence 7 changes to 6, the record with the 7/1 should be marked somehow special.
I think I would need to intercept rendering of the page, check for the value and attach some CSS to that table row (tr element) - but how do I do this?
Lets disregard, that changing the sorting will mess up the view.
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
Hi,
you can use the
hooks/TABLENAME-tv.js file and add something like
you can use the
hooks/TABLENAME-tv.js file and add something like
Code: Select all
$j(function(){ var old_text="";
$j('td.TABLENAME-platz').each(function(){ // platz is the field you show in the screenshot, so I assume that is the one you look for.
var new_text = $j(this).text();
$compare="MAKE YOUR COMPARISON HERE";
if ($comare) {
$j(this).addClass('WHATEVER_CLASS_YOU_WANT_TO_ADD'); // this applies if you want to add it only the that cell
$j(this).parent().addClass('WHATEVER_CLASS_YOU_WANT_TO_ADD'); // this applies if you want to add it only the that the complete row
}
old_text=new_text;
})
})
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
Re: How: Change "border" of table depending on value?
Hi pbötcher,
that was quick. Thank you for that code and your time.
But I think I was unclear: The comparison needs to be with the previous shown record
So here, if something changes from 8*F7-7/1 to 8*F7-6/3
Getting worse: I do not hold 7 (6) directly in a field in the records but only their foreign key. ....
Olaf
that was quick. Thank you for that code and your time.
But I think I was unclear: The comparison needs to be with the previous shown record
So here, if something changes from 8*F7-7/1 to 8*F7-6/3
Getting worse: I do not hold 7 (6) directly in a field in the records but only their foreign key. ....
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
hmm, you have the value in your table, so you can just use the value, so some kind of substring extraction (like in your case, use the string between the "-" and the "/" and compare this value.
The each(function() will go through each row, so old_text will have the text of the previous row which you compare to the text of the current row.
If they do not match, you will do your action.
The each(function() will go through each row, so old_text will have the text of the previous row which you compare to the text of the current row.
If they do not match, you will do your action.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
Re: How: Change "border" of table depending on value?
Hi pbötcher,
thank you for your reply. I will need some time to test this. I will be reporting back.
Olaf
thank you for your reply. I will need some time to test this. I will be reporting back.
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
Hi pbötcher,
I was not able to get your code to work and would need your help again, please.
I noticed, that I can take a different approach. I do have a column ID_posZ which holds the height (Z coordinate). I now want to add a css class (tried this using your adjusted code below) to all TR-elements.
Example If ID_posZ holds a 1, it should add class="ebene_1" to the tr element showing the record.
How do I manage this?
I apologize already for messing up this code, but I am sure there are way simpler methods to add the css class than this (which fails).
So I ask for help again. Thank you already.
I was not able to get your code to work and would need your help again, please.
I noticed, that I can take a different approach. I do have a column ID_posZ which holds the height (Z coordinate). I now want to add a css class (tried this using your adjusted code below) to all TR-elements.
Example If ID_posZ holds a 1, it should add class="ebene_1" to the tr element showing the record.
How do I manage this?
I apologize already for messing up this code, but I am sure there are way simpler methods to add the css class than this (which fails).
So I ask for help again. Thank you already.
Code: Select all
$j(function(){ var old_text="";
$j('td.TABLENAME-ID_posZ').each(function(){ // I did change TABLENAME to the tablename.
var new_text = $j(this).text();
var new_compare=0;
//$compare="MAKE YOUR COMPARISON HERE";
switch(new_text) {
case 1:
new_compare = 1;
break;
case 2:
new_compare = 2;
break;
case 3:
new_compare = 3;
break;
case 4:
new_compare = 4;
break;
case 5:
new_compare = 5;
break;
default:
new_compare = FALSE;
}
var new_CSS_basename = "ebene_";
var new_CSS_class = new_CSS_basename.concat(new_compare);
if ($new_compare) {
// $j(this).addClass('WHATEVER_CLASS_YOU_WANT_TO_ADD'); // this applies if you want to add it only the that cell
$j(this).parent().addClass('ebene_'); // this applies if you want to add it only the that the complete row
}
old_text=new_text;
})
})[code]
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
Hi,
maybe I found the solution in the Udemy course ( Section 12 - Lesson 1232 - How to highlight rows in the table base on value of some field ) I will check that and report back.
Olaf
maybe I found the solution in the Udemy course ( Section 12 - Lesson 1232 - How to highlight rows in the table base on value of some field ) I will check that and report back.
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
Hi,
yes, the explanation from the video helped. It works when I am using this code
Thanks a lot for your help, it's greatly appreciated.
Olaf
yes, the explanation from the video helped. It works when I am using this code
Code: Select all
$j(function () {
$j('.ecomo_Container-ID_posZ').each(function(){
var ebene = $j(this).text();
var new_CSS_basename = "ebene_";
var new_CSS_class = new_CSS_basename.concat(ebene);
$j(this).parents('tr').addClass(new_CSS_class);
})
});
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
Hi
just remembered, that I wanted to post a screenshot of the result. Below you can see the result. I am using css classes ebene_1, ebene_2, ebene_3 and ebene_4 and ebene_5 (one could continue endlessly).
The javascript above reads the value from the column Ebene (let's translate is as height) and attaches the specific CSS class to the complete row.
As you can see this results in some stop-light effect (if like here, the list is sorted by Ebene DESC), where the lowest (1) is green and has a this border-bottom, second is yellow and the highest (here 3) is red. 4 would be white and 5 I defined a light blue.
Olaf
just remembered, that I wanted to post a screenshot of the result. Below you can see the result. I am using css classes ebene_1, ebene_2, ebene_3 and ebene_4 and ebene_5 (one could continue endlessly).
The javascript above reads the value from the column Ebene (let's translate is as height) and attaches the specific CSS class to the complete row.
As you can see this results in some stop-light effect (if like here, the list is sorted by Ebene DESC), where the lowest (1) is green and has a this border-bottom, second is yellow and the highest (here 3) is red. 4 would be white and 5 I defined a light blue.
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
-
- Veteran Member
- Posts: 35
- Joined: 2016-02-16 22:31
Re: How: Change "border" of table depending on value?
Hi,
I watched the Udemy course ( Section 12 - Lesson 1232 - How to highlight rows in the table base on value of some field )
And created Script, tested, all work well! Thanks for hint.
But, if I don't want highlight full row, could I highlight only one Cell?
Or could I color text in Row, or even in the cell?
I watched the Udemy course ( Section 12 - Lesson 1232 - How to highlight rows in the table base on value of some field )
And created Script, tested, all work well! Thanks for hint.
Code: Select all
<script>
$j(function(){
$j('.projects-project_status').each(function(){
var project_status = $j(this).text();
if (project_status == 'Text 1'){
$j(this).parents('tr').addClass('success');
}
if (project_status == 'Text 2'){
$j(this).parents('tr').addClass('warning');
}
if (project_status == 'Text 3'){
$j(this).parents('tr').addClass('danger');
}
})
})
</script>
Or could I color text in Row, or even in the cell?
Re: How: Change "border" of table depending on value?
Hi,
just copy and pasted your code (with adjustments) but I did not test anything.
Try something like the code below, where I removed .parents('tr'), as we do not want to add to parents, but to self
Olaf
just copy and pasted your code (with adjustments) but I did not test anything.
Try something like the code below, where I removed .parents('tr'), as we do not want to add to parents, but to self
Code: Select all
<script>
$j(function(){
$j('.projects-project_status').each(function(){
var project_status = $j(this).text();
if (project_status == 'Text 1'){
$j(this).addClass('success');
}
if (project_status == 'Text 2'){
$j(this).addClass('warning');
}
if (project_status == 'Text 3'){
$j(this).addClass('danger');
}
})
})
</script>
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
-
- Veteran Member
- Posts: 35
- Joined: 2016-02-16 22:31
Re: How: Change "border" of table depending on value?
Hi Olaf,
Your code adjustment work perfect!
Thanks.
I tried applied same rules for child-table, but for some reason didn't work.
Should I do further code adjustments for child-table code, or just wrong hook/footer-extras.php file for my code?
Your code adjustment work perfect!
Thanks.
I tried applied same rules for child-table, but for some reason didn't work.
Should I do further code adjustments for child-table code, or just wrong hook/footer-extras.php file for my code?
Re: How: Change "border" of table depending on value?
Hi,
what do you mean by child table? Do you mean the details view?
I am not sure where you placed your code but in hook/footer-extras.php it would create such a behavior for _all_ tables. If you want specific tables only, you might want to place the code in hooks/tablename-tv.js or hooks/tablename-dv.js
Olaf
what do you mean by child table? Do you mean the details view?
I am not sure where you placed your code but in hook/footer-extras.php it would create such a behavior for _all_ tables. If you want specific tables only, you might want to place the code in hooks/tablename-tv.js or hooks/tablename-dv.js
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
-
- Veteran Member
- Posts: 35
- Joined: 2016-02-16 22:31
Re: How: Change "border" of table depending on value?
Hi Olaf,
Thanks again!
I find that, If I add my script to file templates/children-tablename.php I got successful result.
But if I add my script to hooks/tablename-tv.js or children-tablename-tv.js no result at all.
Because templates/children-table name.php rewritable file, I need hint, where I should save my script in hooks?
Thanks again!
I find that, If I add my script to file templates/children-tablename.php I got successful result.
But if I add my script to hooks/tablename-tv.js or children-tablename-tv.js no result at all.
Because templates/children-table name.php rewritable file, I need hint, where I should save my script in hooks?
Re: How: Change "border" of table depending on value?
Hi,
please check out my post here viewtopic.php?f=4&t=3114&p=10463&hilit=root+copy#p10463
But: You might want to read a little more in the forum. I suggest finding the spot where to place your code (maybe I was wrong when I suggested the -tv.js / -dv.js files in the hooks folder - but I believe that this is the right spot).
When you place code in these files, remember, that you must not use
but simply drop the <script> and </script> lines and use this:
Olaf
please check out my post here viewtopic.php?f=4&t=3114&p=10463&hilit=root+copy#p10463
But: You might want to read a little more in the forum. I suggest finding the spot where to place your code (maybe I was wrong when I suggested the -tv.js / -dv.js files in the hooks folder - but I believe that this is the right spot).
When you place code in these files, remember, that you must not use
Code: Select all
<script>
$j(function(){
$j('.projects-project_status').each(function(){
var project_status = $j(this).text();
if (project_status == 'Text 1'){
$j(this).addClass('success');
}
if (project_status == 'Text 2'){
$j(this).addClass('warning');
}
if (project_status == 'Text 3'){
$j(this).addClass('danger');
}
})
})
</script>
Code: Select all
$j(function(){
$j('.projects-project_status').each(function(){
var project_status = $j(this).text();
if (project_status == 'Text 1'){
$j(this).addClass('success');
}
if (project_status == 'Text 2'){
$j(this).addClass('warning');
}
if (project_status == 'Text 3'){
$j(this).addClass('danger');
}
})
})
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: How: Change "border" of table depending on value?
Hi,
Check that the child tables are loaded and then execute the code.
This happens because you code is executed too early. The child tables are not loaded yet and hence cannot be updated.But if I add my script to hooks/tablename-tv.js or children-tablename-tv.js no result at all.
Because templates/children-table name.php rewritable file, I need hint, where I should save my script in hooks?
Check that the child tables are loaded and then execute the code.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
-
- Veteran Member
- Posts: 35
- Joined: 2016-02-16 22:31
Re: How: Change "border" of table depending on value?
Hi Olaf,
Thanks for help, but as mention Pböttcher below, if I place code into hooks/tablename-dv.js code is executed too early, before children-tablename.php loaded.
As you recommend, if place code into hooks/tablename-tv.js all work well as normal table view, but not as children-table in some othe detail view tables.
I played around, and temporary plese code into templates/children-tablename.php but need find long term solution using hooks option.
Thanks for help, but as mention Pböttcher below, if I place code into hooks/tablename-dv.js code is executed too early, before children-tablename.php loaded.
As you recommend, if place code into hooks/tablename-tv.js all work well as normal table view, but not as children-table in some othe detail view tables.
I played around, and temporary plese code into templates/children-tablename.php but need find long term solution using hooks option.
Re: How: Change "border" of table depending on value?
Hi,
you can also use some code to wait. Something like this maybe
or longer
Olaf
you can also use some code to wait. Something like this maybe
Code: Select all
<script>
//set image again once document is ready
$(function() {
YOUR CODE HERE
});
</script>
Code: Select all
<script>
$(document).ready(function () {
YOUR CODE HERE
});
</script>
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view