<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Plan dnia | stworzony przez ##### |</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
//acknowledgement message
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_userid = $(this).attr("id") ;
var value = $(this).text() ;
$.post('ajax.php' , field_userid + "=" + value, function(data){
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},1000);
}
});
});
});
</script>
<style>
table.zebra-style {
font-family:"Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align:left;
border:1px solid #ccc;
margin-bottom:25px;
width:70%
}
table.zebra-style th {
color: #444;
font-size: 13px;
font-weight: normal;
padding: 10px 8px;
}
table.zebra-style td {
color: #777;
padding: 8px;
font-size:13px;
}
table.zebra-style tr.odd {
background:#f2f2f2;
}
body {
background:#fafafa;
}
.container {
width: 1000px;
border: 1px solid #C4CDE0;
border-radius: 2px;
margin: 0 auto;
height: 1300px;
background:#fff;
padding-left:10px;
}
#status { padding:10px; background:#88C4FF; color:#000; font-weight:bold; font-size:12px; margin-bottom:10px; display:none; width:90%; }
</style>
</head>
<body>
<center>
<h1>| Plan dnia |</h1>
<b>| Stworzony przez ##### |</b> <h1></h1>
<div id="status"></div>
<table class="table zebra-style">
<thead>
<tr>
<th><center># Godzina #</center></th>
<th><center>Poniedzialek</center></th>
<th><center>Wtorek</center></th>
<th><center>Sroda</center></th>
<th><center>Czwartek</center></th>
<th><center>Piatek</center></th>
<th><center>Sobota</center></th>
<th><center>Niedziela</center></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<th><center>00:00 - 01:00</center></th>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
<td id="zadanie:0" contenteditable="true"><center> </center></td>
</tr>
</tbody>
</table>
</body>
</html>
Chciałbym stworzyć zwykły Scheduler/Organizer. Póki co zrobiłem tabele której komórki można edytować, jednak chciałbym teraz dodać zapisywanie/odczytywanie tych wpisanych do tabeli danych.
Jaki jest na to najłatwiejszy sposób? Proszę o pomoc :)