Question

我有一个单元格表，每当我点击一个单元格时，我希望它开始闪烁一个颜色，表明它被选中并阻止其他人闪烁，从而取消选择它们（因此一次只选择一个单元格）。我还希望细胞“记住”它以前的颜色是什么，所以它在它的旧颜色和新的“选择颜色”之间闪烁。

问题是：

我不知道如何取消选择。 完成！
它不记得旧颜色，在这种情况下是红色，但它可以是任何东西（它取决于变量）仍在进行中

更新：感谢您的回答，我已经使用了您的一些方法，但我还没有完全涵盖我的目标。这就是我现在所拥有的：https://jsfiddle.net/t3g3mq02/12

我仍然遇到的问题是，如果JS改变常规背景颜色， CSS动画不会改变，因为它似乎从CSS继承了颜色。在最终的代码中，我有改变背景颜色的函数，我在示例代码中用这一行模拟了这个：tds[i].style.backgroundColor = "blue";。我将它添加到迭代中，仅作为示例。

解决方案可能就像用JS改变动画风格，但我不知道如何做到这一点。

HTML：

<table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>

JS：

var tds = document.getElementsByTagName("td"); for(var i=0; i<tds.length; i++) { tds[i].style.backgroundColor = "blue"; tds[i].onclick = function() { var selected = document.getElementsByClassName("selected"); if(selected.length > 0) selected[0].className = ""; this.className = "selected"; }; }

CSS：

tr { background: red } .selected { animation: colorchange 1.5s infinite; -webkit-animation: colorchange 1.5s infinite; } @keyframes colorchange { 0%, 100% {background: inherit;} 40% {background: cyan;} } @-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */ { 0%, 100% {background: inherit;} 40% {background: cyan;} }

随意废弃我的代码并提出一个全新的方法！

Answer 1

HTML：

   <table style="width:100%">
        <tr>
            <td class='cell-color'>Jill</td>
            <td class='cell-color'>Smith</td> 
            <td class='cell-color'>50</td>
        </tr>

更改：从html中删除所有javascript。给单元格一个类名以供选择。

Javascript：

(function(){
    var cells = document.querySelectorAll('.cell-color')

    for(var i = 0; i < cells.length; i++){
        cells[i].addEventListener('click', changeColor, false);
    }

})();

function changeColor(cell){
    var old = document.querySelector('.selected');
    old.className = 'cell';

    var cell = cell.targetElement.src;

    cell.className += 'selected';
}

在这里，我按类名选择所有单元格，为每个单元格添加eventListener，删除旧的选定类并添加新选定的类。

Css：

tr {
    background-color: red;
}

@keyframes colorchange
{
    0%, 100%   {background: inherit;}
    40%  {background: cyan;}
}

更改：使用tr的继承，这样您就不必使用复杂的javascript dom css api来更改keyframe内的值。

和jsfiddle;

Answer 2

如果你不使用桌子，那就容易多了。

您可以做的是一组<label>元素。像这样......

.row {
  display: block;
}
.row>input {
  position: absolute;
  left: -9999px;
}
.row>div {
  background-color: #ccc;
  transition: background-color 0.5s linear;
  cursor: pointer;
}
.row>input:checked~div {
  background-color: #fcc;
}

<label class="row">
  <input type="radio" name="rowselect" value="1" />
  <div>Option 1</div>
</label>
<label class="row">
  <input type="radio" name="rowselect" value="2" />
  <div>Option 2</div>
</label>
<label class="row">
  <input type="radio" name="rowselect" value="3" />
  <div>Option 3</div>
</label>

您当然可以根据需要进行调整，并使用不同的样式方法来获得类似于桌面的外观。

Answer 3

您应该重新考虑这种方法，因为有更简单的方法来实现它。但是为了跟进你目前的工作，我已经对你的小提琴进行了一些调整：

UPDATED JSFIDDLE

1。我不知道如何取消选择。

删除内联onclick处理程序，并放置一个脚本，为每个td分配一个点击处理程序。在处理函数上，在将其分配给单击的元素之前，查找另一个.selected元素并从中删除该类：

var tds = document.getElementsByTagName("td");
for(var i=0; i<tds.length; i++) {
    tds[i].onclick = function() {
        var selected = document.getElementsByClassName("selected");
        if(selected.length > 0)
            selected[0].className = "";
        this.className = "selected";
    };
}

2。它不记得旧的颜色，在这种情况下是红色，但它可以是任何东西（它取决于变量）

不是为td指定颜色，而是将颜色设置为tr。然后，在您想要闪烁的颜色（青色）和inherit属性值之间切换。

tr {
    background: red
}

@keyframes colorchange
{
    0%, 100%   {background: inherit;}
    40%  {background: cyan;}
}

Answer 4

虽然我非常喜欢Niet使用单选按钮，但我仍然会添加我的小提琴，因为它保留了你的结构： https://jsfiddle.net/t3g3mq02/7/

<table id="mainTable" style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

JS：

var table = document.getElementById("mainTable");
table.addEventListener("click", function(e){
    var selected = document.querySelectorAll(".selected");
    if(selected.length > 0){
        Array.prototype.forEach.call(selected,function(element, index, array){
            element.classList.remove("selected");
        });
    }
    e.target.classList.add("selected");
}, false);

使用变量颜色

4 个答案: