Ik ben bezig met een dynamisch formulier in javascript. Door middel van een "+" of "-" knopje kan de gebruiker meer criteria toevoegen om zo zelf een query in elkaar te zetten, zonder hard te coderen. In Firefox op de mac en Internet Explorer op de pc doet ie het zonder enige moeite!
Maar Safari doet moeilijk! In plaats van nieuwe rijen onder de bestaande rijen te zetten, zet ie ze erboven! Weet iemand hoe dit op te lossen is? Ik vind het heel vreemd...
Dit is de link
Code:
Maar Safari doet moeilijk! In plaats van nieuwe rijen onder de bestaande rijen te zetten, zet ie ze erboven! Weet iemand hoe dit op te lossen is? Ik vind het heel vreemd...
Dit is de link
Code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Dynamic form</title>
<script>
function correctButtons(tableData){
for(var j = 0; j < tableData.rows.length; j++) {
// for every row set last cell to display *only* remove button //
// except for the top row //
// that should be emptied... //
var topRow = tableData.rows['0'].cells['5'];
topRow.innerHTML = "";
// refer to the last cell in the row //
var p = tableData.rows[j].cells['5'];
if(j>0){
// if not the first row, include a 'remove'-button //
p.innerHTML = "<input type='button' onclick='removeRow(eval(this.parentNode).parentNode.rowIndex)' value='-' />";
}
}
// end of loop //
if(tableData.rows.length==1){
// if there is only one row //
// make sure you can add another!! //
tableData.rows['0'].cells['5'].innerHTML = "<input type='button' onclick='addRow()' value='+' />";
}
for(var i=0;i< tableData.rows.length;i++){
// add some numbering to the rows //
var foo = tableData.rows[i].cells['0'];
foo.innerHTML = i;
if(i==(tableData.rows.length-1)&&i!=0){
// include an 'add'-button to the last row //
tableData.rows[i].cells['5'].innerHTML += "<input type='button' onclick='addRow()' value='+' />";
}
}
}
function removeRow(target){
// to remove a row //
var tableData = document.getElementById('tableBody');
var remove = tableData.deleteRow(target);
correctButtons(tableData);
}
function addRow(){
// to add a row //
var tableData = document.getElementById('tableBody');
newRow = tableData.insertRow(tableData.rows.length);
v = newRow.insertCell(0);
w = newRow.insertCell(1);
x = newRow.insertCell(2);
y = newRow.insertCell(3);
z = newRow.insertCell(4);
xyz = newRow.insertCell(5);
w.innerHTML += "<select name=''><option value='AND'>AND</option><option value='OR'>OR</option></select>";
x.innerHTML = "<select name='key_type[]'><option value='key_type[]'>blah1</option><option>blah2</option></select>";
y.innerHTML = "<select name='operator[]'><option value=\"=\">=</option>\n<option value=\">\">></option>\n<option value=\"<\"><</option><option value=\"LIKE\">LIKE</option></select>";
z.innerHTML = "<input type='text' name='key' value='key[]' size='10' />";
xyz.innerHTML = "<input type='button' onclick='removeRow(eval(this.parentNode).parentNode.sectionRowIndex)' value='-' />";
xyz.innerHTML += "<input type='button' onclick='addRow()' value='+' />";
correctButtons(tableData);
}
</script>
</head>
<body>
<table border="1" id="tableBody">
<tr>
<td>1</td>
<td>______</td>
<td>
<select name="key_type[]">
<option value="key_type[]">Naam</option>
<option value="">Adres</option>
</select>
</td>
<td>
<select name='operator[]'>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
<option value="LIKE">LIKE</option>
</select>
</td>
<td>
<input type='text' name='key' value='key[]' size='10' />
</td>
<td>
<input type='button' value='+' onclick='addRow();' />
</td>
</tr>
</table>
</body>
</html> |
/u/107051/jeroenmadtrix60.png?f=community)
:strip_exif()/u/39521/icoon.gif?f=community)
:strip_exif()/u/26373/anim4.gif?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}