I have a table of blocks, for example, in the first column names, in the second - last names, and in the third and farther to n, the estimates should be. Somewhere around there are three blocks: red, yellow, green; in which it is written 3, 4, 5, respectively. How can you make it so that when you click on a cell in the table, it is filled with an estimate from the selected block and the color of the block is transmitted to the cell? And so if there is another assessment, then he replaced it.

  • How to determine which cell to enter the assessment at the click? - koza4ok
  • In which cell we click, in the one we enter. - Dikaz
  • But how is the color chosen? Also on click? - koza4ok
  • Yes, too, by clicking on one of the three blocks with ratings - Dikaz

1 answer 1

<style> table{width:200px;table-layout:fixed;} table td{border:1px solid;height:100px;text-align:center;font-size:20px;} .gallery{overflow:hidden} .gallery div{width:100px;height:100px;margin:10px;float:left;text-align:center;font-size:20px;} .gallery div.red{background:red;} .gallery div.green{background:green;} .gallery div.blue{background:blue;} </style> </head> <body> <?php ?> <table> <tr> <td></td><td></td><td></td> </tr> </table> <div class="gallery"> <div class="red">5</div> <div class="green">4</div> <div class="blue">3</div> </div> <script> //var curcolor='green'; var arr=[]; arr["curcolor"]="green"; arr["mark"]=4; var colorPiker=document.querySelectorAll("div.gallery div"); for(var i=0;i<colorPiker.length;i++){ colorPiker[i].addEventListener('click',function(){ arr["curcolor"]=this.className; arr["mark"]=this.innerHTML; }); } var tdPiker=document.querySelectorAll("table td"); for(var i=0;i<tdPiker.length;i++){ tdPiker[i].addEventListener('click',function(){ this.style.backgroundColor=arr["curcolor"]; this.innerHTML=arr["mark"] }) } </script>
  • but it can be the same, not in the table, <table> <tr> <td> </ td> <td> </ td> <td> </ td> </ tr> </ table> but for molds, i.e. <div class = "name"> </ div> <div class = "marks"> <form method = "post" action = "#"> <input type = "text" name = "1" SIZE = "1" > </ input> <input type = "text" name = "2" SIZE = "1"> </ input> <input type = "text" name = "3" SIZE = "1"> </ input> < input type = "text" name = "4" SIZE = "1"> </ input> <input type = "text" name = "5" SIZE = "1"> </ input> </ form> </ div > - Dikaz
  • And yes, you can put a restriction for input? So that a person cannot enter himself into a form .. only so that information is copied through a third-party block? - Dikaz
  • You came for a ready solution? I gave you a prototype and then you yourself. See the readonly attribute. - koza4ok 4:04 pm
  • I'm just with your prototype and so spit and so spit ... but the color is transferred to the form field, but the figure is not transferred - Dikaz
  • To get / write the value in the field, use the value property - koza4ok