Javascript-LabAssign/Dynamic Table.html at main · hackingwithabhishek/Javascript-LabAssign · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dynamic Table</title>
</head>
<body>
    <h1>Dynamic Table</h1>
    <lable>Create/Delete Row Button : </lable>
    <input type="button" id="btn" value="Create Row" onclick="change()"/><br><br>
    <table border="2px" id="tbl">
        <tr>
			<th>Employee Name</th>
			<th>Phone</th>
			<th>Department</th>
			<th>Gender</th>
		</tr>
		<tr>
			<td id="col0"><input type="text" name="empname[]" value="" /></td>
			<td id="col1"><input type="text" name="phone[]" value="" /></td>
			<td id="col2">
			<select name="department[]" id="dept">
			<option value="0">Select Department</option>
			<option value="1">Sales</option>
			<option value="2">IT</option>
			<option value="3">Warehouse</option>
			</select>
		        </td>
		        <td id="col3">
			<input type="radio" name="gender[0]" value="male" />Male
			<input type="radio" name="gender[1]" value="female" />Female
		        </td>
		</tr>
    </table>
    <script>
        function change()
        {   var a = document.getElementById("btn").value;
            if(a == "Create Row")
            {
                document.getElementById("btn").value = "Delete Row";
                addRows();
            }
            else
            {
                if(a == "Delete Row")
                {
                    document.getElementById("btn").value = "Create Row";
                    deleteRows();
                }
            }
        }

        function addRows(){
            var table = document.getElementById('tbl');
            var rowCount = table.rows.length;
            var cellCount = table.rows[0].cells.length;
            var row = table.insertRow(rowCount);
            for(var i =0; i <= cellCount; i++){
                var cell = 'cell'+i;
                cell = row.insertCell(i);
                var copycel = document.getElementById('col'+i).innerHTML;
                cell.innerHTML=copycel;
                if(i == 3){
                    var radioinput = document.getElementById('col3').getElementsByTagName('input');
                    for(var j = 0; j <= radioinput.length; j++) {
                        if(radioinput[j].type == 'radio') {
                            var rownum = rowCount;
                            radioinput[j].name = 'gender['+rownum+']';
                        }
                    }
                }
            }
        }

        function deleteRows(){
            var table = document.getElementById('tbl');
            var rowCount = table.rows.length;
            if(rowCount > '2'){
                var row = table.deleteRow(rowCount-1);
                rowCount--;
            }
            else{
                alert('There should be atleast one row');
            }
        }

    </Script>
</body>
</html>