選択中に​​を変更し、別の​​が選択された後で変更を元に戻すかどうかを確認します。

Question

テーブルを作成していて、選択したセルの背景色を変更したいとします。次に、別のセルを選択して（この新しいセルに同じ変更を適用すると）、最初の（選択されていない）セルで変更を元に戻します。これに最善のアプローチは何ですか？ここに私のコードは次のとおりです。

var table = ''; 

for (var r = 0; r < rows; r++) { 
    table += '<tr>'; 

    for (var c = 0; c < cols; c++) { 
     if (c == 0) { 
      if (r == 0) { 
       var cellID = r.toString(); 
       cellID += letterArray[c - 1]; 
       table += '<td style="min-width:50px; height:25px;">' + '</td>'; 
      } 
      else { 
       var cellID = r.toString(); 
       cellID += letterArray[c - 1]; 
       table += '<td style="min-width:50px; height:25px">' + r + '</td>'; 
      } 
     } 
     else if (r == 0 && c > 0) { 
      var cellID = r.toString(); 
      cellID += letterArray[c - 1]; 
      table += '<td style="min-width:50px; height:25px">' + letterArray[c - 1] + '</td>'; 
     } 
     else { 
      var cellID = r.toString(); 
      cellID += letterArray[c - 1]; 
      table += '<td id="' + cellID + '" style="min-width:50px; height:25px;" onclick="selectCell(this)">' + '</td>'; 
     } 
    } 
    table += '</tr>'; 
} 

文書にテーブルを書き込む：

document.write('<table id="table" border=1>' + table + '</table>'); 

selectCell機能：私は私の問題が発生した場所

function selectCell(x) { 
    alert("Row = " + x.parentNode.rowIndex + " Col = " + String.fromCharCode((x.cellIndex - 1) + 65)); 
    x.style.backgroundColor = 'purple'; 
} 

です。最初のセルをクリックすると、選択したセルの情報が表示され、背景色が変更されます。次に、別のセルを選択すると、新しいセル行と列情報が表示され、色が変更されます。

以前に選択したセルの色の変化を元に戻す最善の方法は何ですか？

あなたの時間とエネルギーをありがとう！

Answer 1

バックグラウンドカラーを適用し、それをあなたの機能で追加/削除するCSSクラスを作成する必要があります。

CSS：

.selected { 
    background-color: purple; 
} 

JS：

function selectCell(x) { 
    var currentSelection = document.querySelector('.selected'); 

    if (currentSelection) { 
    currentSelection.classList.remove('selected'); 
    } 

    x.classList.add('selected'); 
} 

Answer 2

私はあなたがdocument.writeの使用を避けるべきであると@Rishat Muhametshinに同意するあなたの機能は、すでにこのようなクラスを、持っている要素を確認することができます。そして私は@ skyline3000がそれをどのように解決したかを気に入っていましたので、コードをきれいにする方法を見るためにすべてをまとめてスニペットに入れました。

私はトップとサイドの真のヘッダーを提供するために行ってから、余分なCSSを追加してヘッダーのように見せました。以下は

var rows = 7; 
 
var cols = 8; 
 
var table = document.createElement('table'); 
 
var selecedTd; 
 
table.id = "table"; 
 
table.border = 1; 
 
table.cellSpacing = 0; 
 
table.cellPadding = 4; 
 
document.body.appendChild(table); 
 

 
for (var r = 0; r < rows; r++) { 
 
    var tr = document.createElement('tr'); 
 
    if (r > 0) { 
 
    tr.id = "row"+r; 
 
    } 
 
    table.appendChild(tr); 
 

 
    for (var c = 0; c < cols; c++) { 
 
    var cell; 
 
    var char = String.fromCharCode(c+64); 
 

 
    if (c===0 || r===0) { 
 
     cell = document.createElement('th'); 
 
     cell.setAttribute('style', 'min-width:50px; height:25px;'); 
 
    } else { 
 
     cell = document.createElement('td'); 
 
    } 
 
    tr.appendChild(cell); 
 
    
 

 
    if (c == 0 && r > 0) { 
 
     cell.textContent = r; 
 
    } 
 
    else if (r == 0) { 
 
     if (c > 0) { 
 
     cell.textContent = char 
 
     cell.id = "col"+c; 
 
     } 
 
    } 
 
    else { 
 
     cell.id = r+char; 
 
     cell.addEventListener('click', selectCell); 
 
     //cell.textContent = cell.id; 
 
    } 
 
    } 
 
} 
 

 

 
function selectCell(event) { 
 
    var x = event.target; 
 
    var currentSelection = document.querySelector('.selected'); 
 

 
    if (currentSelection) { 
 
    currentSelection.classList.remove('selected'); 
 
    } 
 

 
    x.classList.add('selected'); 
 
}

.selected { 
 
    background-color: purple; 
 
    color: white; 
 
} 
 

 
th { 
 
    background-color: #DDD; 
 
} 
 

 
td { 
 
    cursor: pointer; 
 
}

UPDATE

選択したフィールドの編集を許可するコードです。実稼働環境で使用する前に作業が必要で、配列やオブジェクト、セル内にデータを保存することが必要ですが、作業を進める必要があります。

var rows = 7; 
 
var cols = 8; 
 
var table = document.createElement('table'); 
 
var selecedTd; 
 
var inputField = document.createElement('input'); 
 
table.id = "table"; 
 
table.border = 1; 
 
table.cellSpacing = 0; 
 
table.cellPadding = 4; 
 
document.body.appendChild(table); 
 
inputField.className = "roving-input"; 
 

 
for (var r = 0; r < rows; r++) { 
 
    var tr = document.createElement('tr'); 
 
    if (r > 0) { 
 
    tr.id = "row"+r; 
 
    } 
 
    table.appendChild(tr); 
 

 
    for (var c = 0; c < cols; c++) { 
 
    var cell; 
 
    var char = String.fromCharCode(c+64); 
 

 
    if (c===0 || r===0) { 
 
     cell = document.createElement('th'); 
 
    } else { 
 
     cell = document.createElement('td'); 
 
    } 
 
    tr.appendChild(cell); 
 
    
 

 
    if (c == 0 && r > 0) { 
 
     cell.textContent = r; 
 
    } 
 
    else if (r == 0) { 
 
     if (c > 0) { 
 
     cell.textContent = char 
 
     cell.id = "col"+c; 
 
     } 
 
    } 
 
    else { 
 
     cell.id = r+char; 
 
     cell.addEventListener('click', selectCell); 
 
     cell.textContent = cell.id; 
 
    } 
 
    } 
 
} 
 

 

 
function selectCell(event) { 
 
    var x = event.target; 
 
    var currentSelection = document.querySelector('.selected'); 
 
    if (x !== currentSelection && x.localName === 'td') { 
 
    if (currentSelection) { 
 
     currentSelection.textContent = inputField.value; 
 
     currentSelection.classList.remove('selected'); 
 
    } 
 

 
    x.classList.add('selected'); 
 
    inputField.value = x.textContent; 
 
    x.appendChild(inputField); 
 
    inputField.style.width = (x.clientWidth-2)+'px'; 
 
    inputField.focus(); 
 
    inputField.select(); 
 
    } 
 
}

.selected { 
 
    position: relative; 
 
} 
 

 
th { 
 
    background-color: #DDD; 
 
    height:25px; 
 
    min-width:50px; 
 
} 
 

 
td { 
 
    cursor: pointer; 
 
} 
 

 
.roving-input { 
 
    background-color: #FDF; 
 
    border: none; 
 
    bottom: 0; 
 
    display: inline-block; 
 
    left: 0; 
 
    outline: none; 
 
    position:absolute; 
 
    right: 0; 
 
    top: 0; 
 
}