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”。如果我改变主意并在Player 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

Answer 2

也许对您没有帮助，但这就是我为娱乐而创建的... 作为jQuery用户，我发现很难使用普通的javascript列出任何动作的表...我宁愿在某些对象中包含玩家列表，并基于该列表绘制表格。与其将CSS添加到表单元中，不如添加活动类，然后轻松地将该类移至其他播放器。甚至可能向表单元格添加一些类或其他数据属性以帮助标识正确的行/单元格……总之，一切皆有可能，但是通过这种设计，我想您的项目将步履维艰。祝你好运。

var Game = function() {
  
	var players = {};
  var table = document.querySelector('#myTable');
  var rows = table.querySelectorAll('tr');
  
 
  function uncheckPlayers(col) {
    for ( var i=0; i<rows.length; i++ ) {
      var tds = rows[i].querySelectorAll('td');
      for ( var x=0; x<tds.length; x++ ) {
        if ( col === x ) {
          tds[x].style.backgroundColor = '';
        }
      }
    }

  }
  
  for ( var i=0; i<rows.length; i++ ) {
      var tds = rows[i].querySelectorAll('td');
      for ( var x=0; x<tds.length; x++ ) {
        tds[x].addEventListener('click', function() {
          var id = x;
          return function() {
            uncheckPlayers(id);
            players[id] = new Player(id, this.innerText);
            this.style.backgroundColor = 'red';
            console.log(players);
          }  
 
        }(x));
      }
  }

  
}

var Player = function(id, name) {
	this.name = name;
  this.id = id;
  this.score = 0;
  console.log(this);
};

var Game = new Game();

 <html>
<head>
    <title>Find table cell value on cell (table) click using JavaScript</title>
</head>
<body>
    <center>
        Click on table below to select Players.
        <br />
        <br />
    </center>
    <table align="center" id="myTable" border="1" style="cursor: pointer;">
    <tr>
      <th>Player 1</th><th>Player 2</th>
    </tr>
    <tr>
      <td>Danny</td><td>John</td>
    </tr>
    <tr>
      <td>John</td><td>Danny</td>
    </tr>
    <tr>
      <td>Mary</td><td>Mary</td>
    </tr>
    </table>
    <br />

</body>
</html>

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

2 个答案: