点击，MySQL, PHP，关于交换图像

我正在建立一个SEO脚本，我推迟了这件事2周现在没有答案。我在这里看到了几十个答案，但没有一个是令人满意的(或者至少我没有发现它们有用)。

我有一个MySQL表与几个字段，数据库有关键字字段为主，其他字段是SEO变量的关键字的问题。好的，没问题，我把MySQL值放到表中当php请求时，它们会被输出到一个漂亮的表中。

我有一个圆形按钮在每行的开始，表明如果关键字是容易，中等或难以优化。一个绿色按钮，一个橙色按钮和一个红色按钮。每行只显示一个。

颜色由Page Rank(表中的一列，从0-10 (<2 -绿色，2-4橙色，超过4红色))决定。

所以我的问题很简单…

我想点击这些按钮，图像或你想叫他们并选择他们，他们会变成蓝色(用蓝色图像代替图像)，这样他们就可以包含在。csv文件导出。

所以，我会给你看我的代码，但我已经修改了很多次，我不认为它有什么好，没有意义，但我可以回答任何问题。

基本上是在ONCLICK的基础上来回更改mysql和php的2个图像。

这是葡萄牙语的一半，所以我将翻译…

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

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

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

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

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