javascript - 元素切换类但不获取新类的样式

Question

我正在制定一个真实的时间表，您可以在其中查看当前学生所在的位置。他们一天有六次 session 。如果学生退出学校，我想将他从列表中删除。如果我双击名称，我想将类从名称更改为选定并更改背景颜色，所以如果我按下“Schüler löschen”按钮，所有选定的都会被删除。

代码如下:

            function createTable(){             
                var table = document.getElementById('table');

                for(var j = 0;j<names.length;j++) {
                    var row = document.createElement("tr");
                    row.classList.add('row');

                    for(i=0;i<8;i++){
                        if(i==0){
                            var cell = document.createElement("input");
                            cell.classList.add('name');
                            cell.value= names[j];
                            cell.addEventListener("dblclick", function(){
                                alert(cell.classList);
                                cell.classList.add('selected');
                                alert(cell.classList);
                            });
                        }else if(i==4){
                            var cell = document.createElement("td");
                            cell.classList.add('spacer');

                        }else{
                            var cell = document.createElement("td");
                            cell.classList.add('cell');
                            cell.textContent = '';
                        }
                        row.appendChild(cell);
                    }
                    table.children[0].appendChild(row);
                }
            }
            createTable();

CSS:

    input.name {
        width: 20em;
        background-color: #00ff00;
    }
    input.selected{
        background-color: #ff7f7f;
    }

问题是，如果我双击该字段，颜色剂量切换为红色，它保持绿色，但 alert() 函数显示类已切换

我也试过

    cell.name {
        width: 20em;
        background-color: #00ff00;
    }
    cell.selected{
        background-color: #ff7f7f;
    }

Answer 1

您需要删除 cell 类，并在该范围内使用它。

试试这个:

function createTable() {
    var table = document.getElementById('table');
    var names = ["TEST 1", " TEST 2"];

    for (var j = 0; j < names.length; j++) {
        var row = document.createElement("tr");
        row.classList.add('row');

        for (i = 0; i < 8; i++) {
            if (i == 0) {
                var cell = document.createElement("input");
                cell.classList.add('name');
                cell.value = names[j];
                cell.addEventListener("dblclick", function () {
                    alert(cell.classList);
                    this.classList.remove('cell');
                    this.classList.add('selected');
                    alert(cell.classList);
                });
            } else if (i == 4) {
                var cell = document.createElement("td");
                cell.classList.add('spacer');

            } else {
                var cell = document.createElement("td");
                cell.classList.remove('selected');
                cell.classList.add('cell');
                cell.textContent = '';
            }
            row.appendChild(cell);
        }
        table.children[0].appendChild(row);
    }
}
createTable();

input.name {
    width: 20em;
    background-color: #00ff00;
}
input.selected{
    background-color: #ff7f7f;
}

<table id="table"><tbody></tbody></table>

我不明白为什么 cell 是 input element 以及为什么需要在 tr 中添加