Ajout et suppression dynamique des textbox avec JavaScript en ASPx.

Bonsoir,

Je reviens vers vous les pros,

Mon souci cette fois-ci est le scénario suivant :

J'ai une page crée en php qui me crée des textboxs dynamiquement. jusqu'au ça marche impeccable, mon code est écrit en JS plus une simple balise <table></table>, et d’auprès mes connaissances un code JS doit être fonctionnel aussi dans une page ASPx, JSP ou n'importe quel langage web, alors que ce n'est pas le cas pour mon cas :)

Ma page php est construite comme suite :

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
110
111
112
113
114
115
116
117
118
119
120
121
122
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
 
<SCRIPT language="javascript">
function addRow(tableID) 
{
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
//alert(rowCount); 
 
            for(var i=0; i<colCount; i++) 
			{
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) 
				{
                    case "text":
                          //  newcell.childNodes[0].value = "";
                            newcell.childNodes[0].id = "id_txt_articles_"+(rowCount+1);
 
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
}
 
function deleteRow(tableID) 
{
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            for(var i=0; i<rowCount; i++) 
			{
              var row = table.rows[i];
              var chkbox = row.cells[2].childNodes[0];
 
                if(null != chkbox && true == chkbox.checked) 
				{
                    if(rowCount <= 1) 
					{
                        alert("Attention, vous ne pouvez pas supprimer toutes les lignes");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
            }
            }catch(e) {
                alert(e);
            }
}
</SCRIPT>
 
</head>
 
<body>
 
<div align="center">    
 
<TABLE  width="650px" >
<TR>
    <TD width="550px" align="left"> 
              <label id="id_art_modif">   </label>
    Articles</TD> 
    <TD> Quant. </TD>
    <TD>&nbsp; </TD>
</TR>        
</TABLE>
 
 
<TABLE id="dataTable" width="650px">
 
<TR>
 
<TD width="550px"><INPUT type="text" name="txt_articles[]" style="width:550px"/></TD>
<TD width="550px"><INPUT type="text" name="txt_qt[]" style="width:50px"/></TD>
<TD><INPUT type="checkbox" name="chk"/></TD>
 
</TR>
</TABLE>
 
<TABLE  width="650px" >
        <TR>
            <TD width="550px" align="left"> 
 
		<label id="id_lab_ajout_art" style="display:block">
            <a href="#" onClick="addRow('dataTable')"> Ajouter des articles </a>
        </label>    
 
            </TD> 
 
 
            <TD>  
            <a href="#" onClick="deleteRow('dataTable')"> Supprimer </a>
            </TD>
        </TR>
</TABLE>
 
</div> 
 
 
</body>
</html>

Et mon code dans la page ASPx et le suivant :

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
110
111
112
113
 
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans titre</title>
    <script language="javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            //alert(rowCount); 
 
            for (var i = 0; i < colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch (newcell.childNodes[0].type) {
                    case "text":
                        //  newcell.childNodes[0].value = "";
                        newcell.childNodes[0].id = "id_txt_articles_" + (rowCount + 1);
 
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
                }
            }
        }
 
 
        function deleteRow(tableID) {
            try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                for (var i = 0; i < rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[2].childNodes[0];
 
                    if (null != chkbox && true == chkbox.checked) {
                        if (rowCount <= 1) {
                            alert("Attention, vous ne pouvez pas supprimer toutes les lignes");
                            break;
                        }
                        table.deleteRow(i);
                        rowCount--;
                        i--;
                    }
                }
            } catch (e) {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <div align="center">
        <table width="650px">
            <tr>
                <td width="550px" align="left">
                    <label id="id_art_modif">
                    </label>
                    Articles
                </td>
                <td>
                    Quant.
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
        <table id="dataTable" width="650px">
            <tr>
                <td width="550px">
                    <input type="text" style="width: 550px" />
                </td>
                <td width="550px">
                    <input type="text" style="width: 50px" />
                </td>
                <td>
                    <input type="checkbox" name="chk" />
                </td>
            </tr>
        </table>
        <table width="650px">
            <tr>
                <td width="550px" align="left">
                    <label id="id_lab_ajout_art" style="display: block">
                        <a href="#" onclick="addRow('dataTable')">Ajouter des articles </a>
                    </label>
                </td>
                <td>
                    <a href="#" onclick="deleteRow('dataTable')">Supprimer </a>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

Je ne comprends pas pourquoi ca ne marche pas :?

Merci de m'aider SVP ,