I have a form with a schedule filter and I would like to add an X in a cell specific to that table schedule when I click the button and it adds a new line with the chosen field marked with X
var cells = document.querySelectorAll("table tr td");
for(var x=0; x<cells.length; x++){
cells[x].onmouseover = cells[x].onblur = function(e){
this.setAttribute("contenteditable", e.type == "mouseover" ? true : false);
if(e.type == "blur"){
var valor = this.textContent;
switch(valor){
case ".x":
this.style.backgroundColor = "red";
break;
case ".a":
this.style.backgroundColor = "green";
break;
case ".c":
this.style.backgroundColor = "yellow";
break;
case ".d":
this.style.backgroundColor="orange";
}
;
}
}
}{
font-family:Consolas
}
.tabelaEditavel {
border:solid 1px;
width:10%
}
.tabelaEditavel td {
border:solid 1px;
}
.tabelaEditavel .celulaEmEdicao {
padding: 0;
}
.tabelaEditavel .celulaEmEdicao input[type=number]{
width:4%;
border:0;
background-color:rgb(255,253,210);
}
.colorido {
background: red;
}
[data-color="1"],
[data-color="2"] {
background-color: gray;
}
[data-color="3"],
[data-color="4"] {
background-color: yellow;
}
[data-color="5"] {
background-color: red;
}<label class="my-1 mr-2" for="inlineFormCustomSelectPref">HORARIO DO AGENDAMENTO:</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
<option value="20:00">20:00</option>
</select>
<button type="submit" form="form1" value="Submit">Submit</button>
<table class="tabelaEditavel">
<thead>
<tr id="">
<th>08:30</th>
<th>09:00</th>
<th>09:30</th>
<th>10:00</th>
<th>10:30</th>
<th>11:00</th>
<th>11:30</th>
<th>12:00</th>
<th>12:30</th>
<th>13:00</th>
<th>13:30</th>
<th>14:00</th>
<th>15:00</th>
<th>15:30</th>
<th>16:00</th>
<th>16:30</th>
<th>17:00</th>
<th>17:30</th>
<th>18:00</th>
<th>18:30</th>
<th>19:00</th>
<th>19:30</th>
<th>20:00</th>
</tr>
</thead>
<tbody>
<tr >
<td id="idTd"value="a">b</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td id="idTd">a</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td> </tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>/tr>
<tr>