Tijden veranderen
JS fout in firefox en safari.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function delRow()
{
var current = window.event.srcElement;
while ( (current = current.parentElement) && current.tagName !="tr");
current.parentElement.removeChild(current);
count -= 1;
}
{
var current = window.event.srcElement;
while ( (current = current.parentElement) && current.tagName !="tr");
current.parentElement.removeChild(current);
count -= 1;
}
De buttons waar dit wordt aangeroepen staan in een tr van een tabel.
Kan iemand me vertellen wat hier anders aan moet?
window.event.srcElement en element.parentElement
Verschillende browsers gaan daar anders mee om.
.toLowerCase() ook niet vergeten. Sommige browsers gaan element.tagName in upper case zetten.
Wanneer je geen framework gebruikt, is het meestal wel zinnig om this en event mee te geven, bv. bij onclick (zie code).
Ik denk dat je dit wil bereiken
Code (php)
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
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
<head>
<script>
function delRow(current, e)
{
while ( typeof parent(current) != 'undefined') {
if (current.tagName.toLowerCase() === "tr") {
break;
}
current = parent(current);
}
parent(current).removeChild(current);
//count -= 1;
}
function parent(elm) {
return elm.parentNode // firefox
|| elm.parentElement; // IE, safari, ...
}
</script>
</head>
<body>
<table>
<tr><td>bla bla 1</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
<tr><td>bla bla 2</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
<tr><td>bla bla 3</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
<tr><td>bla bla 4</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
</table>
</body>
<script>
function delRow(current, e)
{
while ( typeof parent(current) != 'undefined') {
if (current.tagName.toLowerCase() === "tr") {
break;
}
current = parent(current);
}
parent(current).removeChild(current);
//count -= 1;
}
function parent(elm) {
return elm.parentNode // firefox
|| elm.parentElement; // IE, safari, ...
}
</script>
</head>
<body>
<table>
<tr><td>bla bla 1</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
<tr><td>bla bla 2</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
<tr><td>bla bla 3</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
<tr><td>bla bla 4</td><td><button onclick="delRow(this, event)">Klik</button></td></tr>
</table>
</body>
(merk op: frameworks zoals jQuery doen precies dit: zorgen dat alles (zo veel als mogelijk) het zelfde reageert in alle browsers)
Gewijzigd op 04/02/2013 11:44:00 door Kris Peeters
Nu is het met firefox en safari opgelost.
Maar nu doet de browser opera het niet meer.
Kan je me hier verder mee helpen?
Toch maar eens jQuery boven halen. Zoals eerder vermeld, regelt die (lastige) dingen waarvan webbrowsers vinden dat ze het anders hoeven te regelen dan de rest.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// cache elements
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
// find parent <tr> and delete it
var row = $(this).parents('tr');
$(row).remove();
});
});
</script>
</head>
<body>
<table>
<tr><td>bla bla 1</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 2</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 3</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 4</td><td><button class="delete_row">Klik</button></td></tr>
</table>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// cache elements
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
// find parent <tr> and delete it
var row = $(this).parents('tr');
$(row).remove();
});
});
</script>
</head>
<body>
<table>
<tr><td>bla bla 1</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 2</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 3</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 4</td><td><button class="delete_row">Klik</button></td></tr>
</table>
</body>
(ik veronderstel dat Opera dit ook aanvaardt)
Gewijzigd op 05/02/2013 11:31:48 door Kris Peeters
Het werkt wel, maar......
Ik heb ook een button om nieuwe rijen toe te voegen.
Nu werkt je script wel als de buttons al gemaakt zijn (dmv PHP). Maar als ik er één toevoeg met javascript, kan ik deze niet meer verwijderen, terwijl de button tag PRECIES het zelfde is.
Hieronder mijn javascript code:
Code (php)
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
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
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// cache elements
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
// find parent <tr> and delete it
var row = $(this).parents('tr');
$(row).remove();
});
});
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$.post('saveagenda.php', $("form").serialize(), function(data){
alert("De wijzigingen zijn opgeslagen.")
//alert(data);
setTimeout("location.reload(true);",20);
});
});
});
var count = 1;
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("tbody")[0];
// create row
var row = document.createElement("tr");
// create table cell 1
// create table cell 2
var td2 = document.createElement("td")
var strHtml2 = '<input type="text" name="datum[]" maxlength="10">';
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement("td")
var strHtml3 = '<input type="text" name="tijd[]" maxlength="5">';
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement("td")
var strHtml4 = '<input type="text" name="wat[]" maxlength="255">';
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 4
var td5 = document.createElement("td")
var strHtml5 = '<input type="text" name="waar[]" maxlength="255">';
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// create table cell 4
var td6 = document.createElement("td")
var strHtml6 = '<input type="text" name="wie[]" maxlength="255">';
td6.innerHTML = strHtml6.replace(/!count!/g,count);
// create table cell 4
var td7 = document.createElement("td")
var strHtml7 = '<select name="soort[]"><option value="1">Alles</option><option value="2">Optreden</option></select>';
td7.innerHTML = strHtml7.replace(/!count!/g,count);
// create table cell 5
var td8 = document.createElement('td');
td8.style.backgroundColor = "#FF0000";
var strHtml8 = '<input type="button" class="delete_row" value="Verwijder agendapunt" />';
td8.innerHTML = strHtml8.replace(/!count!/g,count);
// append data to row
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
row.appendChild(td8);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
// cache elements
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
// find parent <tr> and delete it
var row = $(this).parents('tr');
$(row).remove();
});
});
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
$.post('saveagenda.php', $("form").serialize(), function(data){
alert("De wijzigingen zijn opgeslagen.")
//alert(data);
setTimeout("location.reload(true);",20);
});
});
});
var count = 1;
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("tbody")[0];
// create row
var row = document.createElement("tr");
// create table cell 1
// create table cell 2
var td2 = document.createElement("td")
var strHtml2 = '<input type="text" name="datum[]" maxlength="10">';
td2.innerHTML = strHtml2.replace(/!count!/g,count);
// create table cell 3
var td3 = document.createElement("td")
var strHtml3 = '<input type="text" name="tijd[]" maxlength="5">';
td3.innerHTML = strHtml3.replace(/!count!/g,count);
// create table cell 4
var td4 = document.createElement("td")
var strHtml4 = '<input type="text" name="wat[]" maxlength="255">';
td4.innerHTML = strHtml4.replace(/!count!/g,count);
// create table cell 4
var td5 = document.createElement("td")
var strHtml5 = '<input type="text" name="waar[]" maxlength="255">';
td5.innerHTML = strHtml5.replace(/!count!/g,count);
// create table cell 4
var td6 = document.createElement("td")
var strHtml6 = '<input type="text" name="wie[]" maxlength="255">';
td6.innerHTML = strHtml6.replace(/!count!/g,count);
// create table cell 4
var td7 = document.createElement("td")
var strHtml7 = '<select name="soort[]"><option value="1">Alles</option><option value="2">Optreden</option></select>';
td7.innerHTML = strHtml7.replace(/!count!/g,count);
// create table cell 5
var td8 = document.createElement('td');
td8.style.backgroundColor = "#FF0000";
var strHtml8 = '<input type="button" class="delete_row" value="Verwijder agendapunt" />';
td8.innerHTML = strHtml8.replace(/!count!/g,count);
// append data to row
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
row.appendChild(td8);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
</script>
Maar buttons die je later toevoegt dus niet. Dit moet je dan 'handmatig' doen.
Ger van Steenderen op 05/02/2013 18:27:38:
Op het moment dat het document geladen is krijgen de buttons met de class delete_row een onClick via JQuery
Maar buttons die je later toevoegt dus niet. Dit moet je dan 'handmatig' doen.
Maar buttons die je later toevoegt dus niet. Dit moet je dan 'handmatig' doen.
Wat moet ik dan in het onClick="" zetten bij de 'nieuwe' buttons?
Code (php)
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
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
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function removerow(el) {
// find parent <tr> and delete it
var row = $(el).parents('tr');
$(row).remove();
}
$(document).ready(function() {
// add_row button
$('#add_row').click( function() {
$('#myTable > tbody:last').append('<tr><td>nieuwe bla</td><td><button class="delete_row" onclick="removerow(this);">Klik</button></td></tr>');
});
// cache elements
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
removerow(this);
});
});
</script>
</head>
<body>
<table id="myTable">
<tr><td>bla bla 1</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 2</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 3</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 4</td><td><button class="delete_row">Klik</button></td></tr>
</table>
<button id="add_row">Nieuwe regel</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function removerow(el) {
// find parent <tr> and delete it
var row = $(el).parents('tr');
$(row).remove();
}
$(document).ready(function() {
// add_row button
$('#add_row').click( function() {
$('#myTable > tbody:last').append('<tr><td>nieuwe bla</td><td><button class="delete_row" onclick="removerow(this);">Klik</button></td></tr>');
});
// cache elements
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
removerow(this);
});
});
</script>
</head>
<body>
<table id="myTable">
<tr><td>bla bla 1</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 2</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 3</td><td><button class="delete_row">Klik</button></td></tr>
<tr><td>bla bla 4</td><td><button class="delete_row">Klik</button></td></tr>
</table>
<button id="add_row">Nieuwe regel</button>
</body>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function removerow(el) {
// find parent <tr> and delete it
var row = $(el).parents('tr');
$(row).remove();
}
$(document).ready(function() {
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
removerow(this);
});
// find parent <tr> and delete it
var row = $(el).parents('tr');
$(row).remove();
}
$(document).ready(function() {
var buttons = $('.delete_row');
// events
buttons.on('click', function(e) {
removerow(this);
});
Maar ook nu kunnen net nieuwe rijen niet verwijderd worden.
Kan iemand nog een ander voorbeeld voor me maken?
// add_row button
$('#add_row').click( function() {
$('#myTable > tbody:last').append('<tr><td>nieuwe bla</td><td><button class="delete_row" onclick="removerow(this);">Klik</button></td></tr>');
});
Toevoeging op 06/02/2013 21:02:32:
misschien moet je het andersom proberen: telkens een stukje van jouw code aan mijn code toevoegen..