元件开关 class 但没有得到新 class 的 styles

Question

I'm working on a real-life timetable where you can watch where the students current be. They have six meetings a day. if a student exit the scool i want to delete him from the list. if i doubleclick the name i want to change the class from name to selected and change the backgoundcolor so if i would press the "Schüler löschen"-button all selected get deleted.

Here is the code:

            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();

the css:

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

The problem is if i double click the field the color dosent switch to red it stays green but the alert()-function shows that the class has switched

i've also tried

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

Answer 1

You need to remove cell class, and use this in that scope.

Try this:

 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>

I didn't get why cell is input element and why do you need to added in tr