Onclick，MySQL，PHP，关于交换图像

I’m building an SEO script and am delaying this matter for 2 weeks now without an answer. I saw dozens of answers here but none of them where satisfactory (or at least I didn’t find them useful).

I have a MySQL table with several fields, the data base has the keyword field as primary and the other fields are SEO variables for the keyword in question. OK, no problem, I put the MySQL values in the table and they are spit out into a nice table when requested by php…

I have a round button at the beginning of every row that indicates if the keyword is easy, medium or hard to optimize. Respectfully a green button, an orange button and a red button. Only one shows per row.

The color is determined by the Page Rank (a column in the table, from 0-10 (<2 – green, 2-4 orange, over 4 red)).

So my problem is simple…

I would like to click on these buttons, images or what you would like to call them and select them, they will turn blue (REPLACE THE IMAGE WITH A BLUE IMAGE) so then they can be included in the .CSV file to export.

So, I would show you the code I have but I have changed it so many times I don’t think it’s any good and not significant, but I can answer any questions.

Basically it’s changing 2 images back and forth with mysql and php on an ONCLICK basis.

It's half in Portuguese so I will translate...

$query = "SELECT `CÔR`(COLOR), `keyword`, `Adds`, `PRMédio`, `PRDomínioMédio`, `Searches`, `CPC`, `.com`, `.org`, `.net`, `All in URL`, `All in Title`, `All in Desc.` FROM keywords";

if ($query_run = mysql_query($query)) {
    while ($query_row = mysql_fetch_assoc($query_run)) {
        (COLOR)$côr = $query_row['CÔR'];
            $keyword = $query_row['keyword'];
            $Adds = $query_row['Adds'];

            $PRMédio = $query_row['PRMédio'];
            $PRDomínioMédio = $query_row['PRDomínioMédio'];
            $Searches = $query_row['Searches'];
            $CPC = $query_row['CPC'];
            $com = $query_row['.com'];
            $org = $query_row['.org'];
            $net = $query_row['.net'];
            $All_in_URL = $query_row['All in URL'];
            $All_in_Title = $query_row['All in Title'];
            $All_in_Desc = $query_row['All in Desc.'];


            echo "
            <tr>

            <th>";
            if ($PRMédio < 2) {
                echo "(GREEN BUTTON)$botao_verde";
            } else if ((2 <= $PRMédio) && ($PRMédio < 4)) {
                echo "(ORANGE BUTTON)$botao_laranja";
            } else if (4 < $PRMédio) {
                echo "(RED BUTTON)$botao_vermelho";
            }

            // this is the part where i do not know what I'm doing

            echo "<form>
                <input type='submit' name='submit' class='image'
                value=(BUTTON)'botão' onClick='UPDATE keywords SET CÔR = ~CÔR'>";
            echo "</form>
            </th>
            <td>$keyword</td>
            <td>$Adds</td>
            <td>

It continues with the rest of the columns of the table...

This should get you started - all you need to do is generate the appropriate HTML for your rows as demonstrated below

Javascript

var PathToImages = "/Images/";

// Let's store the initial colours in in array so we know what to toggle back to...
var Colors = ["Red", "Blue"];

// And set up somewhere to record which ones have been clicked...
var Toggled = [];

//Using jQuery this might look more elegant but I'll keep it simple

function Toggle(RowNumber) { //RowNumber is 0-indexed
    var NewImageSource;
    if(Toggled.indexOf(RowNumber) < 0) {
        //Toggle on
        Toggled.push(RowNumber);
        NewImageSource = PathToImages + "Blue.png";
    } else {
        //Toggle off
        Toggled.splice(Toggled.indexOf(RowNumber), 1); //Remove the Row number from the toggled array
        NewImageSource = PathToImages + Colors[RowNumber] + ".png";
    }
    document.getElementById("Image" + RowNumber).src = NewImageSource;
}

Html

<img src="/Images/Red.png" id="Image0" onclick="toggle(0);"/>
<img src="/Images/Green.png" id="Image1" onclick="toggle(1);"/>

You can try this-

DEMO here

function main() {
    "use strict";
    var toggles = document.querySelectorAll('img.toggle'), i;
    for (i=0; i < toggles.length; i++) {
        toggles[i].addEventListener('click', toggle);
    }
}
function toggle() {
    "use strict";
    this.src = (this.src == "blue.jpg") ? "red.jpg" ? "blue.jpg";
}
window.addEventListener('load', main);

Update

You are mixing server-side code with client-side code. This -

<input type='submit' name='submit' class='image' value=(BUTTON)'botão' 
onClick='UPDATE keywords SET CÔR = ~CÔR'>

is never (never) going to work. You cant execute DB queries from JavaScript. You'll need a bridge between the server and the client-side. In simple words, you'll need AJAX and Mozilla Developers Network has a good set of tutorial which can get you started.