-
Notifications
You must be signed in to change notification settings - Fork 5
/
index-src.html
143 lines (132 loc) · 4.2 KB
/
index-src.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
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
<head>
<title>jQuery templates</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form>
<table id='mytable'>
<tr>
<td>Project</td>
<td>Workstage</td>
<td>Hours</td>
<td>Description</td>
</tr>
<tr>
<td></td>
<td></td>
<td><input size=3 id='total' disabled='disabled'/></td>
<td></td>
</tr>
<tr id='myrow'>
<td>
<select id="project" name="">
<option value="">Select One</option>
</select>
</td><td>
<select id="task" name="" onchange="updateText('task')">>
<option value="">Select One</option>
</select>
</td>
<td>
<select name = 'hours' onmouseup="sumInputs()">
<option>1.0</option>
<option>1.5</option>
<option>2.0</option>
</select>
<td><input type="text" value="" id="taskText" /></td>
</tr>
</table>
<input type="button" onclick="cloneRow()" value="Add Row" />
</form>
<script>
function cloneRow() {
var row = document.getElementById("myrow"); // find row to copy
var table = document.getElementById("mytable"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newID"; // change id or other attributes/contents
table.appendChild(clone); // add new row to end of table
}
function createRow() {
var row = document.createElement('tr'); // create row node
var col = document.createElement('td'); // create column node
var col2 = document.createElement('td'); // create second column node
row.appendChild(col); // append first column to row
row.appendChild(col2); // append second column to row
col.innerHTML = "qwe"; // put data in first column
col2.innerHTML = "rty"; // put data in second column
var table = document.getElementById("tableToModify"); // find table to append to
table.appendChild(row); // append row to table
}
window.sumInputs = function() {
var inputs = document.getElementsByName('hours'),
result = document.getElementById('total'),
sum = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseFloat(ip.value) || 0;
}
}
result.value = sum;
}
var myJson =
{
"listItems":[
{
"id":"1",
"project_no":"1001",
"task":[
{
"task_description":"Folding stuff",
"id":"111",
"task_summary":"Folding",
},
{
"task_description":"Drawing stuff",
"id":"222",
"task_summary":"Drawing"
}
]
},
{
"id":"2",
"project_no":"1002",
"task":[
{
"task_description":"Meeting description",
"id":"333",
"task_summary":"Meeting"
},
{
"task_description":"Administration",
"id":"444",
"task_summary":"Admin"
}
]
}
]
}
$(function(){
$.each(myJson.listItems, function (index, value) {
$("#project").append('<option value="'+value.id+'">'+value.project_no+'</option>');
});
$('#project').on('change', function(){
$('#task').html('<option value="000">-Select Task-</option>');
for(var i = 0; i < myJson.listItems.length; i++)
{
if(myJson.listItems[i].id == $(this).val())
{
$.each(myJson.listItems[i].task, function (index, value) {
$("#task").append('<option value="'+value.id+'" data-description="'+value.task_description+'">'+value.task_summary+'</option>');
});
}
}
});
});
$('#task').change(function() {
$('#taskText').val( $(this).find('option:selected').data('description') )
})
</script>
</body>