Question

我正在制定一个现实的时间表，您可以在其中查看学生的当前位置。他们每天开会六次。如果学生退出学校，我想从列表中删除他。如果我双击名称，我想将类从名称更改为选中，并更改背景色，那么如果我按“Schülerlö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中添加

元素切换类，但没有新类的样式

1 个答案: