Skocz do zawartości

[JS] Edytowanie komorek w wierszu poprzez okienko

martinstw

Przez martinstw
w HTML, PHP, mySQL, JavaScript

 Udostępnij

Rekomendowane odpowiedzi

martinstw Chicken

martinstw

Opublikowano
Opublikowano

Witam!

 

Czy mógłby mi ktoś doradzić jak można zapisywać dane z pól input lub textarea w okienku do wiersza tabeli?

Okienko otwiera się po naciśnięciu na przycisk Edytuj, następnie wypełnia sie poszczególne inputy i klika w zapisz Zapisz dane w wierszu i są one umieszczane w wierszu.

 

Kod wygląda następująco:

 

 <html>
  <head>
<script language="javascript" type="text/javascript">
<!--
function edit() {
   o = document.getElementById("edit1");
   o.style.top = document.body.scrollTop+100
   o.style.left = document.body.scrollLeft+5
   if (o.style.display=="block") o.style.display="none";
   else o.style.display="block";
}

  function save()
{
     var save = document.getElementByTagName(tr);
     save.innerHTML = document.getElementById('text'+id).value;
     document.getElementById(edit).style.display = 'block';
     document.getElementById(edit).style.display = 'none';
}
// -->
</script>

<script type="text/javascript">

             function delete_row(r)
{

     var i=r.parentNode.parentNode.rowIndex;
          document.getElementById('tabela1').deleteRow(i);
}


</script>

<script type="text/javascript">
function printpage()
{
window.print();
}
</script>

<input type="button" value="Print this page" onclick="printpage()" />


  <style type="text/css"><!--
#edit1 {
   position:absolute;
   display:none;
   border: 1px solid blue;
   width:1000px;
   height:110px;
   background-color:yellow;
}

.td1 {height: 10px; width:6px;}
#chk1 {height: 10px; width:6px;}
.td2 {height: 10px; width:10px;}
#status1 {height: 10px; width:10px;}
.td3 {height: 10px; width:15px;}
#nazwa1 {height: 10px; width:15px;}
.td4 {height: 10px; width:15px;}
#haslo1 {height: 10px; width:15px;}
.td5 {height: 10px; width:15px;}
#pytanie1 {height: 10px; width:20px;}
.td6 {height: 10px; width:15px;}
#rejestracja1 {height: 10px; width:15px;}
.td7 {height: 10px; width:10px;}
#imie1 {height: 10px; width:10px;}
.td8 {height: 10px; width:15px;}
#nazwisko1 {height: 10px; width:15px;}
.td9 {height: 10px; width:6px;}
#nr_kont1 {height: 10px; width:6px;}
.td10 {height: 10px; width:15px;}
#wydzial1 {height: 10px; width:15px;}
.td11{height: 10px; width:15px;}
#funkcja1 {height: 10px; width:15px;}
.td12 {height: 10px; width:50px;}
#opcja1 {height: 10px; width:50px;}

--></style>

</head>
<body>

<span id="edit1">
  <table border=1>
<tr>
     <td class="td1">&nbsp</td>
     <td class="td2">Status</a></td>
     <td class="td3">Nazwa</a></td>
     <td class="td4">Hasło</td>
     <td class="td5">Pytanie</td>
     <td class="td6">Data reje.</a></td>
     <td class="td7">Imię</td>
     <td class="td8">Nazwisko</a></td>
     <td class="td9">Nr kont.</a></td>
     <td class="td10">Wydz.</a></td>
     <td class="td11">Fun.</a></td>
     <td class="td12">Opcja</td>

</tr>

<tr><td id="chk1">ch</td><td id="status1"><input type="text" size="3"></td><td id="nazwa1"><input type="text" size="15"></td><td id="haslo1"><input type="text" size="15"></td><td id="pytanie1"><input type="text" size="20"></td><td id="rejestracja1"><input type="text" size="8"></td><td id="imie1"><input type="text" size="12"></td><td id="nazwisko1"><input type="text" size="15"></td><td id="nr_kont1"><input type="text" size="2"></td><td id="wydzial1"><input type="text" size="6"></td><td id="funkcja1"><input type="text" size="6"></td><td>opcja</td></tr>
</table>
<input type="button" value="Zapisz dane w wierszu" onclick="save();"/><input type="button" value="Zamknij okno" onclick="edit();"/>

</span>



<table id="tabela1" border=1>
<tr>
     <td class="th2">&nbsp</td>
     <td class="th3">Status</a></td>
     <td class="th4">Nazwa</a></td>
     <td class="th5">Hasło</td>
     <td class="th6">Pytanie</td>
     <td class="th7">Data reje.</a></td>
     <td class="th8">Imię</td>
     <td class="th9">Nazwisko</a></td>
     <td class="th10">Nr kont.</a></td>
     <td class="th11">Wydz.</a></td>
     <td class="th12">Fun.</a></td>
     <td class="13">Opcja</td>

</tr>

<tbody id="Sort_id">
<tr><td class="th"><input type="checkbox" name="wybor" value="1"></td><td class="status">printer</td><td class="nazwa">martinstw</td><td class="haslo">martinstw78</td><td class="pytanie">zielony</td><td class="rejestracja">19.02.1989</td><td class="imie">Maaaa</td><td class="nazwisko">PPP</td><td class="nr_kont">12345</td><td class="wydzial">WMWG- SG</td><td class="funkcja">Użytkownik2</td><td><input type="button" value="Usuń" onclick="if (confirm('Czy chcesz usunąć wiersz?')) {java script:delete_row(this)}"><input type="button" value="Edytuj" onclick="java script:edit(this);"></td></tr>
<tr><td class="th"><input type="checkbox" name="wybor" value="1"></td><td class="status">editor</td><td class="nazwa">marti2222</td><td class="haslo">martinmmmmm</td><td class="pytanie">czerwony</td><td class="rejestracja">17.02.1989</td><td class="imie">Mmamamma</td><td class="nazwisko">MMM</td><td class="nr_kont">23145</td><td class="wydzial">WM1111</td><td class="funkcja">Użytkownik1</td><td><input type="button" value="Usuń" onclick="if (confirm('Czy chcesz usunąć wiersz?')) {java script:delete_row(this)}"><input type="button" value="Edytuj" onclick="java script:edit(this);"></td></tr>

</tbody>

</table>

</body>
</html>

 

I dodatkowo, żeby dane wysyłane były do serwera i zapisywane w bazie danych.

 

Czy mógłby mi ktoś w tym pomóc?

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...