本質上，我希望用戶能夠單擊并按住滑鼠并滾動表格中的任意數量的單元格，只要他們滾動一個單元格，它就會改變顏色。問題是，當用戶定期單擊一個單元格時，我希望該單元格改變顏色，并且我有一個單獨的事件偵聽器可以做到這一點。
這是我的 html 表格
<table class="c-table" onm ousedown="hoverColorFill()">
這是我為嘗試處理滑鼠懸停情況而創建的 js 函式，我對此進行了描述：
function hoverColorFill(){
elements = document.querySelectorAll(':hover');
for(let i=0; i<elements.length; i ){
elements[i].style.backgroundcolor = colorEl.value
}
}
這是當有人簡單地單擊我的單元格時我擁有的代碼：
table.addEventListener('click', (event) => {
const rows = document.querySelectorAll('tr');
const rowsArray = Array.from(rows);
const rowIndex = rowsArray.findIndex(row => row.contains(event.target));
const columns = Array.from(rowsArray[rowIndex].querySelectorAll('td'));
const columnIndex = columns.findIndex(column => column == event.target);
document.querySelector(".c-table").tBodies[0].rows[rowIndex-1].cells[columnIndex].style.backgroundColor = colorEl.value
})
hoverColorFill() 函式似乎不起作用，當我將滑鼠拖到我的桌子上時，該函式被呼叫（它可以列印到控制臺）但它不會改變顏色。我的單擊事件偵聽器功能完全正確，但它偶爾會出現此錯誤：未捕獲的型別錯誤：無法在 HTMLTableElement 處讀取未定義的屬性（讀取“樣式”）。但不起作用的功能不會引發任何錯誤。
編輯：我在這里不使用 eventListener 的原因是因為我無法弄清楚如何做到這一點，以便它同時注意懸停和滑鼠懸停。
uj5u.com熱心網友回復：
為單元格著色的代碼似乎相當復雜。
這個片段只是向元素添加了一個類。
然而，記住滑鼠何時落下確實需要更復雜一些，因此著色發生在 mousemove 上，并記住滑鼠何時抬起。
up 和 down 事件可能發生在表格之外，因此可以在整個檔案上感知。
此外，當滑鼠向下移動時，瀏覽器中的默認設定通常是添加背景顏色（用戶被認為是在進行選擇）。此代碼段將其設定為對表格透明，以便更容易看到正在發生的顏色。
const table = document.querySelector('table');
let mouseIsDown = false;
table.addEventListener('click', function() {
event.target.classList.add('colorCell');
});
document.addEventListener('mousedown', function() {
mouseIsDown = true;
event.target.classList.add('colorCell');
})
document.addEventListener('mouseup', function() {
mouseIsDown = false;
});
table.addEventListener('mouseover', function() {
if (mouseIsDown) event.target.classList.add('colorCell');
});td.colorCell {
background-color: yellow;
}
table::selection,
tr::selection,
td::selection {
background-color: transparent;
}<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>uj5u.com熱心網友回復：
colorTd()函式檢查您是否單擊了 a td，然后向其添加了一個類
當您單擊它時它將處于活動狀態，或者當您單擊時拖動滑鼠 是否在單擊時
拖動滑鼠由onmousedown和檢查onmouseup。它存盤在mouseIsDown
當您將滑鼠懸停在表格上時（由 確定onmouseover）并且何時mouseIsDownis true，colorTd()函式將執行，并給出tdsa 類
const table = document.querySelector("table");
const className = "selected";
let mouseIsDown = false;
const colorTd = (e) => (e.target.tagName = "TD" && e.target.classList.add("selected"));
table.onclick = (e) => colorTd(e);
document.onmousedown = (e) => {
mouseIsDown = true;
colorTd(e);
};
document.onmouseup = () => (mouseIsDown = false);
table.onmouseover = (e) => mouseIsDown && colorTd(e);td {
cursor: pointer;
font-size: 22px;
}
td.selected {
background-color: lightblue;
}
table::selection,
tr::selection,
td::selection {
background-color: transparent;
}<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406670.html
標籤：
上一篇：如何制作一個html表單堆疊