[Opgelost] .InnerHTML TR probleempje

Door PH-MJS op 09-03-2009 16:03

1.079 views

Ha PHP'ers,
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.


<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


function pas_aan(regel){
		$.post("edit.php", { bericht: bericht },
		function(data){
		$("#rij" + regel).show("<td>" + data + "</td>");
		});
	}

De data die wordt ontvangen:


<td><input type="text" value="gegeven 1"></td><td><input type="text" value="gegeven 1"></td>

In IE ziet het er dan zo uit:


+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+
| Gegeven 1 | Gegeven 2 |
+-------------+-------------+

In FF


+-------------+-------------+
| 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)

PH-MJS

12-03-2009 15:11

Ha PHP-hulpers,

Ik heb de volgende testcode:


<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

PH-MJS

13-03-2009 11:12

Ha PHP-ers,
Ik ben al weer een stukje verder.
Ik heb de volgende code:


<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.

Mitchell

13-03-2009 11:39

Met een framework zoals JQuery is dit een stuk simpeler.


$(".klik").click(function(){
	$(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.


<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>

PH-MJS

13-03-2009 11:46

Ha 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.

Mitchell

13-03-2009 12:04


$(".klik").click(function(){
	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.. :)

PH-MJS

13-03-2009 13:14

Ha iedereen,
Ik heb het nu als volgt opgelost.


<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

Reageren

Inloggen om te reageren