[JS] [DOM] Mały problemik

0

Witam, uczę się od kilku dni posługiwać DOMem :)
topornie mi to idzie. Dlatego zwracam sie z prośbą o pomoc do was.
Znalazłem taki oto przykład na jednym z kursów - niestety nie działa on po drobnych przeróbkach tak jak bym chciał. Oto on:

[HTML]

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <title>Przykład zdarzenia DOM</title> <style type="text/css"> #stat { background-color: #6666FF; border: 1px solid #000000; font-family: verdana; font-size: 10pt; color: #FFFFCC} #tabela { background-color: #FFFFCC; border: 1px solid #000000; font-family: verdana; font-size: 10pt} </style> <script type="text/javascript">

// Funkcja zmieniająca zawartość komórki tabeli t2
function zmien() {
var td = document.getElementById("t");
td.innerHTML = "<input type="text" size="5">";
}

// Funkcja dodająca obserwatora zdarzeń dla tabeli t
function load() {
var el = document.getElementById("t");
el.addEventListener("dblclick", zmien, false);
}

</script> </head> <body style="font-family: verdana; font-size: 10pt" onload="load();">
Dzień książek czasopism
2 listopada liczba1 liczba2
3 listopada liczba1 liczba2
23 listopada liczba1 liczba2
</body> </html>

[/HTML]

Skrypt działa w ten sposób, ze kiedy klikniemy 2 razy myszką np. na kolumnę książki wiersz 2 listopada to komórka zamieni się nam w pole input text. Można wtedy coś w te pole wpisać. Ale jak np. zamiast dblclick wstawię zwykle click w function load() to nic nie da rady wpisac w okienko

  1. dlaczego nie da rady nic wpisać kiedy jest click a nie dblclick?
  2. dlaczego td zamienia sie w input tylko w 1 komórce? probowałem zrobić jakaś pętle ale mi nie wychodzilo
  3. co zrobić żeby kiedy już wpisze jakiś text w okienko i kliknę na jakaś inna komórkę to to co wcześniej wpisałem żeby się zamieniło (wiem ze tu potrzeba ajaxu ale nie wiem o c b)

z góry dziękuje
pozdrawiam
Daniel

0

Muszę pochwalić, to już chyba drugie w tym roku ciekawe pytanie, jeśli chodzi o JavaScript w tym dziale.
Z tej okazji napisałem Ci mały przykład. Co do wysyłania zapytania przy pomocy AJAX to najlepiej wybierz sobie jakąś gotową bibliotekę do tej techniki i zobacz w dokumentacji jak z niej skorzystać.

<html>
<head>
<script type="text/javascript">

  function initDataFields(id, fieldClass) {
    var reg = new RegExp('(^|\\s)' + fieldClass + '($|\\s)', '');
    var getDataFields = function(elm) {  
      var ar = elm.getElementsByTagName('*'), ret = [];
      for (var i = 0; i < ar.length; i++) {
        if (ar[i].className.match(reg)) ret[ret.length] = ar[i];
      }
      return ret;
    };
    var root = document.getElementById(id);
    root._checkFields = function() {
      var ar = getDataFields(this);
      for (var i = 0; i < ar.length; i++) {
        if (ar[i]._editing) ar[i]._endEdit();
      };
    };
    var ar = getDataFields(root);
    for (var i = 0; i < ar.length; i++) {
      ar[i]._root = root;
      ar[i]._beginEdit = function() {
        if (this._editing) return;
        this._root._checkFields();
        this._editing = true;
        var input = document.createElement('input');
        input.value = this.innerHTML;
        while (this.hasChildNodes()) this.removeChild(this.firstChild);
        this.appendChild(input);
        input.onkeydown = function(e) {
          if (! e) e = event;
          if (e.keyCode == 13) this.parentNode._endEdit(); 
        };
        input.focus();
      };
      ar[i]._endEdit = function() {
        var data = this.firstChild.value;
        this.innerHTML = data;
        /*
            -- Tutaj wyslij dane przy pomocy AJAX --
        */
        this._editing = false;
      };
      ar[i].onclick = function() {
        this._beginEdit();
      };
    }
  }
  
  onload = function() {
    initDataFields('data_table', 'data_field');
  };
</script>
</head>
<style>
  .data_field { width: 160px; height: 40px; }
</style>
<body>
  <table id="data_table" border="1" cellpadding="4" cellspacing="2">
    <tr>
      <td class="data_field">Krowa</td>
      <td class="data_field">Lama</td>
    </tr>
    <tr>
      <td class="data_field">Ryba</td>
      <td class="data_field">Koza</td>
    </tr>
  </table>
</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1