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>

这将从db中提取一个或多个列并将它们设置为head，我这样做是因为在开发过程中你应该能够看到数据是否符合你的需要

  <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是用于将数据放入db

的基本文件

//get.php
<?php
$editData = $_POST['data'];

// Add your validation and save data to database something like update query

echo $editData;
?>

希望这会有所帮助

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

1 个答案: