Page 1 of 1

How: Change "border" of table depending on value?

Posted: 2019-08-21 12:45
by onoehring
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.
ec91a.png
ec91a.png (4.03 KiB) Viewed 5889 times
Olaf

Re: How: Change "border" of table depending on value?

Posted: 2019-08-21 14:00
by pbottcher
Hi,

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;
  })
})

Re: How: Change "border" of table depending on value?

Posted: 2019-08-21 14:17
by onoehring
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

Re: How: Change "border" of table depending on value?

Posted: 2019-08-21 14:37
by pbottcher
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.

Re: How: Change "border" of table depending on value?

Posted: 2019-08-21 14:47
by onoehring
Hi pbötcher,

thank you for your reply. I will need some time to test this. I will be reporting back.

Olaf

Re: How: Change "border" of table depending on value?

Posted: 2019-08-22 10:35
by onoehring
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.

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

Re: How: Change "border" of table depending on value?

Posted: 2019-08-22 11:02
by onoehring
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

Re: How: Change "border" of table depending on value?

Posted: 2019-08-22 11:14
by onoehring
Hi,

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);
	})
});
Thanks a lot for your help, it's greatly appreciated.
Olaf

Re: How: Change "border" of table depending on value?

Posted: 2019-09-06 10:34
by onoehring
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.
ec95demo.png
ec95demo.png (3.66 KiB) Viewed 5519 times
Olaf

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 00:09
by mysh_eireannach
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.

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>
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?

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 05:40
by onoehring
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

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>
Olaf

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 07:51
by mysh_eireannach
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?

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 09:41
by onoehring
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

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 10:35
by mysh_eireannach
Hi Olaf,

Thanks again!

I find that, If I add my script to file templates/children-tablename.php I got successful result.

Screenshot 2020-06-15 at 11.29.44.png
Screenshot 2020-06-15 at 11.29.44.png (203.26 KiB) Viewed 4713 times

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?

Posted: 2020-06-15 13:26
by onoehring
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

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>
but simply drop the <script> and </script> lines and use this:

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');
            }		
	    })
	 })	 	 
Olaf

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 17:51
by pbottcher
Hi,
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?
This happens because you code is executed too early. The child tables are not loaded yet and hence cannot be updated.
Check that the child tables are loaded and then execute the code.

Re: How: Change "border" of table depending on value?

Posted: 2020-06-15 22:17
by mysh_eireannach
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.

Re: How: Change "border" of table depending on value?

Posted: 2020-06-18 13:23
by onoehring
Hi,

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>
or longer

Code: Select all

<script>
	$(document).ready(function () {
		YOUR CODE HERE
	});
	</script>
Olaf