[Opgelost] .InnerHTML TR probleempje
Ik heb weer even jullie hulp nodig. Ik werk met het framework JQuery en het verloopt niet helemaal vlekkeloos.
Ik heb een HTML tabel met gegevens. Zodra men op de link klikt wordt de betreffende rij herladen met Ajax en de gegevens in input velden gezet. Tot zover gaat het nog goed. Het gaat fout als ik de ontvangen data, HTML met inputvelden, terugplaats.
Code (php)
1
2
3
4
2
3
4
<table>
<tr id="rij1"><td>gegeven 1</td><td>gegeven 2</td><td><a href="Javascript:pas_aan(1)">Pas aan</a></td></tr>
<tr id="rij2"><td>gegeven 1</td><td>gegeven 2</td><td><a href="Javascript:pas_aan(2)">Pas aan</a></td></tr>
</table>
<tr id="rij1"><td>gegeven 1</td><td>gegeven 2</td><td><a href="Javascript:pas_aan(1)">Pas aan</a></td></tr>
<tr id="rij2"><td>gegeven 1</td><td>gegeven 2</td><td><a href="Javascript:pas_aan(2)">Pas aan</a></td></tr>
</table>
Het javascriptje
Code (php)
1
2
3
4
5
6
2
3
4
5
6
function pas_aan(regel){
$.post("edit.php", { bericht: bericht },
function(data){
$("#rij" + regel).show("<td>" + data + "</td>");
});
}
$.post("edit.php", { bericht: bericht },
function(data){
$("#rij" + regel).show("<td>" + data + "</td>");
});
}
De data die wordt ontvangen:
Code (php)
1
<td><input type="text" value="gegeven 1"></td><td><input type="text" value="gegeven 1"></td>
In IE ziet het er dan zo uit:
Code (php)
1
2
3
4
5
2
3
4
5
+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+
In FF
Code (php)
1
2
3
4
5
2
3
4
5
+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+----------------------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+----------------------------+
FF geeft het goed weer omdat de data in de TR wordt gepompt. Enig idee om dit netjes en cross-browser op te lossen?
Voor elke rij een tabel maken? Zijn er andere oplossingen? (Mag ook zonder jQuery)
Gewijzigd op 01/01/1970 01:00:00 door PH-MJS
Ik heb de volgende testcode:
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
<html>
<head>
<title>AJAX</title>
<script language="javascript" src="js/prototype-1.6.0.2.js"></script>
<script language="javascript">
function klik(rij){
var tekst = '<td>testveld 1</td><td>testveld 2</td><td>testveld 3</td>';
//alert(tekst + " | " + rij);
document.getElementById(rij).innerHTML = tekst;
}
</script>
</head>
<body>
<table border="1" id="table">
<tr id="rij1"><td>Veld 1.1</td><td>veld 1.2</td><td>veld 1.3</td><td><a href="javascript:klik('rij1')">Klik</a></td></tr>
<tr id="rij2"><td>Veld 2.1</td><td>veld 2.2</td><td>veld 2.3</td><td><a href="javascript:klik('rij2')">Klik</a></td></tr>
<tr id="rij3"><td>Veld 3.1</td><td>veld 3.2</td><td>veld 3.3</td><td><a href="javascript:klik('rij3')">Klik</a></td></tr>
<tr id="rij4"><td>Veld 4.1</td><td>veld 4.2</td><td>veld 4.3</td><td><a href="javascript:klik('rij4')">Klik</a></td></tr>
<tr id="rij5"><td>Veld 5.1</td><td>veld 5.2</td><td>veld 5.3</td><td><a href="javascript:klik('rij5')">Klik</a></td></tr>
</table>
<div id="div"></div>
</body>
</html>
<head>
<title>AJAX</title>
<script language="javascript" src="js/prototype-1.6.0.2.js"></script>
<script language="javascript">
function klik(rij){
var tekst = '<td>testveld 1</td><td>testveld 2</td><td>testveld 3</td>';
//alert(tekst + " | " + rij);
document.getElementById(rij).innerHTML = tekst;
}
</script>
</head>
<body>
<table border="1" id="table">
<tr id="rij1"><td>Veld 1.1</td><td>veld 1.2</td><td>veld 1.3</td><td><a href="javascript:klik('rij1')">Klik</a></td></tr>
<tr id="rij2"><td>Veld 2.1</td><td>veld 2.2</td><td>veld 2.3</td><td><a href="javascript:klik('rij2')">Klik</a></td></tr>
<tr id="rij3"><td>Veld 3.1</td><td>veld 3.2</td><td>veld 3.3</td><td><a href="javascript:klik('rij3')">Klik</a></td></tr>
<tr id="rij4"><td>Veld 4.1</td><td>veld 4.2</td><td>veld 4.3</td><td><a href="javascript:klik('rij4')">Klik</a></td></tr>
<tr id="rij5"><td>Veld 5.1</td><td>veld 5.2</td><td>veld 5.3</td><td><a href="javascript:klik('rij5')">Klik</a></td></tr>
</table>
<div id="div"></div>
</body>
</html>
Dit genereert in internet explorer een onbekende runtime fout.
Ik ben er achter gekomen dat Microsoft de <TR> als read-only beschouwd en daarom ook niet aan te passen is met JavaScript. In Firefox werkt de bovenstaande code wel.
Is het nog mogelijk middels een omweg, of framework?
Groeten,
PH-MJS
Ik ben al weer een stukje verder.
Ik heb de volgende code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<title>AJAX</title>
<script language="javascript">
function klik(rij){
var tekst = "testveld";
td = document.getElementById(rij).document.getElementsByTagName('td');
td[1].innerHTML = tekst;
}
</script>
</head>
<body>
<table border="1" id="table">
<tr id="rij1"><td>Veld 1.1</td><td>veld 1.2</td><td>veld 1.3</td><td><a href="javascript:klik('rij1')">Klik</a></td></tr>
<tr id="rij2"><td>Veld 2.1</td><td>veld 2.2</td><td>veld 2.3</td><td><a href="javascript:klik('rij2')">Klik</a></td></tr>
<tr id="rij3"><td>Veld 3.1</td><td>veld 3.2</td><td>veld 3.3</td><td><a href="javascript:klik('rij3')">Klik</a></td></tr>
<tr id="rij4"><td>Veld 4.1</td><td>veld 4.2</td><td>veld 4.3</td><td><a href="javascript:klik('rij4')">Klik</a></td></tr>
<tr id="rij5"><td>Veld 5.1</td><td>veld 5.2</td><td>veld 5.3</td><td><a href="javascript:klik('rij5')">Klik</a></td></tr>
</table>
</body>
</html>
<head>
<title>AJAX</title>
<script language="javascript">
function klik(rij){
var tekst = "testveld";
td = document.getElementById(rij).document.getElementsByTagName('td');
td[1].innerHTML = tekst;
}
</script>
</head>
<body>
<table border="1" id="table">
<tr id="rij1"><td>Veld 1.1</td><td>veld 1.2</td><td>veld 1.3</td><td><a href="javascript:klik('rij1')">Klik</a></td></tr>
<tr id="rij2"><td>Veld 2.1</td><td>veld 2.2</td><td>veld 2.3</td><td><a href="javascript:klik('rij2')">Klik</a></td></tr>
<tr id="rij3"><td>Veld 3.1</td><td>veld 3.2</td><td>veld 3.3</td><td><a href="javascript:klik('rij3')">Klik</a></td></tr>
<tr id="rij4"><td>Veld 4.1</td><td>veld 4.2</td><td>veld 4.3</td><td><a href="javascript:klik('rij4')">Klik</a></td></tr>
<tr id="rij5"><td>Veld 5.1</td><td>veld 5.2</td><td>veld 5.3</td><td><a href="javascript:klik('rij5')">Klik</a></td></tr>
</table>
</body>
</html>
De bedoeling was dat alleen de td's van de betreffende rij werden geselecteerd. Op dit moment is dit niet het geval. Alle td's die voorkomen worden in de array gezet.
Hoe is het mogelijk om alleen de td's in de araay te krijgen van de betreffende rij?
Alvast bedankt,
PH-MJS
PS. Sorry voor het bumpen, maar in mijn ogen was dit overzichtelijker.
Code (php)
1
2
3
4
2
3
4
$(".klik").click(function(){
$(this).closest("tr").children("td").text("alle td inhoud veranderd van deze rij");
return false;
});
$(this).closest("tr").children("td").text("alle td inhoud veranderd van deze rij");
return false;
});
Snap niet helemaal wat je probeerd, maar dit stukje Jquery zorgt ervoor dat hij alle td's krijgt van een bepaalde rij (waarin de anchor staat) en past alle inhouden aan van de td's in een rij naar een bepaalde tekst.
Of als je alleen de eerste td in een tr wilt aanspreken gebruik je .children("td:first").
Edit: Vergeten html te plaatsen.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<table>
<tr>
<td>tekst 1</td><td>tekst2</td><td><a class="klik" href="">klik hier</a></td>
</tr>
<tr>
<td>tekst 1</td><td>tekst2</td><td><a class="klik" href="">klik hier</a></td>
</tr>
</table>
<tr>
<td>tekst 1</td><td>tekst2</td><td><a class="klik" href="">klik hier</a></td>
</tr>
<tr>
<td>tekst 1</td><td>tekst2</td><td><a class="klik" href="">klik hier</a></td>
</tr>
</table>
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
Bedankt voor je reactie.
De bedoeling is inderdaad dat alle td's van een bepaalde rij worden geselecteerd zodat ik per td de inhoud kan veranderen.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$(".klik").click(function(){
var getguts = $(this).closest("tr").children("td");
var inguts = [ "inhoud 1", "inhoud 2" ];
$.each(getguts, function(inguts, val) {
$(getguts).text(inguts);
});
});
var getguts = $(this).closest("tr").children("td");
var inguts = [ "inhoud 1", "inhoud 2" ];
$.each(getguts, function(inguts, val) {
$(getguts).text(inguts);
});
});
Denk dat je zoiets kunt proberen, maar arrays in Jquery en Javascript zijn nieuw voor mij, dusja.. :)
Ik heb het nu als volgt opgelost.
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
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
<html>
<head>
<title>AJAX</title>
<script language="javascript">
function klik(rij){
var veld1 = "testveld 1";
var veld2 = "testveld 2";
var veld3 = "testveld 3";
var aantal_velden = 4;
var start = rij * aantal_velden;
var einde = aantal_velden - 1;
td = document.getElementsByTagName('td');
td[start].innerHTML = veld1;
td[start + 1].innerHTML = veld2;
td[start + 2].innerHTML = veld3;
}
</script>
</head>
<body>
<table border="1" id="table">
<tr><td>Veld 1.1</td><td>veld 1.2</td><td>veld 1.3</td><td><a href="javascript:klik(0)">Klik</a></td></tr>
<tr><td>Veld 2.1</td><td>veld 2.2</td><td>veld 2.3</td><td><a href="javascript:klik(1)">Klik</a></td></tr>
<tr><td>Veld 3.1</td><td>veld 3.2</td><td>veld 3.3</td><td><a href="javascript:klik(2)">Klik</a></td></tr>
<tr><td>Veld 4.1</td><td>veld 4.2</td><td>veld 4.3</td><td><a href="javascript:klik(3)">Klik</a></td></tr>
<tr><td>Veld 5.1</td><td>veld 5.2</td><td>veld 5.3</td><td><a href="javascript:klik(4)">Klik</a></td></tr>
</table>
</body>
</html>
<head>
<title>AJAX</title>
<script language="javascript">
function klik(rij){
var veld1 = "testveld 1";
var veld2 = "testveld 2";
var veld3 = "testveld 3";
var aantal_velden = 4;
var start = rij * aantal_velden;
var einde = aantal_velden - 1;
td = document.getElementsByTagName('td');
td[start].innerHTML = veld1;
td[start + 1].innerHTML = veld2;
td[start + 2].innerHTML = veld3;
}
</script>
</head>
<body>
<table border="1" id="table">
<tr><td>Veld 1.1</td><td>veld 1.2</td><td>veld 1.3</td><td><a href="javascript:klik(0)">Klik</a></td></tr>
<tr><td>Veld 2.1</td><td>veld 2.2</td><td>veld 2.3</td><td><a href="javascript:klik(1)">Klik</a></td></tr>
<tr><td>Veld 3.1</td><td>veld 3.2</td><td>veld 3.3</td><td><a href="javascript:klik(2)">Klik</a></td></tr>
<tr><td>Veld 4.1</td><td>veld 4.2</td><td>veld 4.3</td><td><a href="javascript:klik(3)">Klik</a></td></tr>
<tr><td>Veld 5.1</td><td>veld 5.2</td><td>veld 5.3</td><td><a href="javascript:klik(4)">Klik</a></td></tr>
</table>
</body>
</html>
Het werkt. Super simpel eigenlijk, maar kom er maar op.
Als het makkelijker kan, dan hoor ik dat wel.
Gr, PH-MJS