Changing the background of a table

Question

I need a help, I have a web page with two tables, a table has 5 divs with images inside it, already predefined images, when clicking on any of these images change the background of the other table. How can I do this using PHP, HTML and JS.

Someone has a tutorial, experimental code, anything that can help me carry out this operation, I thank you in advance.

CODE:

<td height="351" valign="top" align="center">
   <div class="fundo"> </div>
   <div class="fundo"> </div>
   <div class="fundo"> </div>
   <div class="fundo"> </div>
   <div class="fundo"> </div> 
</td> 

CSS:

.fundo {
   font-size: 1em; 
   text-align: center; 
   line-height: 40px; 
   height: 52px; 
   width: 52px; 
   margin: 4px; 
   margin-left:32px; 
   border: 2px solid black; 
   float: left; 
   padding: 2px;
 }

Answer 1

I made here a simple example for you to modify and use to solve your problem.

Explanation :

The colors of each div are set in the 'BACKGROUND' in your case as will be image will probably use 'background-image', independent how to do need to modify in the event of the click which attribute you want to take from the div who received the click to pass to div general, or table , or any element. Note that I added the event click in [color] an attribute I have set in all Ivs that will have this action.

$(function(){
  $('[cor]').click(function(){
    var bg = $(this).css('background');
    $('.cor-escolhida').css('background',bg);
  });
});

.div{
  width: 30px;
  height: 30px;
  float:left;
  margin-left: 5px;
  cursor: pointer;
}
.azul{
  background: blue;
}
.amarelo{
  background: yellow;
}
.vermelho{
  background: red;
}
.preto{
  background: black;
}
.verde{
  background: green;
}
.cor-escolhida{
  background: #ededed;
  width: 100%;
  height: 200px;
  float:left;
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div cor="true" class="div azul"></div>
<div cor="true" class="div amarelo"></div>
<div cor="true" class="div vermelho"></div>
<div cor="true" class="div preto"></div>
<div cor="true" class="div verde"></div>
<div class="cor-escolhida"></div>

Answer 2

I don’t know if I got it right, but I think you’re putting together the layout of your site through tables? If that is the case I advise you not to continue in this way, we use the concept that tables are to make tables :) that such?

I created here 10 divs 5 with color background and 5 with image background. I am using Jquery that changes the background of div class='resultado' by the same background of div that was clicked. ` Note that only 1 line of code already solves the exchange.

$('.pad').on('click', function(){

  $('.resultado').css('background', $(this).css('background'));
  
});

.pad{

  width: 100px;
  height: 100px;
  display: inline-block;
}


.resultado{
  width: 500px;
  height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pad' style='background-color: red'>

</div>
<div class='pad' style='background-color: pink'>

</div>
<div class='pad' style='background-color: orange'>

</div>
<div class='pad' style='background-color: blue'>

</div>
<div class='pad' style='background-color: gray'>

</div>
<br>
<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjDTixrnTBJkS5W8sVP8nUbqAI0Q0A1EivmZ6ebjBoxqliLVnc")'>

</div>

<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiFIvETpnGCxMpLfIClByX3CoNj1CLUXZECUNkDX6ktHpqhSq1")'>

</div>

<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScprXKYMyyAiep-_dpYdu6lcVNMn6v_IFoQJCCIfeZf-sJMjrIXQ")'>

</div>

<div class='pad' style='background: url("http://www.meapaixonei.com.br/wp-content/uploads/2016/07/conheca-10-curiosidades-sobre-o-sorriso.jpg")'>

</div>

<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6gBy5fsABIPzfEOZpVYBrMICap1JdADWxDGjPMF40Gn6j4ZEJ")'>

</div>

<div class='resultado'>

</div>

Remarks

• The style shown is not inside a table or something, but note that when applying logic, wherever this method should work.

• The images are repeated in div class='resultado', if the image is too small. This is space for another question. But here I leave before hand a link so that you can deal with this problem if necessary.

Background-wise
Perfect Full Page Background Image (The famous hand on the wheel)

Answer 3

Hello, I made a basic example using jquery.

https://jsfiddle.net/telizpablo/5rfn0kbp/3/

in the attribute data-color you define the color that that div will transform to table2 (can be HEX too ) ;)

I hope I’ve helped.

Answer 4

<script>
    $(function () {
        $('#suaTabela td div.fundo').click(function () {
            $('#tabelaAlvo').css('background', $(this).css('background'));
            //ou
            salvaBanco();
            //ou            
            window.location.href = 'www.meusite.com/index.php?cor=' + $(this).css('background');
        });
    });
</script>
<table id="suaTabela">
    <tr>
        <td height="351" valign="top" align="center">
            <div class="fundo"></div>
            <div class="fundo"></div>
            <div class="fundo"></div>
            <div class="fundo"></div>
            <div class="fundo"></div>
        </td>
    </tr>
</table>

In the function "salvaBanco();" you must use AJAX (https://www.w3schools.com/xml/ajax_intro.asp) to save to the bank without reloading the page;

If you cannot use AJAX, you will have to submit some form using POST method and taking the value via PHP $_POST["color"].

If you also cannot use the POST method, you can use Javascript to redirect the page to itself using parameter (Querystring) and using $_GET["color"] to save to the bank;

/*código PHP localizado na parte superior da index.php citado no exemplo */
<?php
    if(isset($_GET["cor"])){
        GravaNoBanco($_GET["cor"]);
    }
?>