Change background of a table

Here's a simple example for you to modify and use to solve your problem.

Explanation:

  

The colors of each div are set to 'BACKGROUND' in your case as   will be image will probably use 'background-image', independent   how to do it needs to modify in the click event which attribute   you want to get the div that received the click to pass to general div,   or table, or any element. Note that I added the click event   in [color] an attribute that I set in all the divs 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><divcor="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>

I do not know if I understand correctly, but I think you're setting up your site layout through tables? If that's the way I advise you not to continue this way, we use the concept of what tables are to do tables :) what's that?

I created here 10% with% 5 with colored background and 5 with background of images. I'm using Jquery which switches divs from background to same div class='resultado' from background that was clicked. ' Note that only 1 line of code already resolves 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><divclass='pad'style='background-color:red'></div><divclass='pad'style='background-color:pink'></div><divclass='pad'style='background-color:orange'></div><divclass='pad'style='background-color:blue'></div><divclass='pad'style='background-color:gray'></div><br><divclass='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>

Notes

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

• Images repeat in div , if the image is too small. That's room for another question. But I leave here before hand a link so that you can handle this problem if you need to.

About background
#

Hello, I made a basic example using jquery.

link

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

I hope I have helped.

<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 "SavedBank ()" function; you should use AJAX ( link ) to write to the bank without reloading the page;

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

If you can not use the POST method either, you can use JavaScript to redirect the page to itself using parameter (QueryString) and using $ _GET ["color"] to save to the database;

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