Add a die to a table’s specific cell

Asked

Viewed 23 times

1

I have a form with an hourly filter and would like to add an X in a specific cell for that table time when click the button and it add a new line with the chosen field marked with the X

this and my filter and my for had it turn into editable because I would use it later

   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>

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.