I am making a stand out duplicate as well as the issue is the cells are not making it possible for modifying though i include the feature. I attempted utilizing chatgpt as well as also it didnt assistance. Thats all the issue i obtained as well as pile overflow is not enabling me to publish given that the majority of my concern had code as well as much less outlining so i am attempting to raise the information component.
HTML
<< div course=" grid-cont">
<> < div course=" dummy-box"><> < div course=" row-number-cont"><> < div course=" cells-cont">
<> < div course=" column-letter-cont"><> .
<.
<< div course=" sheet-action-cont">
<> < period course=" material-icons">
> post_add.
<.
<< div course=" sheets-folder-cont">
<> < div course=" sheet-cont">> Sheet 1<.
<.
<.
<< manuscript src="./ script.js"><> .
<.
CSS
grid-cont {
elevation: calc( 100vh - 11rem);
placement: family member;
overflow: scroll;.
}
. dummy-box {
size:2.5 rapid eye movement;.
elevation:1.5 rapid eye movement;.
background-color: grey;.
boundary: 0.3 px strong grey;.
placement: repaired;.
z-index: 2;.
}
. row-number-cont {
placement: sticky;.
left:0;.
leading:1.5 rapid eye movement;.
z-index: 1;.
}
. row-numbers {
background-color: lightgray;.
size:2.5 rapid eye movement;.
elevation: 1.5 rapid eye movement;.
text-align: facility;.
boundary: 0.3 px strong grey;.
screen: flex;.
justify-content: facility;.
align-items: facility;.
}
. cells-cont {
placement: outright;.
leading:0;.
left:2.5 rapid eye movement;.
}
. column-letter-cont {
screen: flex;.
placement: sticky;.
leading:0;.
left:2.5 rapid eye movement;.
}
. col-letters {
elevation: 1.5 rapid eye movement;.
size:5 rapid eye movement;.
text-align: facility;.
boundary: 0.3 px strong grey;.
background-color: lightgray;.
screen: flex;.
justify-content: facility;.
align-items: facility;.
}
. cell {
elevation: 1.5 rapid eye movement;.
size:5 rapid eye movement;.
boundary: 0.3 px strong grey;.
}
. row-cell-cont {
screen: flex;.
}
JS
allow rows= 100;.
allow columns= 26;.
allow rowNumberCont= document.querySelector(". row-number-cont");.
for( allow i= 0; i<< rows; i++).
{
allow rowNum= document.createElement(" div");.
rowNum.innerText= i +1;.
rowNum.classList.add(" row-numbers");.
rowNumberCont.appendChild( rowNum);.
}
allow colLetterCont= document.querySelector(". column-letter-cont");.
for( allow i= 0; i<< columns; i++).
{
allow colLetter= document.createElement(" div");.
colLetter.setAttribute(" contenteditable"," real");.
colLetter.innerText= String.fromCharCode( i +65);.
colLetter.classList.add(" col-letters");.
colLetterCont.appendChild( colLetter);.
}
allow cellsCont= document.querySelector(". cells-cont");.
for( allow i= 0; i<< 100; i++).
{
allow rowCellCont= document.createElement(" div");.
rowCellCont.classList.add(" row-cell-cont");.
for( allow j= 0; j<< 26; j++).
{
allow cell= document.createElement(" div");.
cell.classList.add(" cell");.
cell.setAttribute(" contenteditable"," real");.
rowCellCont.appendChild( cell);.
}
cellsCont.appendChild( rowCellCont);.
}
I quit as well as also attempted straight altering cell kind right into input, also that didnt job.
