Отредактируйте содержимое таблицы и сохраните ее в базе данных
У меня есть HTML-таблица, которая показывает данные из базы данных, и я хочу, чтобы таблица была редактируемой. Я уже пытался использовать contenteditable, но после этого я просто не представляю, как сохранить изменения. В таблице есть столбцы, которые содержат дату. Простое решение высоко ценится, так как я не очень разбираюсь в веб-программировании, вот таблица моего кода:
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th><center>NO.</th>
<th><center>TANGGAL MASUK</th>
<th><center>TANGGAL MEMO</th>
<th><center>NO. MEMO</th>
<th><center>DARI</th>
<th><center>PERIHAL</th>
<th><center>TUJUAN</th>
<th><center>DISPOSISI</th>
<th><center>KETERANGAN</th>
<th><center>EDIT</th>
<th><center>FILE</th>
</tr>
</thead>
<tbody>
<?php $i = 1;
$query = mysql_query("select * from memo_masuk");
while ($data = mysql_fetch_array($query)) {
?>
<tr>
<td><center><?php echo $i; ?></center></td>
<td contenteditable><center><?php echo $data['Tgl_masuk']; ?></center></td>
<td contenteditable><center><?php echo $data['Tgl_memo']; ?><center></td>
<td contenteditable><center><?php echo $data['No_memo']; ?></center></td>
<td contenteditable><center><?php echo $data['Dari']; ?></center></td>
<td contenteditable><center><?php echo $data['Perihal']; ?></center></td>
<td contenteditable><center><?php echo $data['Tujuan']; ?></center></td>
<td contenteditable><center><?php echo $data['Disposisi']; ?></center></td>
<td contenteditable><center><?php echo $data['Keterangan']; ?></center></td>
<td><center><a href="edit-memo-masuk.php"><button>EDIT</button></a></center></td>
</tr>
<?php $i++; } ?>
</tbody>
</table>
</div>
Решение
Вы должны поэкспериментировать с локальным хранилищем, а также добавить в него больше Ajax. Редактирование внешнего интерфейса никогда не является хорошей идеей для хранения и изменения вещей в БД, но вот что вы должны попробовать
<div class="table-responsive">
$table_name = 'memo_masuk';
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
$query = mysql_query("select * from " . $table_name);
<thead>
<tr>
<th><center>NO.</th>
<?php
$row = mysql_fetch_assoc($query);
foreach ($row as $col => $value) {
echo "<th>";
echo $col;
echo "</th>";
}
?>
<th><center>EDIT</th>
<th><center>FILE</th>
</tr>
</thead>
Это будет извлекать заголовок или столбцы из базы данных и устанавливать их в качестве заголовка, я делаю это, потому что в процессе разработки вы должны видеть, соответствуют ли данные вашим потребностям
<tbody>
<?php $i = 1;
mysql_data_seek($query, 0);
while ($data = mysql_fetch_array($query)) {
?>
<tr>
<td><center><?php echo $i; ?></center></td>
<section id="editable" contenteditable="true">
<td contenteditable><center><?php echo $data['Tgl_masuk']; ?></center></td>
<td contenteditable><center><?php echo $data['Tgl_memo']; ?><center></td>
<td contenteditable><center><?php echo $data['No_memo']; ?></center></td>
<td contenteditable><center><?php echo $data['Dari']; ?></center></td>
<td contenteditable><center><?php echo $data['Perihal']; ?></center></td>
<td contenteditable><center><?php echo $data['Tujuan']; ?></center></td>
<td contenteditable><center><?php echo $data['Disposisi']; ?></center></td>
<td contenteditable><center><?php echo $data['Keterangan']; ?></center></td>
</section>
<td><center><a href="edit-memo-masuk.php"><button>EDIT</button></a></center></td>
</tr>
<?php $i++; } ?>
</tbody>
</table>
</div>
<div>
<input type="button" id="clear" value="Clear changes" /> <input type="button" id="save" value="Save changes" />
</div>
Вы используете HTML5, который не совместим со всеми браузерами. Если вы хотите редактировать содержимое таблицы. Теперь для исполнения изменений. Следуйте этому сценарию
<script type="text/javascript">
var editable = document.getElementById('editable');
addEvent(editable, 'blur', function () {
// lame that we're hooking the blur event
localStorage.setItem('contenteditable', this.innerHTML);
document.designMode = 'off';
});
addEvent(editable, 'focus', function () {
document.designMode = 'on';
});
addEvent(document.getElementById('clear'), 'click', function () {
localStorage.clear();
window.location = window.location; // refresh
});
if (localStorage.getItem('contenteditable')) {
editable.innerHTML = localStorage.getItem('contenteditable');
}
$(document).ready(function(argument) {
$('#save').click(function(){
// Get edit field value
$edit = $('#editable');
$.ajax({
url: 'get.php',
type: 'post',
data: {data: $edit},
datatype: 'html',
success: function(rsp){
alert(rsp);
}
});
});
});
</script>
вам нужно немного подправить его для собственных настроек, пока обновляется только одна переменная или столбец
get php — это основной файл, который будет использоваться для помещения данных в БД
//get.php
<?php
$editData = $_POST['data'];
// Add your validation and save data to database something like update query
echo $editData;
?>
Надеюсь, это поможет
Другие решения
Других решений пока нет …