Suppression de colonne d'un tableau html en javascript

**moucharraf** · 26/01/2013, 13h59

Bonjour,
j'ai un tableau en html et je veux ecrire un script qui fera les modification suivantes:
Si je clique sur une cellule de la première ligne è je supprime sa colonne complète
du tableau
Si je clique sur une cellule de la première colonne è je supprime sa ligne complète
du tableau
Si je clique sur la première cellule du tableau è aucune action
Si je clique en dehors de la colonne 1 et ligne 1 è aucune action
comme je suis debutant je sais pa par ou commencer?
mon probléme c"est que le tableau est en HTML
j'arrive pas à lui appliquer la fonction suppression

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
38
39
40
41
42
43
44
45
46
<!DOCTYPE html> 
<html> 
<head> 
<style> table { width:400px } td { background-color:lightgrey; text-align:center } </style>
 <script type='text/javascript' src='test.js'> 
 
function suppressionL(ligne) 
{ 
document.getElementById('tableau').deleteRow(ligne.rowIndex); 
 
//Recomptage des lignes... 
var tableau = document.getElementById('tableau'); 
var trs = tableau.rows; 
var n = trs.length; 
var i; 
 
alert(n); 
for (i=1; i<n; i++) //on commence à 1 et non à 0 ;) 
{ 
trs[i].cells[0].innerHTML = trs[i].rowIndex; 
} 
} 
</script> 
</head> 
<body> 
Mon premier tableau 
<table name= "tableau" id="tableau" > 
<tr><td>A</td><td><input type="button" value="E" onclick="supressionL()"></td><td><input type="button" value="C" onclick="supressionC()"></td><td><input type="button" value="D" onclick="supressionC()"></td><td><input type="button" value="E" onclick="supressionC()" ></td></tr>
 <tr><td>F <input type="button" value="F" onclick="supressionL()"> </td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
 <tr><td><input type="button" value="K" onclick="supressionL()" ></td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
 <tr><td><input type="button" value="P" onclick="supressionL()" ></td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
 <tr><td><input type="button" value="U" onclick="supressionL()" ></td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
 <tr><td colspan='4'><input type="button" value="..." onclick="supressionL()" ></td><td>Z</td></tr>
 </table> 
Mon second tableau 
<table> 
<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr> 
<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr> 
<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr> 
<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr> 
<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr> 
<tr><td colspan='4'>...</td><td>Z</td></tr> 
</table> 
 
</body> 
</html>

merci d'avance pour votre aide

**SpaceFrog** · 26/01/2013, 14h18

comme je suis debutant je sais pa par ou commencer?

Par une petite recherche sur le forum ?

http://www.developpez.net/forums/d13...ml-javascript/

**moucharraf** · 26/01/2013, 16h24

bonjour,
en faite ca ne repond pas a ma question ,moi je veux supprimer des ligne et des colonne en cliquant sur la premiere cellule(dune ligne ou d'une colonne)

mais mon code ne marche pas deja pour les ligne

merci pour tes suggestion

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
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head> 
	<style> table { width:400px }  td { background-color:lightgrey; text-align:center } </style> 
	<script type='text/javascript' src='test.js'>
   <script
	function suppression(ligne)
{
 
  //var nb = document.getElementById('tableau').rows.length;
  //document.getElementById('tableau').deleteRow(-1);
 
  document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
  //Recomptage des lignes...
  var tableau = document.getElementById('tableau');
  var trs = tableau.rows;
  var n = trs.length;
  var i;
 
  for (i=1; i<n; i++) //on commence à 1 et non à 0 ;)
  {
    trs[i].cells[0].innerHTML = trs[i].rowIndex;
  }
 
}
function doSuppr(row) {
      return function() {
            suppression(row);
      };
 
</script>
</script>
</head>
<body>
	Mon premier tableau
	<table  name= "tableau" id="tableau" >
		<tr ><td>A</td><td><input type="button" value="E" onclick="supressionL()"></td><td><input type="button" value="C" onclick="supressionC()"></td><td><input type="button" value="D" onclick="supressionC()"></td><td><input type="button" value="E" onclick="supressionC()" ></td></tr>
		<tr ><td><input type="button" value="F" onclick=" doSuppr(ligne)"> </td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
		<tr><td><input type="button" value="K" onclick="doSuppr(ligne)" ></td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
		<tr><td><input type="button" value="P" onclick="doSuppr(ligne) " ></td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
		<tr><td><input type="button" value="U" onclick="doSuppr(ligne)" ></td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
		<tr><td colspan='4'><input type="button" value="..." onclick="  suppressionL()" ></td><td>Z</td></tr>
	</table>
	Mon second tableau
	<table>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
		<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
		<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
		<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
		<tr><td colspan='4'>...</td><td>Z</td></tr>
	</table>	
 
</body>
</html>

**javatwister** · 26/01/2013, 17h39

hello, joyeux débutant!

ton projet est un peu dangereux si d'un simple clic accidentel, tu veux virer un grand nombr de données!

pour plus de légèreté de programmation, je te conseille de réaliser un tableau à base de listes <ul> et de lignes "<li>";
essaie déjà ça et tu verras comment c'est facile de piloter ton "tableau";

**moucharraf** · 26/01/2013, 18h54

en faite c'est un test ,et ils demandent de faire ça ainsi

j'ai toujours le problème avec les lignes

merci pour ton aide

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
<!DOCTYPE html>
<html>
<head> 
	<style> table { width:400px }  td { background-color:lightgrey; text-align:center } </style> 
 
	<script  type='text/javascript'
        function supprimerLigne(num)
         {    document.getElementById("tableau").deleteRow(num); 
           ></script>		
</head>
<body>
	Mon premier tableau
	<table id="tableau" >
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
		<tr><td colspan='4' onclick="supprimerLigne(this.parentNode.rowIndex);">>...</td><td>Z</td></tr>
	</table>
	Mon second tableau
	<table>
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td>F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
		<tr><td>K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
		<tr><td>P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
		<tr><td>U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
		<tr><td colspan='4'>...</td><td>Z</td></tr>
	</table>	
</body>
</html>

**sekaijin** · 27/01/2013, 12h13

pourqui se compliquer la vie alors que tu as une référence sur l'objet que tu veux supprimer

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
<!DOCTYPE html>
<html>
<head> 
  <script  type='text/javascript'>
  function supprimerLigne(ligne) {
    ligne.parentNode.removeChild(ligne)
    return false;
  }
  </script>		
</head>
<body>
	Mon premier tableau
	<table id="tableau" >
		<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>
		<tr><td onclick="return supprimerLigne(this.parentNode);">F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
		<tr><td onclick="return supprimerLigne(this.parentNode);">K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
		<tr><td onclick="return supprimerLigne(this.parentNode);">P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
		<tr><td onclick="return supprimerLigne(this.parentNode);">U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
		<tr><td colspan='4' onclick="return supprimerLigne(this.parentNode);">...</td><td>Z</td></tr>
	</table>

A+JYT

**moucharraf** · 27/01/2013, 14h04

j"ai resolu le probleme des lignes ,
mon probleme maintenant vient des cellules fusionnées,quand j'essaye de supprimer une colonne il faudra diminuer le colspan pour la derniere ligne et je sais pas comment s'est prendre?

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
<!DOCTYPE html>
<html>
<head> 
	<style> table { width:400px }  td { background-color:lightgrey; text-align:center } </style> 
 
	<script  type='text/javascript' src='test0.js'></script>		
</head>
<body>
	Mon premier tableau
	<table id="tableau">
		<tr><td>A</td><td onclick="supprimerColonne(this.cellIndex);">B</td><td onclick="supprimerColonne(this.cellIndex);">C</td><td onclick="supprimerColonne(this.cellIndex);">D</td><td onclick="supprimerColonne(this.cellIndex);">E</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">F</td><td>G</td><td>H</td><td>I</td><td>J</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">K</td><td>L</td><td>M</td><td>N</td><td>O</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">P</td><td>Q</td><td>R</td><td>S</td><td>T</td></tr>
		<tr><td onclick="supprimerLigne(this.parentNode.rowIndex);">U</td><td>V</td><td>W</td><td>X</td><td>Y</td></tr>
		<tr><td colspan='4' onclick="supprimerLigne(this.parentNode.rowIndex);">...</td><td>Z</td></tr>
	</table>
</body>
</html>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function supprimerColonne(num){
                      var arrayLignes = document.getElementById("tableau").rows;
					   num_col= 4;
 
                        for (var i=0;i<5; i++){
 
                       arrayLignes[i].deleteCell(num);						
                         }
					  arrayLignes[5].deleteCell(num % 4); 	 
						}  
function supprimerLigne(num){    document.getElementById("tableau").deleteRow(num);}

Suppression de colonne d'un tableau html en javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager