Suppression de colonne d'un tableau html en javascript

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

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, 13h18

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, 15h24

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, 16h39

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, 17h54

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, 11h13

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, 13h04

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

Discussions similaires

Partager

Partager