11548 sujets

JavaScript, DOM et API Web HTML5

Supprimer le border-bottom de la dernière ligne d'un tableau

Encore une fois tout est dans le titre !

code de la css : 
.table {
 border : 1px solid red;
}

.table td{
 border-bottom : 1px solid black;
}


code de ma page html :
<html>
<head>
    <link rel="stylesheet" href="./test3.css" type="text/css" media="screen" />
</head>

<body>
   <table cellpadding="0" cellspacing="0" class="table" id="table">
	<tr>
		<td>1</td><td>1</td>
	</tr>
	<tr>
		<td>2</td><td>2</td>
	</tr>
	<tr>
		<td>3</td><td>3</td>
	</tr>
	<tr>
		<td>4</td><td>4</td>
	</tr>
	<tr>
		<td>5</td><td>5</td>
	</tr>
	<tr>
		<td>6</td><td>6</td>
	</tr>
   </table>


<script type="text/javascript">
var tab = document.getElementById('table');
var listeLigne = tab.getElementsByTagName('TR');
var listeCell  = listeLigne[listeLigne.length-1].getElementsByTagName('TD');
for(var i=0;i<listeCell.length;i++)
{
	listeCell[ i].borderBottom='0px';
}


</script>
</body>

</html>



quelqu'un pourrait me dire pkoi ça marche pas ? Smiley confused

merci
Modifié par PoichOU (12 Dec 2005 - 13:41)
pourquoi n'essaierais-tu pas de mettre un style particulier rien pour la dernière ligne

...<tr><td class="derniere_ligne">...


??
c'est un peu compliqué ce que je veux faire : en fait il y a un traitement itératif qui crée le tableau et je n'ai pas moyen de connaitre le nombre de ligne ni savoir à quel moment je crée la dernière ligne.

Je cherche donc un moyen javascript (ou CSS) pour que la dernière ligne ne soit pas soulignée.

Smiley rolleyes
Bonjour,
En admettant que la variable table contient l'élément DOM représentant ta table, tu peux certainement faire :


table.rows[table.rows.length -1].style.borderBottom = "none 0px transparent";
voici le code avec ce que tu as dis mais ça ne marche pas plus ! (même si c'est vrai que ta façon de récupérer la dernière ligne est beaucoup mieux)

<html>
<head>
    <link rel="stylesheet" href="./test3.css" type="text/css" media="screen" />
</head>

<body>
   <table cellpadding="0" cellspacing="0" class="table" id="table">
	<tr>
		<td>1</td><td>1</td>
	</tr>
	<tr>
		<td>2</td><td>2</td>
	</tr>
	<tr>
		<td>3</td><td>3</td>
	</tr>
	<tr>
		<td>4</td><td>4</td>
	</tr>
	<tr>
		<td>5</td><td>5</td>
	</tr>
	<tr>
		<td>6</td><td>6</td>
	</tr>
   </table>


<script type="text/javascript">
var table = document.getElementById('table');
table.rows[table.rows.length-1].style.borderBottom = "none 0px transparent";
</script>
</body>

</html>
Alors on va le faire séparément. Normalement, on peut manipuler les bordeures avec borderXXXSTyle, borderXXXSize et borderXXXColor.


var o = table.rows[table.rows.length -1];
o.style.borderBottomStyle = 'none';
o.style.borderBottomSize = 0;
o.style.borderBottomColor = "#ffffff";
Sujet clos
Aller à