javascript - 单击两个表格单元格突出显示其内容并将其值存储在变量中

Question

我从这样的数据库中获取一个表(行号可能会有所不同):

|Player 1|Player 2|
-------------------
|Danny   |Danny   |
|John    |John    |
|Mary    |Mary    |

我想选择两个名称，每个玩家列一个，并将它们存储在两个变量中，例如player1_id和player2_id，稍后我将使用它们将数据插入数据库。我还想在单击名称时突出显示它们。当我单击另一个名称时，突出显示和关联的变量值应该发生变化。

例如，假设我分别单击玩家 1 和玩家 2 中的 Danny 和 John。这两个名字应该突出显示，变量应该为player1_id =“Danny”和player2_id =“John”。如果我改变主意并单击“玩家 2”列上的 Mary，Mary 应该突出显示，John 应该失去突出显示，player2_id 应该更改为“Mary”

到目前为止，我设法只获得突出显示的部分(但是当我单击多个名称时，所有名称都保持突出显示)。有人能给我指出正确的方向吗？

Here是我到目前为止所拥有的 JSFiddle 代码

Answer 1

试试这个:https://jsfiddle.net/dunsondog109/behcgwLf/7/

function inputClickHandler(e){
    e = e||window.event;
    var all = document.getElementsByTagName("td");
    var tdElm = e.target||e.srcElement;
    var tdIndex = tdElm.cellIndex;
    var numberOfColumns = 2;
    if(tdElm.style.backgroundColor == 'rgb(46, 204, 64)'){
        tdElm.style.backgroundColor = '';
    } else {
        for (var i=0;i<all.length;i++) {
            if (i%numberOfColumns==tdIndex%numberOfColumns) {
                // It is in the same column
                all[i].style.backgroundColor = '';
            }
        }
        tdElm.style.backgroundColor = '#2ECC40';
    }
}

您需要先重置您所在列中的所有td，然后再设置被点击的td