我正在制定一个真实的时间表,您可以在其中查看当前学生所在的位置。他们一天有六次 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;
}
最佳答案
您需要删除 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
中添加
关于javascript - 元素切换类但不获取新类的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58626213/