Forum PHP.pl > [HTML/PHP] Tabela z możliwością edycji zawartości

Kredka29

24.02.2009, 17:39:55

Witam.

Chciałbym się dowiedzieć jak zrobić coś takiego, że jest sobie tabelka, np.:

to chciałbym aby po naciśnięciu "Edytuj", otwierała się strona gdzie będzie taka sama tabelka, ale z polami tekstowymi.

i po naciśnięciu "Zapisz", zapisywałoby dane w pliku (może być txt). Ważne, aby wpisane wcześniej wartości, po naciśnięciu "Edytuj", były zachowane, tzn. zostały by w polu tekstowym i w tabelce. Strona edycji nie musi być w tym samym pliku.

Na pewno da się takie coś zrobić, tylko nie wiem jak.
Oczywiście przycisk Edycji byłby wyświetlany za podaniem hasła, ale z tym bym sobie poradził.

Pozdrawiam

Foxx

24.02.2009, 17:47:00

Oto namiary na wszystko co będzie Ci potrzebne:
1. Edytowanie treści: formularze html.
2. Zachowanie treści w polach formularza: parametr value dla pól input.
3. Operacje na plikach: http://pl.php.net/manual/pl/ref.filesystem.php
4. Lub jeżeli wybierzesz bazę mysql: http://pl.php.net/manual/pl/ref.mysql.php
5. Słowa kluczowe do wyszukiwarki: "formularz php", "wysłanie formularza", "zapis danych do pliku"...

Rafal Filipek

24.02.2009, 18:01:38

A jakbyś chciał mieć edytowanie w tej samej tabelce na tej samej stronie bez przeładownia itp to looknij na to, pisałem na szybko ale działa ok

Kod

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>
function edit(){
  var table = document.getElementById('fields'),
  fields = table.getElementsByTagName('td'),
  span, input, field, i;
  for(i=0; i<fields.length; i++){
    field = fields[i];
    span = field.getElementsByTagName('span')[0];
    span.style.display = 'none';
    if(!(input = field.getElementsByTagName('input')[0])){
      input = document.createElement('input');
      field.appendChild(input);
    }
    input.style.display = 'inline';
    input.value = span.innerHTML;
  }
}
function update(){
  var table = document.getElementById('fields'),
  fields = table.getElementsByTagName('td'),
  span, input, field, i;
  for(i=0; i<fields.length;i++){
    field = fields[i];
    span = field.getElementsByTagName('span')[0];
    input = field.getElementsByTagName('input')[0]
    input.style.display = 'none';
    span.innerHTML = input.value;
    span.style.display = 'inline';
  }
}
</script>
</head>
<body>
<table id="fields" border="1" style="width: 300px;">
  <tr>
    <td><span>1</span></td>
    <td><span>2</span></td>
    <td><span>3</span></td>
  </tr>
  <tr>
    <td><span>4</span></td>
    <td><span>5</span></td>
    <td><span>6</span></td>
  </tr>
  <tr>
    <td><span>7</span></td>
    <td><span>8</span></td>
    <td><span>9</span></td>
  </tr>
</table>
<button onclick="edit()">edytuj</button>
<button onclick="update()">update</button>
</body>
</html>

Kredka29

24.02.2009, 18:35:59

Rafal Filipek, jesteś super, gdyby tak jeszcze potrafiło by to "zapamiętywać dane" po np. odświerzeniu, było by świetnie =]

Z góry dzięki,
Kredka29

Rafal Filipek

24.02.2009, 19:07:08

No tak ale to juz inna bajka. to co mozesz zrobic to wpakowac ta tabelke w <form></form> i dodac 1 przycisk ktory wysle formularz i tyle. ewentualnie mozna bawic sie formularzem ajaxowym ale to pewnie najlatwiej byloby wykorzystac jakas bibliotekę js np. jQuery.

Kredka29

24.02.2009, 19:29:03

Dobra.

"Pomógł"

Pozdr.

shaolin33

28.06.2013, 08:06:22

Cytat(Rafal Filipek @ 24.02.2009, 19:01:38 )

A jakbyś chciał mieć edytowanie w tej samej tabelce na tej samej stronie bez przeładownia itp to looknij na to, pisałem na szybko ale działa ok

Kod

<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script>
function edit(){
  var table = document.getElementById('fields'),
  fields = table.getElementsByTagName('td'),
  span, input, field, i;
  for(i=0; i<fields.length; i++){
    field = fields[i];
    span = field.getElementsByTagName('span')[0];
    span.style.display = 'none';
    if(!(input = field.getElementsByTagName('input')[0])){
      input = document.createElement('input');
      field.appendChild(input);
    }
    input.style.display = 'inline';
    input.value = span.innerHTML;
  }
}
function update(){
  var table = document.getElementById('fields'),
  fields = table.getElementsByTagName('td'),
  span, input, field, i;
  for(i=0; i<fields.length;i++){
    field = fields[i];
    span = field.getElementsByTagName('span')[0];
    input = field.getElementsByTagName('input')[0]
    input.style.display = 'none';
    span.innerHTML = input.value;
    span.style.display = 'inline';
  }
}
</script>
</head>
<body>
<table id="fields" border="1" style="width: 300px;">
  <tr>
    <td><span>1</span></td>
    <td><span>2</span></td>
    <td><span>3</span></td>
  </tr>
  <tr>
    <td><span>4</span></td>
    <td><span>5</span></td>
    <td><span>6</span></td>
  </tr>
  <tr>
    <td><span>7</span></td>
    <td><span>8</span></td>
    <td><span>9</span></td>
  </tr>
</table>
<button onclick="edit()">edytuj</button>
<button onclick="update()">update</button>
</body>
</html>

czegoś podobnego poszukuje ale zeby wykorzystac mysql oraz cos tak jak tutaj: Temat: MySQLPHPWyswietlenie danych z sql edycja