Forum PHP.pl > zmiana tr

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: zmiana tr

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

Dex1987

14.08.2006, 23:56:44

Witam mam taki kodzik:

[HTML] pobierz, plaintext 
<script language="JavaScript" type="text/javascript">
 
function change (name) {
 
         document.getElementById (name).innerHTML = '<font face="verdana" size="2">OK</font>';
 
         name = document.getElementById (name).innerHTML
}
 
</script>
 
<table border="1" widht="100%">
  <tr onClick="change ('foo1')">
    <td width="100%">
      <div id="foo1">
        tekst 1
      </div>
    </td>
  </tr>
  <tr onClick="change ('foo2')">
    <td width="100%">
      <div id="foo2">
        tekst 2
      </div>
    </td>
  </tr>
</table>
[HTML] pobierz, plaintext

Dzila on tak: mam x komorek, kaza ma jakas wartosc... teraz jak klikne na jakas zmienia sie na OK, ale gdy klikne na inna to chcialbym zeby poprzednia wracal do poczatkowej formy.

Zajec

15.08.2006, 00:18:27

Zadziała?

Kod

Dex1987

15.08.2006, 00:32:10

ok zrobilem tak jak napisałes i dziala swietnie, ale teraz mam taki problemik, nie moge edytowac wartosci inputa ;/

kod:

[HTML] pobierz, plaintext 
<?php
 
echo $_POST['foo1'];
 
?>
 
 
<script type="text/javascript">
var lastid = false;
var lastval = false;
 
function change(name) {
    if (lastid && lastval) document.getElementById(lastid).innerHTML=lastval;
    lastid = name;
    lastval = document.getElementById(name).innerHTML;
 
    document.getElementById(name).innerHTML = '<input name="'+name+'" type="text" value="'+document.getElementById(name).innerHTML+'">';
}
 
</script>
<form method="POST">
 
<table border="1" widht="100%">
  <tr onClick="change ('foo1')">
    <td width="100%">
      <div id="foo1">
        tekst 1
      </div>
    </td>
  </tr>
  <tr onClick="change ('foo2')">
    <td width="100%">
      <div id="foo2">
        tekst 2
      </div>
    </td>
  </tr>
    <tr onClick="change ('foo3')">
    <td width="100%">
      <div id="foo3">
        tekst 3
      </div>
    </td>
  </tr>
</table>
<br>
<input type="submit">
</form>
[HTML] pobierz, plaintext

Zajec

15.08.2006, 10:14:51

Zrobiłem to inaczej, porządniej.

http://zajec.net/dex1987

[HTML] pobierz, plaintext 
<!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" xml:lang="pl" lang="pl">
<head>
<title>Script test</title>
<style type="text/css">
input { display: none; }
</style>
</head>
<body>
 
 
 
<script type="text/javascript">
var last = false;
 
function change(element) {
    if (last)
    {
    last.getElementsByTagName('div')[0].style.display="block";
    last.getElementsByTagName('input')[0].style.display="none";
    last.getElementsByTagName('input')[0].value=last.getElementsByTagName('div')[0].innerText;
    }
    last = element;
 
    element.getElementsByTagName('div')[0].style.display="none";
    element.getElementsByTagName('input')[0].style.display="block";
}
 
</script>
 
 
<form method="POST">
 
<table border="1" widht="100%">
  <tr onclick="change(this)">
    <td width="100%">
      <div>tekst 1</div>
      <input name="foo1" type="text" value="tekst1">
    </td>
  </tr>
  <tr onclick="change(this)">
    <td width="100%">
      <div>tekst 2</div>
      <input name="foo2" type="text" value="tekst2">
    </td>
  </tr>
</table>
<br>
<input type="submit">
</form>
 
</body>
</html>
[HTML] pobierz, plaintext

P.S.
Jeśli chodziło Ci o to, aby po zmianie treści inputa zmieniał się również tekst, który pojawia się po zaznaczeniu innego pola, to linijkę:

Kod

last.getElementsByTagName('input')[0].value=last.getElementsByTagName('div')[0].innerText;

zamień na

Kod

last.getElementsByTagName('div')[0].innerText=last.getElementsByTagName('input')[0].value;

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.