-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathFinal_JS_1.html
135 lines (102 loc) · 2.92 KB
/
Final_JS_1.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
<html>
<head>
<script type="text/javascript">
var counter=2;
var glob=2;
var del=[];
var flag=0;
// This is a JS for creating and deleting textbox and table dynamically
// TODO: The code may show some random error. Testing is not done for each and every test-case
// The main special case is of first textbox deletion and addition
function remove(obj) {
//Pushing the deleted elements(numbers) in del array
del.push(Number(obj.slice(-1)));
var var1=document.getElementById(obj);
var var2=var1.previousSibling;
var var3=var2.previousSibling;
var var4=var3.previousSibling;
document.getElementById('sp1').removeChild(var1);
document.getElementById('sp1').removeChild(var2);
document.getElementById('sp1').removeChild(var3);
document.getElementById('sp1').removeChild(var4);
window.alert("removed");
}
function add(){
var foo;
// For deleted elements, use the index that has been deleted
if(del.length!=0){
glob=del[0];
flag=1;
del.shift();
}
else
{
glob=counter;
counter++;
}
foo=document.getElementById("sp1");
var ele=document.createElement("input");
ele.setAttribute("type","textbox");
ele.setAttribute("id","tb_"+glob);
var but1=document.createElement("button");
but1.setAttribute("type","button");
but1.setAttribute("id","but0_"+glob);
but1.onclick=add;
but1.innerHTML="+";
var but2=document.createElement("button");
but2.setAttribute("type","button");
but2.setAttribute("id","but1_"+glob);
// Give function arguments as well !!
but2.onclick=function() { remove(this.id); } ;
but2.innerHTML="-";
var br=document.createElement("br");
if(flag==1){
console.log("value of glob: "+glob);
var x;
x=document.getElementById("tb_"+(++glob));
console.log('inside flag ',x);
glob--;
foo.insertBefore(br,x);
foo.insertBefore(but2,br);
foo.insertBefore(but1,but2);
foo.insertBefore(ele,but1);
console.log('inside flag and added');
flag=0;
}
else{
foo.appendChild(br);
foo.appendChild(ele);
foo.appendChild(but1);
foo.appendChild(but2);
}
}
function addTable(obj){
var table=document.getElementById('my_table');
// For removing the nodes from table that has been removed dynamically
while(table.hasChildNodes())
table.removeChild(table.firstChild);
for(var i=1;i<counter;i++){
//Skip the deleted elements
if(!!(del.indexOf(i)+1))
continue;
var tr=document.createElement('tr');
var td = document.createElement('td');
var td_val=document.getElementById('tb_'+i).value;
td.appendChild(document.createTextNode(td_val));
tr.appendChild(td);
table.appendChild(tr);
}
}
</script>
</head>
<body>
<form>
<div id="sp1">
<input type="textbox" id="tb_1"><button type="button" id="but0_1" onclick=add()>+</button><button type="button" id="but1_1" onclick="remove(this.id);">-</button>
</div>
<br>
<button type="button" id="but_table" onclick="addTable();">Create Table</button>
<table id="my_table">
</form>
</body>
</html>