如何更改表格单元格中背景的颜色两秒钟?并返回默认值 [英] How to change color of the background in table cell for two seconds? and go back to default

问题描述

在下面的javaScript代码中:

In the below javaScript code:

        function webSocketStart()
        { //onclick() of a button
            document.getElementById("button").disabled = true;

            var wsock = new WebSocket("ws://127.0.0.1:1234/websock");

            wsock.onmessage = function (evt)
            {
                var map = JSON.parse(evt.data)

                var myTable = document.getElementById("myTable");
                var rows = myTable.getElementsByTagName("tr")
                var existing = false
                for (var i = 1; i < rows.length; i++) {
                    if (rows[i].getElementsByTagName("td").length > 0) {
                        if (rows[i].cells[0].textContent.trim().localeCompare(map['Key'].trim()) == 0){
                            rows[i].cells[1].textContent = map['Value'] // cell color should change and unchange for two seconds
                            existing = true
                            break
                        }
                    }
                }

                if (!existingApp){
                    var row = myTable.insertRow(1); // New row at the first position
                    var keyCell = row.insertCell(0)
                    keyCell.textContent = map['Key']
                    keyCell.style.backgroundColor = 'yellow'
                    setInterval(function(){
                        keyCell.style.backgroundColor = 'white'
                    }, 2000);

                    var valueCell = row.insertCell(1)
                    valueCell.textContent = map['Value']
                    valueCell.style.backgroundColor = 'yellow'
                    setTimeout(function(){
                        valueCell.style.backgroundColor = 'white'
                    }, 2000);
                }

---

第17、26和&行27条有更改和更改颜色的评论

---

Line 17, 26 & 27 have comments for color change and unchange

使用 setTimeout()更改了代码，但某些单元格没有变回 white

Made code changes with setTimeout() but some cells does not change back to white

                for (var i = 1; i < rows.length; i++) {
                    if (rows[i].getElementsByTagName("td").length > 0) {
                        if (rows[i].cells[0].textContent.trim().localeCompare(map['Key'].trim()) == 0){
                            rows[i].cells[1].textContent = map['Value']
                            rows[i].cells[1].style.backgroundColor = 'yellow' // color change
                            existing = true
                            setTimeout(function(){
                                rows[i].cells[1].style.backgroundColor = 'white'
                            }, 2000);
                            break
                        }
                    }
                }

                if (!existing){
                    var row = myTable.insertRow(1);
                    keyObj = row.insertCell(0)
                    keyObj.textContent = map['Key']
                    keyObj.style.backgroundColor = 'yellow'  // color change
                    setInterval(function(){
                        keyObj.style.backgroundColor = 'white'
                    }, 2000);

                    keyObj = row.insertCell(1)
                    keyObj.textContent = map['Value']
                    keyObj.style.backgroundColor = 'yellow'  // color change
                    setTimeout(function(){
                        keyObj.style.backgroundColor = 'white'
                    }, 2000);
                }

---

使用CSS&JavaScript

---

Using CSS & JavaScript,

1)如何在2秒钟内更改和更改表格单元格中背景的颜色?在表格单元格中设置值后

1) How to change and unchange the color of the background in table cell, for 2 seconds? after setting of values in table cell

2)由于 table 元素具有样式属性，如果没有CSS规则，是否可以实现相同的功能? rows [i] .cells [1] .style.backgroundColor ='黄色'

2) As table element has style properties, Can we achieve the same without CSS rules? rows[i].cells[1].style.backgroundColor = 'yellow'

推荐答案

您已经在获取元素，因此您可以在JS中添加一个类，如下所示: el.classList.add('className'); 然后，您需要设置一个计时器 setInterval(function，milliseconds)，该计时器会在设置的时间后删除该类.然后，CSS将恢复为默认值.我在颜色上添加了CSS过渡，因此颜色变化时不会造成震撼.

You're already getting the element so you would add a class in JS like this: el.classList.add('className'); Then you need to set a timer setInterval(function, milliseconds) that removes the class after a set amount of time. The CSS will then revert back to default. I added a CSS transition to the color so it's not as jarring when it changes.

(点击处理程序仅用于示例)

(click handler is just for the example)

var removeClass = function(targ){
  if(targ.classList.contains('highlight')){
    targ.classList.remove('highlight');
  }
}

document.getElementById('myEl').addEventListener('click', function () {
  var myEl = this
  myEl.classList.add('highlight');
  var myTimer = setInterval(function(){removeClass(myEl)},2000);
});

#myEl {
      width: 30px;
      height: 30px;
      margin: 10px;
      
      background-color: aqua;
      transition: background 0.25s ease;
      
     }
     
#myEl.highlight {
      background-color: orange;
     }

<div id='myEl'></div>

Click the box to activate the timer

这篇关于如何更改表格单元格中背景的颜色两秒钟?并返回默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！