Comment déplacer le contenu d'un td vers un autre td

**chris52** · 27/06/2016, 12h07

Bonjour à tous,

Je souhaiterais comme le titre le dit, déplacer le contenu d'un td ver un autre.

Pour l'instant j'ai fais ceci :

HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<table class="search">
  <tbody>
    <tr id="search_line">
      <tpl:block id="initiator_search">
        <td width="100" class="field">
          <label for="id_id_third">
            <tpl:locale_initiator/>
          </label>
          <select id="id_id_third" name="id_third" class="fixed">
            <tpl:join>
              <tpl:block id="initiator_block"><option value="<tpl:value/>" <tpl:block id="initiator_selected">selected</tpl:block>><tpl:name/></option></tpl:block>
            </tpl:join>
          </select>
        </td>
      </tpl:block>
      <tpl:block id="contract_search">
        <td width="100" class="field">
          <label for="id_id_contract" id="contract_field" style="visibility:hidden;">
            <tpl:locale_contract/>
          </label>
          <select id="id_id_contract" name="id_contract" class="fixed">
            <tpl:join>
              <tpl:block id="contract_block"><option value="<tpl:value/>" <tpl:block id="contract_selected">selected</tpl:block>><tpl:name/></option></tpl:block>
            </tpl:join>
          </select>
        </td>
      </tpl:block>
      <td>
        <label>&nbsp;</label>
        <INPUT class="button" type="submit" value="<tpl:locale_search/>" name="simple_search"/>
      </td>
      <td class="advanced_search">
        <tpl:block id="reset_block">
          <div class="reset">
            <A href="<tpl:reset_url/>">
              <tpl:locale_reset/>
            </A>
          </div>
        </tpl:block>
      </td>
    </tr>
  </tbody>
</table>

JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
$(document).ready(function()
{
	document.getElementById('contract_field').style.visibility= 'hidden';
	document.getElementById('id_id_contract').style.visibility= 'hidden';
 
 $("#id_id_third").change(function()
   {
   	Show_Contracts();
    });
});
 
function Show_Contracts() 
{ 
	if($('#id_id_third').val() != "")
	{
		document.getElementById('contract_field').style.visibility= 'visible';
		document.getElementById('id_id_contract').style.visibility= 'visible';
	}
	else
	{
		document.getElementById('contract_field').style.visibility= 'hidden';
		document.getElementById('id_id_contract').style.visibility= 'hidden';
 
	}    
}

En fait je cache ma deuxieme cellule si je n'ai pas utilisé mon select, si je choisi une option sur mon select, la j'affiche ma deuxieme cellule qui contiendra un deuxieme select.

Mon problème est que si je cache ma deuxieme cellule, mon bouton rechercher reste en 3 eme cellule et donc il y a un trou entre mon select et mon bouton rechercher.
Comment faire pour ne plus avoir ce trou ?

**NoSmoking** · 27/06/2016, 14h54

Bonjour,
si tu souhaites que l'on puisse faire un minimum de test pour t'aider il te faut mettre le code HTML généré, cela aiderait de plus à comprendre ton problème car pour l'heure !!!

Un remarque en passant, lorsque l'on utilise jQuery on l'utilise en plein donc exit tes document.getElementById

**chris52** · 27/06/2016, 15h03

Voici le code html généré:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<table class="search">
<tbody>
<tr id="search_line">
<td width="100" class="field">
<label for="id_id_third">Initiateur</label>
<select id="id_id_third" name="id_third" class="fixed">
<option value="" ></option><option value="Mjg" >acolyance</option><option value="MTY1" >Cap Seine</option><option value="MjI3" >Coopérative NORIAP</option><option value="Mw" >Dijon Céréales</option><option value="MjI4" >GRAP SA</option><option value="MjMw" >SEMENCES FOURRAGÈRES DE PICARDIE</option><option value="MTcw" >Sévepi</option><option value="NA" >VIVESCIA</option>
</select>
</td>
<td width="100" class="field">
<label for="id_id_contract" id="contract_field" style="visibility:hidden;">Contrat SMAG</label>
<select id="id_id_contract" name="id_contract" class="fixed">
<option value="" ></option><option value="MzYy" >1</option><option value="Mzgx" >2</option><option value="Mzgy" >3</option><option value="Mzgz" >4</option><option value="Mzg0" >5</option>
</select>
</td>
<td>
<label>&nbsp;</label>
<INPUT class="button" type="submit" value="Rechercher" name="simple_search"/>
</td>
<td class="advanced_search">
</td>
</tr>
</tbody>
</table>

**danielhagnoul** · 27/06/2016, 23h11

Mon problème est que si je cache ma deuxieme cellule, mon bouton rechercher reste en 3 eme cellule et donc il y a un trou entre mon select et mon bouton rechercher.
Comment faire pour ne plus avoir ce trou ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<table class="search">
  <tbody>
    <tr id="search_line">
      <td width="100" class="field">
        <label for="id_id_third">Initiateur</label>
        <select id="id_id_third" name="id_third" class="fixed">
          <option value="" ></option>
          <option value="Mjg" >acolyance</option>
          <option value="MTY1" >Cap Seine</option>
          <option value="MjI3" >Coopérative NORIAP</option>
          <option value="Mw" >Dijon Céréales</option>
          <option value="MjI4" >GRAP SA</option>
          <option value="MjMw" >SEMENCES FOURRAGÈRES DE PICARDIE</option>
          <option value="MTcw" >Sévepi</option>
          <option value="NA" >VIVESCIA</option>
        </select>
      </td>
      <td width="100" class="field">
        <label for="id_id_contract">Contrat SMAG</label>
        <select id="id_id_contract" name="id_contract" class="fixed">
          <option value="" ></option>
          <option value="MzYy" >1</option>
          <option value="Mzgx" >2</option>
          <option value="Mzgy" >3</option>
          <option value="Mzgz" >4</option>
          <option value="Mzg0" >5</option>
        </select>
      </td>
      <td>
        <label>&nbsp;</label>
        <input class="button" type="submit" value="Rechercher" name="simple_search"/>
      </td>
      <td class="advanced_search">
      </td>
    </tr>
  </tbody>
</table>

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$( function(){
 
  let
    jObjThird = $( '#id_id_third' ),
    jObjContract = $( '#id_id_contract' ),
    jObjContractTD = jObjContract.parents( 'td' );
 
  jObjContractTD.css( 'display', 'none' );
 
  jObjThird.on( 'change', function(){
    if( jObjThird.val() != "" ){
      jObjContractTD.css( 'display', 'block' );
    } else {
      jObjContractTD.css( 'display', 'none' );
    }    
  });
 
});

**chris52** · 28/06/2016, 09h50

Bonjour danielhagnoul,

C'est exactement ce que je cherchais, du coup j'ai modifié mon javascript je n'ai plus besoin de changer la visibilité, j'ai seulement besoin de la fonction que tu m'as donné.

Par contre à la place de display block j'ai mis un display table-cell pour que l'affichage soi optimum.

Voici la fonction pour ceux que ça peut aider:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$( function(){
 
			var jObjThird = $( '#id_id_third' );
			var jObjContract = $( '#id_id_contract' );
			var jObjContractTD = jObjContract.parents( 'td' );
 
			jObjContractTD.css( 'display', 'none' );
 
			jObjThird.change(function(){
				if( jObjThird.val() != "" ){
				jObjContractTD.css( 'display', 'table-cell');
				}
				else
				{
					jObjContractTD.css( 'display', 'none');
				}  
			});
		});

Merci danielhagnoul !!

Comment déplacer le contenu d'un td vers un autre td

JavaScript

Discussions similaires

Partager

Partager