Tableau en Javascript et Html alimenté par un Input ou une liste (array).
Bonjour
Je suis un débutant en Javascript. Je souhaite créer un tableau pour analyser le jeu de la Roulette alimenté par un Input en Html /Javascript.
Le principe est le suivant : si une douzaine de numéros sortent consécutivement, disons 13, 36, 28, 2, 23, 2, 23, 7, 21, 17, 22, 10, qu'ils puissent être entrés dans un input Html et qu'à l'Onclick, ou à chaque ajout ils soient présentés verticalement dans un tableau Html de 3 colonnes:
Numéro, Rang, position. Les positions correspondent à des valeurs de type chaine de caractères, rangées dans un tableau pré-établi, correspondants à la position des numéros sur le tapis de Roulette soit ici: D2L3, D3L1, D3L3, D1L2, D2L2, D1L2, D2L2, D1L3, D2L1, D2L2, D2L3,D1L3.
J'ai essayé ceci en HTML:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <html>
<h4>Numéro : <input type ="text" name ="nnumero" id ="fname" /><br/><br/>
Rang : <input type ="text" name ="rrang" id ="lname" /><br/><br/
Position : <input type ="text" name ="pposition" id ="age" /><br/><br/>
<button onclick ="add"> Ajouter une rangée </button>
<br/>
<button onclick ="addHtmlTableRow()">Add </button>
<table id ="table">
<tr>
<th> Numéro</th>
<th>Rang</th>
<th>Position </th>
</tr></table>
</html> |
J'ai essayé cela en JAVASCRIPT :
Code:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
| <script>
var html = "<table><tr>";
var perrow = 3
// 3 cells per row
//Loop through table, add cells
}
// add Row
function addHtmlTableRow()
{
//get the table by id
var table = document.getElementById ("table"),
var newRow = table.insertRow(table.length), }
// get value from input text
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
//set the value into row cells
numero = document.getElementById ("numero").value,
rang = document.getElementById ("rang").value,
position = document.getElementById ("position").value;
Cell1.innerHTML = numero;
Cell2.innerHTML = rang;
Cell3.innerHTML = position;
// call the function to set the event to the new r
selectedRowToInput();
}
// display selected row data into input text
function selectedRowToInput ()
{
for ( var i = 0; <table.rows.length; i++)
{
table.rows[i].onclick = function ()
// get the selectedd row index
rIndex = this.rowIndex ;
console.log(rIndex) ;
document.getElementById ("numero").value =this.cells[0].innerHTML;
document.getElementById ("rang").value =this.cells[1].innerHTML;
document.getElementById ("position").value =this.cells[2].innerHTML;
};
}
selectedRowToInput();
function editHtmlTableSelectedRow () {
var numero = document.getElementById("numero").value,
var rang = document.getElementById("rang").value,
var position = document.getElementById("positin").value,
table.rows [rIndex].cells[0]. innerHTML = numero;
table.rows [rIndex].cells[1]. innerHTML = rang;
table.rows [rIndex].cells[2]. innerHTML = position;
}
// Mtethode alternative
for (var i = 0 ; i < array.length; i++ )
{
// create anew row
var newRow = table.insertRow(table.length;
for (var j = 0 ; i < table[i].length; j++ )
{
//create a new cell
var cell = newRow.insertCell[j];
// add value to the cell
cell.innerHTML = table[i][j] ;
}
}
</script> |
