Jump to content
UBot Underground

[solved]Change Background Color if an Element Meets Certain Parameters


Recommended Posts

I have an HTML table that is generated using ubot.

Now I want the bot to go through a specific column in the table and, if a cell contains only the word "yes", change the background color of that cell to green.  Conversely, if the cell contains only the word "no", I want the cell background to change to red.

 

Any ideas regarding how how to go about this would be greatly appreciated!  I have some coding experience (JavaScript, jQuery, jQuery mobile, PHP, etc.) but I'm very new to ubot.

 

For reference, here is my current ubot code:

clear table(&my table)
clear list(%rows)
clear list(%complete)
create table from file("C:\\Users\\Katelynn\\Desktop\\market_research.csv", &my table)
set(#count, 0, "Global")
set(#header, "<!DOCTYPE html>
<html>
<head>
<link href=\"stylesheets/styles.css\" rel=\"stylesheet\" />
</head>
<body>
<table>", "Global")
set(#footer, "</table>
</body>
</html>", "Global")
loop($table total rows(&my table)) {
    set(#id, $table cell(&my table, #count, 0), "Global")
    set(#name, $table cell(&my table, #count, 1), "Global")
    set(#domain, $table cell(&my table, #count, 2), "Global")
    set(#regdate, $table cell(&my table, #count, 3), "Global")
    set(#title, $table cell(&my table, #count, 4), "Global")
    set(#brandname, $table cell(&my table, #count, 5), "Global")
    set(#com, "<id=\"com\">{$table cell(&my table, #count, 6)}</id>", "Global")
    set(#net, "<id=\"net\">{$table cell(&my table, #count, 7)}</id>", "Global")
    set(#org, "<a id=\"org\">{$table cell(&my table, #count, 8)}</id>", "Global")
    set(#biz, "<id=\"biz\">{$table cell(&my table, #count, 9)}</id>", "Global")
    set(#globalrank, $table cell(&my table, #count, 10), "Global")
    set(#topcountry, $table cell(&my table, #count, 11), "Global")
    set(#googleresults, $table cell(&my table, #count, 12), "Global")
    set(#link, $table cell(&my table, #count, 13), "Global")
    set(#final_row, "<tr><td>{#id}<td>{#name}<td>{#domain}<td>{#regdate}<td>{#title}<td>{#brandname}<td>{#com}<td>{#net}<td>{#org}<td>{#biz}<td>{#globalrank}<td>{#topcountry}<td>{#googleresults}<td><a href=\"{#link}\">Go!</a><tr>", "Global")
    add item to list(%rows, #final_row, "Delete", "Global")
    increment(#count)
}
save to file("C:\\Users\\Katelynn\\Desktop\\market_research_bot.php", %rows)
add item to list(%complete, "{#header}{%rows}{#footer}", "Delete", "Global")
save to file("C:\\wamp\\www\\index.php", %complete)

Lastly, here is my current CSS:

tr {background-color: #f7f7f7;}
body {background-color:#8b9dc3;}
td:first-child { 
        text-align: center;
        font-weight: bold;
        padding-left: 5px;
        padding-right: 5px;
}

td:nth-child(odd)
{
background-color: #FFFFFF;
}

tr:first-child {
        background-color: #FFFFFF !important;
        text-align: center;
        font-weight: bold;
        font-size: 110%;
        height: 50px;
}

td {
        padding-left: 5px;
        padding-right: 5px;
Edited by katelynnm
Link to post
Share on other sites

I attached a sample ubot script of what I think you are trying to accomplish. I made a few small changes to your script. Also, your html for the table was missing the ending </td> for each cell.

 

Anyhow, you will see in the loop an "if statement". Right now, it looks at the column #googleresults and if it contains "yes", then changes the color to green, otherwise change to red. 

To change the cell that changes colors, just look at how i set the table cell color in the example and move the style code to the correct cell.

 

Hope this helps you   :)

 

- Steve

table cell colors.ubot

Link to post
Share on other sites

Hi Steve-thank you for the help!  It looks like it is doing what I need it to do, but I'm having trouble changing the column.  I switched out the cell in the if statement, but it is still changing only the google results column.  Here is that change:

 

if($comparison(#com"=""Yes")) {
        then {
            set(#color"lightgreen""Global")
        }
        else {
            set(#color"red""Global")
        }
    }

Edited by katelynnm
Link to post
Share on other sites

Steve-that worked perfectly for changing the colors-thank you SO much!!  Do you know if there's a way to have it skip the first row?  The first row is my table headers which I want left their default color  :)

Link to post
Share on other sites

Hi,

 

Yes I see it is solved.

 

Here is ubot code to do column color changes using CSS.

Skip color change for column headings.

Uses "Navigate" instead of "load html" to load the created php file. This change allows style sheet to load.

 

sample-table cell colors-004.ubot

 

Style sheet code:

tr {
    background-color:#F7F7F7;
    }

body {
    background-color:#8b9dc3;
    }

td:first-child {
    text-align: center;
    font-weight: bold;
    padding-left: 5px;
    padding-right: 5px;
    }

td:nth-child(odd) {
    background-color:#FFFFFF;
    }

td.lightgreen {
    background-color:lightgreen;
    }

td.red {
    background-color:red;
    }

td.globalrank {
    text-align:right;
    }

td.topcountry {
    text-align:right;
    }

td.googleresults {
    text-align:right;
    }

tr:first-child {
    background-color:#FFFFFF !important;
    text-align: center;
    font-weight: bold;
    font-size: 110%;
    height: 50px;
    }

td {
    padding-left: 5px;
    padding-right: 5px;
    }

Kevin

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...