php - 编辑表格内容并将其保存到数据库

Question

我有一个 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>

Answer 1

您应该需要使用本地存储，并且还需要向其中添加更多 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;
?>

希望这会有所帮助