Forum « Re: Récup valeur d'un tableau »

Forum « Programmation Javascript » (archives)

Re: Récup valeur d'un tableau

Envoyé: 26 juillet 2004, 5h54 par Hack_Track

Salut,

je suppose que tu ouvres une fenêtre popup depuis ta page principale, que l'utilisateur doit cliquer sur une ligne du tableau dans la fenêtre popup puis que la fenêtre popup doit se refermer et que les champs correspondants du fromulaire de la page principale doivent être remplis avec les données contenues dans la ligne sélectionnée dans le popup.

Si c'est bien cela, voici la solution:

Crée un fichier "main.html" qui contient le code suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Untitled</title>
<style>
body{
font-family: Verdana, Arial, Times;
}
table,tr{
background-color: #8888ff;
}
th{
background-color: #9999ff;
color: #eeeeee;
padding: 6 8 6 8;
}
td{
background-color: #aaaaff;
padding: 4 8 4 8;
}
</style>
<script language="javascript" type="text/javascript">
var w = null;
function selectPerson(){
w = window.open('popup.html','','toolbar=no,scrollbar=no,titlebar=no,width=150,height=120');
}
function closePopup(selNumber, selFirstname){
document.getElementsByName("number")[0].value=selNumber;
document.getElementsByName("firstname")[0].value=selFirstname;
w.close();
}
</script>
</head>

<body>

<button onclick="selectPerson();">Sélectionnez<br>une personne</button>
<form action="" method="POST">
<table>
<tr>
<td>Numéro:</td>
<td><input id="number" name="number" type="text" size="4" ></td>
</tr>
<tr>
<td>Prénom:</td>
<td><input id="firstname" name="firstname" type="text" ></td>
</tr>
</form>

</body>
</html>

Crée un fichier "popup.html" (en respectant scrupuleusement ce nom et la casse) et copies-y le code suivant:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
<title>Untitled</title>
<style>
body{
padding: 0 0 0 0;
margin: 0 0 0 0;
font-family: Verdana, Arial, Times;
}
table,tr{
background-color: #8888ff;
}
th{
background-color: #9999ff;
color: #eeeeee;
padding: 6 8 6 8;
}
td{
background-color: #aaaaff;
padding: 4 8 4 8;
}
</style>
<script language="javascript" type="text/javascript">
var rowClicked = null;

function setTrOnclick(){
elms = document.getElementsByTagName("tr");
for(i=0 ; i<elms.length ; i++){
elms[i].onclick=clickRow;
}
}

function clickRow(){
var d1=this.children[0].innerHTML;
var d2=this.children[1].innerHTML;
window.opener.closePopup(d1,d2);
}
</script>
</head>

<body onload="setTrOnclick();">
<table>
<tr>
<th>N°</th>
<th>Prénom</th>
</tr>
<tr onclick="">
<td>127</td>
<td>Philippe</td>
</tr>
<tr>
<td>458</td>
<td>Laurent</td>
</tr>
<tr>
<td>1259</td>
<td>Guido</td>
</tr>
</table>

</body>
</html>

Sauve ces deux fichiers et teste-les en lançant le fichier "main.html"

;-)
HackTrack