Ajout et suppression dynamique des textbox avec JavaScript en ASPx.

**zakarinalaw** · 12/02/2014, 23h07

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 :

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
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 :

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
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>