EasyUI Forum
June 14, 2024, 12:34:42 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > How do I change format in a cell if it contains the value of another cell in row
Pages: [1]
« previous next »
  Print  
Author Topic: How do I change format in a cell if it contains the value of another cell in row  (Read 23626 times)
pulsoft
Newbie
*
Posts: 9


View Profile
« on: June 16, 2016, 12:10:24 AM »
I have a basic table and need to change the background colour and font colour of a cell if it contains the same value in another cell in the same row.

Code:
<table>
    <tr class="veh-row">
        <td class="vehicle_colour">RED</td>
        <td>4000 miles</td>
        <td class="veh-manual">GREEN Manual</td>
        <td>Petrol</td>
    </tr>
    <tr class="veh-row">
        <td class="vehicle_colour">BLUE</td>
        <td>4000 miles</td>
        <td class="veh-manual">BLUE Manual</td>
        <td>Petrol</td>
    </tr>
    <tr class="veh-row">
        <td class="vehicle_colour">RED</td>
        <td>4000 miles</td>
        <td class="veh-manual">GREEN Manual</td>
        <td>Petrol</td>
    </tr>
</table>

So I need
 
if td.veh_manual contains the contents of the cell td.vehicle_colour, in the example above td.vehicle_colour BLUE would qualify - then I want to change to cell colour for both cells to blue (example colour only) and font colour of both cells to yellow (example colour only).

Here is the actual EasyUI datagrid page
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html
The cell fields that are relevant are 'Winner' and any of the three 'Cherry Pick Rated' columns

How can I do this and only affect that type of row and not all other rows?

Thanks,

Paul
« Last Edit: June 17, 2016, 09:37:37 AM by pulsoft » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: June 16, 2016, 08:52:14 AM »
Please try this code.
Code:
$('#dg').datagrid({
    columns:[[
        {field:'f1',title:'column1',width:100,
            styler:function(value,row){
                if (row.f3.indexOf(value) >= 0){
                    return 'background:blue;color:yellow';
                }
            }
        },
        {field:'f2',title:'column2',width:100},
        {field:'f3',title:'column3',width:100,
            styler:function(value,row){
                if (value.indexOf(row.f1) >= 0){
                    return 'background:blue;color:yellow';
                }
            }
        },
        {field:'f4',title:'column4',width:100}
    ]]
})
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #2 on: June 16, 2016, 09:01:25 AM »
Thank you for your prompt reply - Will look at your code and see how I can use it to solve my need Smiley
 
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #3 on: June 16, 2016, 10:43:25 AM »
Quote from: stworthy on June 16, 2016, 08:52:14 AM
Please try this code.
Code:
$('#dg').datagrid({
    columns:[[
        {field:'f1',title:'column1',width:100,
            styler:function(value,row){
                if (row.f3.indexOf(value) >= 0){
                    return 'background:blue;color:yellow';
                }
            }
        },
        {field:'f2',title:'column2',width:100},
        {field:'f3',title:'column3',width:100,
            styler:function(value,row){
                if (value.indexOf(row.f1) >= 0){
                    return 'background:blue;color:yellow';
                }
            }
        },
        {field:'f4',title:'column4',width:100}
    ]]
})

Sorry, new to this - could you show me how your solution works with this please?

Code:
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/material/ui-pepper-grinder/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
    <h2>Basic DataGrid</h2>
    <p>The DataGrid is created from markup, no JavaScript code needed.</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Basic DataGrid" style="width:1560px;height:1175px"
            data-options="singleSelect:true,collapsible:true,url:'YestCps.JSON',method:'get', remoteSort:false, multiSort:true">
        <thead>
            <tr>
                <th data-options="field:'TIME',width:60,sortable:true">Time</th>
                <th data-options="field:'MEETING',width:80,sortable:true">Meeting</th>
                <th data-options="field:'GOING',width:110,sortable:true">Going</th>
                <th data-options="field:'CATEGORY',width:80,sortable:true">Category</th>
                <th data-options="field:'CLASS',width:80,sortable:true">Class</th>
                <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
				<th data-options="field:'PURSE',width:80,align:'right',sortable:true">Purse</th>
                <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
				<th data-options="field:'ACTUAL',width:80,align:'center',sortable:true">Actual</th>
                <th data-options="field:'WINNER',width:150,sortable:true">Winner</th>
                <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
                <th data-options="field:'CP1A',width:200,sortable:true,styler:cellStyler">Cherry Pick Rated 1</th>
				<th data-options="field:'CP2A',width:200,sortable:true,styler:cellStyler">Cherry Pick Rated 2</th>
                <th data-options="field:'CP3A',width:200,sortable:true,styler:cellStyler">Cherry Pick Rated 3</th>
            </tr>
        </thead>
    </table>
     <script type="text/javascript">
        function cellStyler(value,row,index){
            if (value == "notrated"){
                return 'background-color:#ffee22;color:#ffee22;';
            }
        }
    </script>
</body>
</html>

As before, here is the actual EasyUI datagrid page that is rendered with above HTML and JS code
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html
The cell fields that are relevant are 'Winner' and any of the three 'Cherry Pick Rated' columns
The first row affected is the 1505 line and the next row affected is the 1550 row, ETC.

Thanks,

Paul
« Last Edit: June 17, 2016, 09:38:08 AM by pulsoft » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #4 on: June 16, 2016, 06:18:08 PM »
Please look at the definition of the 'styler' functions.
Code:
<table class="easyui-datagrid" title="Basic DataGrid" style="width:1560px;height:1175px"
        data-options="singleSelect:true,collapsible:true,url:'YestCps.JSON',method:'get', remoteSort:false, multiSort:true">
    <thead>
        <tr>
            <th data-options="field:'TIME',width:60,sortable:true">Time</th>
            <th data-options="field:'MEETING',width:80,sortable:true">Meeting</th>
            <th data-options="field:'GOING',width:110,sortable:true">Going</th>
            <th data-options="field:'CATEGORY',width:80,sortable:true">Category</th>
            <th data-options="field:'CLASS',width:80,sortable:true">Class</th>
            <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
            <th data-options="field:'PURSE',width:80,align:'right',sortable:true">Purse</th>
            <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
            <th data-options="field:'ACTUAL',width:80,align:'center',sortable:true">Actual</th>
            <th data-options="field:'WINNER',width:150,sortable:true,styler:cellStyler1">Winner</th>
            <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
            <th data-options="field:'CP1A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 1</th>
            <th data-options="field:'CP2A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 2</th>
            <th data-options="field:'CP3A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 3</th>
        </tr>
    </thead>
</table>
<script type="text/javascript">
    function cellStyler1(value,row){
        if (row.CP1A.indexOf(value)>=0 || row.CP2A.indexOf(value)>=0 || row.CP3A.indexOf(value)>=0){
            return 'background:blue;color:yellow';
        }
    }
    function cellStyler2(value,row){
        if (value.indexOf(row.WINNER) >= 0){
            return 'background:blue;color:yellow';
        }
    }

</script>
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #5 on: June 17, 2016, 12:10:59 AM »
Thank you Stworthy

http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html

But I do not have "notrated" style now - I tried using original (below) as well as your solution but it was just ignored

 
Code:
<script type="text/javascript">
        function cellStyler(value,row,index){
            if (value == "notrated"){
                return 'background-color:#ffee22;color:#ffee22;';
            }
        }
    </script>

Can you help me understand how to have multiple style outcomes.

Many thanks,

Paul
« Last Edit: June 17, 2016, 09:38:52 AM by pulsoft » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #6 on: June 17, 2016, 01:26:51 AM »
The 'styler' function may look like this:
Code:
function cellStyler2(value,row){
	if (value == 'notrated'){
		return 'background-color:#ffee22;color:#ffee22;';
	} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:blue;color:yellow';
    }
}
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #7 on: June 17, 2016, 03:15:13 AM »
Thank You stworthy

Works perfectly.

Two final things, if I have additional JSON fields that I want to reference for conditional formatting but do not wish to display them in the grid how would I do this?
and
If I want to conditionally exclude rows from being displayed, e.g. all cherry pick rated cells are notrated, how would I do this?

Paul
« Last Edit: June 17, 2016, 03:18:48 AM by pulsoft » Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #8 on: June 17, 2016, 06:02:16 AM »
Cannot find a way to show a hint or tooltip when hovering over a column title - Can this be done?

Found a way to hide a cell - really easy Smiley


OK  -  To try and get around row filtering requirement I tried the below:
Also, want to exclude rows with selected filter value not include them, only example is for numeric field entry...


Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cherry Picks Ratings Performance</title>
    <link rel="stylesheet" type="text/css" href="../../themes/material/ui-pepper-grinder/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<table style="text-align: left; width: 1412px;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 267px;"><a
		href="http://www.cherrypickssoftware.com/cps" target="_blank"><img
		title="Cherry Picks Software Horse Racing UK and IRE"
		style="border: 0px solid ; width: 573px; height: 81px;"
		alt="Cherry Picks Software Horse Racing UK and IRE"
		src="cropped-cpsjshlogo-1.png"></a></td>
    </tr>
  </tbody>
</table>

    <h2>  Cherry Picks Ratings Performance</h2>
    <p>  You can sort and filter the day's results analysis as you wish</p>
    <div style="margin:20px 0;"></div>
    
    <table class="easyui-datagrid" title="Cherry Picks Ratings Performance" style="width:1700px;height:1175px"
            data-options="singleSelect:true,collapsible:true,url:'YestCpsPL.JSON',method:'get', remoteSort:false, multiSort:true
			">
        <thead>
            <tr>
                <th data-options="field:'TIME',width:60,sortable:true">Time</th>
                <th data-options="field:'MEETING',width:80,sortable:true">Meeting</th>
                <th data-options="field:'GOING',width:110,sortable:true">Going</th>
                <th data-options="field:'CATEGORY',width:80,sortable:true">Category</th>
                <th data-options="field:'CLASS',width:80,sortable:true">Class</th>
                <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
				<th data-options="field:'PURSE',width:80,align:'right',sortable:true">Purse</th>
                <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
				<th data-options="field:'ACTUAL',width:80,align:'center',sortable:true">Actual</th>
                <th data-options="field:'WINNER',width:150,sortable:true,styler:cellStyler1">Winner</th>
                <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
                <th data-options="field:'CP1A',width:200,sortable:true,styler:cellStyler3">Cherry Pick Rated 1</th>
				<th data-options="field:'CP2A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 2</th>
                <th data-options="field:'CP3A',width:200,sortable:true,styler:cellStyler2">Cherry Pick Rated 3</th>
				<th data-options="field:'PL1',width:45,align:'center',hidden:true,styler:cellStyler3">CP1PL</th>
				<th data-options="field:'PL2',width:45,align:'center',hidden:true,styler:cellStyler2">CP2PL</th>
                <th data-options="field:'PL3',width:45,align:'center',hidden:true,styler:cellStyler2">CP3PL</th>
            </tr>
        </thead>
    </table>
	<script type="text/javascript" src="datagrid-filter.js"></script>
	<script type="text/javascript">
    function cellStyler1(value,row){
    if (row.CP1A.indexOf(value)>=0 || row.CP2A.indexOf(value)>=0 || row.CP3A.indexOf(value)>=0){
            return 'background:green;color:white';
        }
    }
	function cellStyler2(value,row){
	if (value == 'notrated'){
		return 'background-color:#eceadf;color:#eceadf;';
		} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:limegreen;color:white';
		}
	}
	function cellStyler3(value,row){
    if (value == 'notrated'){
		return 'background-color:#eceadf;color:#eceadf;';
		} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:limegreen;color:white';
        }
	}
	$(function(){
            var dg = $('#dg').datagrid();
            dg.datagrid('enableFilter', [{
				field:'CP1A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All'},{value:'notrated',text:'notrated'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'status');
                        }
                        dg.datagrid('doFilter');
                    }
                }
            }]);
        });
	</script>
</body>
</html>


Result is same as usual, no filtering offered...

http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsindexed.html

Can you explain why please?

Thanks,

Paul
« Last Edit: June 17, 2016, 09:36:55 AM by pulsoft » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #9 on: June 18, 2016, 05:00:04 AM »
Some errors occur in your code.

1. The 'id' attribute is missing in your <table> element.
Code:
<table class="easyui-datagrid" title="Cherry Picks Ratings Performance"...>
...
</table>

2. Your filtering logic is wrong. It should be:
Code:
var dg = $('#dg').datagrid();
dg.datagrid('enableFilter', [{
    field:'CP1A',
    type:'combobox',
    options:{
        panelHeight:'auto',
        data:[{value:'',text:'All'},{value:'notrated',text:'notrated'}],
        onChange:function(value){
            if (value == ''){
                dg.datagrid('removeFilterRule', 'CP1A');
            } else {
                dg.datagrid('addFilterRule',{
                    field:'CP1A',
                    op:'equal',
                    value:value
                });
            }
            dg.datagrid('doFilter');
        }
    }
}]);
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #10 on: June 18, 2016, 11:54:45 PM »
Thank you stworthy, with your help I am now getting close to what I am trying to achieve. Is there a column hint (tooltip) option?

Paul
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #11 on: June 23, 2016, 02:18:50 AM »
Can someone please tell me how I can achieve the cell styling I tried to achieve in line 97 of the attached code

      } else if (row.CP1A.indexOf(value)contains"(P)" || row.CP2A.indexOf(value)contains"(P)" || row.CP3A.indexOf(value)contains"(P)") {

I simply want to change background colour to yellow if the cell contains the three characters "(P)"

Here is link to a working web page before my attempt
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcpsworks.php
and here is non-working version:
http://www.cherrypickssoftware.com/JQueryEasyUI/demo/datagrid/yestcps.php

Thanks,

Paul

Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cherry Picks Ratings Performance</title>
    <link rel="stylesheet" type="text/css" href="../../themes/material/ui-pepper-grinder/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>

</head>

<body>

<table style="text-align: left; width: 1412px;" border="0"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="width: 267px;"><a
		href="http://www.cherrypickssoftware.com/cps" target="_blank"><img
		title="Cherry Picks Software UK and IRE Horse Racing Analysis - At Its Best..."
		style="border: 0px solid ; width: 573px; height: 81px;"
		alt="Cherry Picks Software Horse Racing UK and IRE"
		src="cropped-cpsjshlogo-1.png"></a></td>
    </tr>
  </tbody>
</table>
	<h2>&nbsp&nbspCherry Picks Ratings Historical Performance Analysis</h2>
&nbsp;
&nbspAnalysis Archive Date: 
&nbsp;
  <?php
  $dirname = '.';
  $files = array();  
  $dir = opendir($dirname);
  
  while(($file = readdir($dir)) !== false) {
	  $extension = pathinfo($file, PATHINFO_EXTENSION);
      if($extension == 'cpra' && $file !== '.' && $file !== '..' && !is_dir($file)) {  
          $files[] = $file;  
      }  
  }  
  closedir($dir);  
  sort($files); 
  
  echo '<select>';
  for($i=0; $i<count($files); $i++) {  
      echo '<option>' . $files[$i] . '</option>';  
  }
  echo '</select>';  
  ?>


<p>&nbsp&nbsp In and below the column titles you can sort and filter the day's results analysis as you wish</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Cherry Picks Ratings Performance" style="width:1755px;height:1175px"
            data-options="singleSelect:true,collapsible:true,url:'fred.json',method:'get', remoteSort:false, multiSort:true
			">
			
        <thead>
            <tr>
                <th data-options="field:'TIME',width:46,sortable:true">Time</th>
                <th data-options="field:'MEETING',width:65,sortable:true">Meeting</th>
                <th data-options="field:'WINNER',width:150,sortable:true,styler:cellStyler1">Winner</th>
                <th data-options="field:'FAVPOS',width:60,align:'center',sortable:true">FavPos</th>
                <th data-options="field:'CP1A',width:190,sortable:true,styler:cellStyler2">Cherry Pick Rated 1</th>
				<th data-options="field:'CP2A',width:190,sortable:true,styler:cellStyler2">Cherry Pick Rated 2</th>
                <th data-options="field:'CP3A',width:190,sortable:true,styler:cellStyler2">Cherry Pick Rated 3</th>
				<th data-options="field:'PL1',width:55,align:'center',sortable:true,hidden:false">CP1PL</th>
				<th data-options="field:'PL2',width:55,align:'center',sortable:true,hidden:false">CP2PL</th>
                <th data-options="field:'PL3',width:55,align:'center',sortable:true,hidden:false">CP3PL</th>
                <th data-options="field:'GOING',width:110,sortable:true">Going</th>
                <th data-options="field:'CATEGORY',width:100,sortable:true">Category</th>
                <th data-options="field:'CLASS',width:60,sortable:true">Class</th>
                <th data-options="field:'DISTANCE',width:77,align:'right',sortable:true">Distance</th>
				<th data-options="field:'PURSE',width:65,align:'right',sortable:true">Purse</th>
                <th data-options="field:'SCHEDULED',width:80,align:'center',sortable:true">Scheduled</th>
				<th data-options="field:'ACTUAL',width:60,align:'center',sortable:true">Actual</th>

            </tr>
        </thead>
    </table>
	<script type="text/javascript" src="datagrid-filter.js"></script>
	<script type="text/javascript">
    function cellStyler1(value,row){
    if (row.CP1A.indexOf(value)>=0 || row.CP2A.indexOf(value)>=0 || row.CP3A.indexOf(value)>=0){
            return 'background:green;color:white';
        }
    }
	function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
		} else if (value.indexOf(row.WINNER) >= 0){
        return 'background:limegreen;color:white';
		} else if (row.CP1A.indexOf(value)contains"(P)" || row.CP2A.indexOf(value)contains"(P)" || row.CP3A.indexOf(value)contains"(P)") {
        return 'background:yellow;color:white';
		}
	}
	
	$(function(){
            var dg = $('#dg').datagrid();
            dg.datagrid('enableFilter', [{
                field:'PURSE',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
                field:'SCHEDULED',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
                field:'ACTUAL',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
                field:'FAVPOS',
                type:'numberbox',
                options:{precision:0},
                op:['equal','notequal','less','greater']
            },{
				field:'CP1A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All Horses'},{value:'not-rated',text:'Rated Horses Only'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'CP1A');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'CP1A',
                                op: 'notequal',
                                value: 'not-rated'
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },
			{
				field:'CP2A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All Horses'},{value:'not-rated',text:'Rated Horses Only'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'CP2A');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'CP2A',
                                op: 'notequal',
                                value: 'not-rated'
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            },{
				field:'CP3A',
                type:'combobox',
                options:{
                    panelHeight:'auto',
                    data:[{value:'',text:'All Horses'},{value:'not-rated',text:'Rated Horses Only'}],
                    onChange:function(value){
                        if (value == ''){
                            dg.datagrid('removeFilterRule', 'CP3A');
                        } else {
                            dg.datagrid('addFilterRule', {
                                field: 'CP3A',
                                op: 'notequal',
                                value: 'not-rated'
                            });
                        }
                        dg.datagrid('doFilter');
                    }
                }
            }]);
        });
	</script>
</body>
</html>
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #12 on: June 23, 2016, 07:37:08 AM »
Please try this code.
Code:
function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
	} else if (value.indexOf('P') >= 0){
		return 'background-color:yellow;color:#fff';
	} else if (value.indexOf(row.WINNER) >= 0){
    	return 'background:limegreen;color:white';
	}
}
Logged
pulsoft
Newbie
*
Posts: 9


View Profile
« Reply #13 on: June 23, 2016, 07:55:31 AM »
Thanks Smiley

Had to change it to:
Code:
	function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
	} else if (value.indexOf("(P)") >= 0){
		return 'background-color:orange;color:#fff';
	} else if (value.indexOf(row.WINNER) >= 0){
    	return 'background:limegreen;color:white';
	}
}

Then it worked...

You are the best Smiley

Quote from: stworthy on June 23, 2016, 07:37:08 AM
Please try this code.
Code:
function cellStyler2(value,row){
	if (value == 'not-rated'){
		return 'background-color:#eceadf;color:grey;';
	} else if (value.indexOf('P') >= 0){
		return 'background-color:yellow;color:#fff';
	} else if (value.indexOf(row.WINNER) >= 0){
    	return 'background:limegreen;color:white';
	}
}
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!