Question

我有一个表格，我选择项目名称和输入表格名称。单击提交按钮后，它以表格格式显示最后插入的记录，但在单击提交后显示该表格，但一旦重新加载页面，它就会隐藏表格。然后单击它显示表格的提交按钮。我该如何解决这个问题？

<button type="submit" name="submit" id="button" class="btn-success btn">Submit</button>

<script>
  $(document).ready(function() {
    $("#button").click(function() {
      $("#table").show();
    });
  });
</script>

<?php 
  include('controller.php');
  $s4 = "SELECT * FROM col_heading ORDER BY coln_id DESC LIMIT 1";
  $res = mysqli_query($bd, $s4);
  while ($row = mysqli_fetch_array($res)) {
?>  

<table class="table table-bordered" id="table" style="width:50%;">
  <thead>
    <tr>
      <th>Sr.no</th>
      <th>Column Name</th>
    </tr>
  </thead>
  <tbody>

    <tr class="odd">
      <td>1</td>
      <td id="h1:<?php echo $row['coln_id']; ?>" contenteditable="true">
        <?php  echo $row['h1']; ?>
      </td>       
    </tr>
    <tr>
      <td>2</td>
      <td id="h2:<?php echo $row['coln_id']; ?>" contenteditable="true">
        <?php echo $row['h2']; ?>
      </td>
      </tr>
    <tr class="odd">
      <td>3</td>
      <td id="h3:<?php echo $row['coln_id']; ?>" contenteditable="true">
        <?php echo $row['h3']; ?>
      </td>
    </tr>
  </tbody>
</table>
<?php 
} 
?>

Answer 1

尝试在提交中使用e.preventDefault();。

$(document).ready(function() {
  $("#button").click(function(e) {
    e.preventDefault();
    $("#table").show();
  });
});

如果您想在提交时执行某些操作，那么最好在click函数中使用ajax调用并完成它。

将您的php放入新文件

<强> update.php

<?php 
  include('controller.php');
  $s4 = "SELECT * FROM col_heading ORDER BY coln_id DESC LIMIT 1";
  $res = mysqli_query($bd, $s4);
  while ($row = mysqli_fetch_array($res)) {
?>

从内部点击功能

对update.php进行ajax调用

 $(document).ready(function() {
      $("#button").click(function(e) {
        e.preventDefault();
        $("#table").show();
        $.ajax({
           url: 'update.php',
           data: '<pass any data here>',
           success: function(response){
             // do something with the resposne
           }
        });
      });
    });

完整代码

<button type="submit" name="submit" id="button" class="btn-success btn">Submit</button>

<script>
  $(document).ready(function() {
      $("#button").click(function(e) {
        e.preventDefault();
        $("#table").show();
        $.ajax({
           url: 'update.php',
           data: '<pass any data here>',
           success: function(response){
             // do something with the resposne
           }
        });
      });
    });
</script>


<table class="table table-bordered" id="table" style="width:50%;">
  <thead>
    <tr>
      <th>Sr.no</th>
      <th>Column Name</th>
    </tr>
  </thead>
  <tbody>

    <tr class="odd">
      <td>1</td>
      <td id="h1:<?php echo $row['coln_id']; ?>" contenteditable="true">
        <?php  echo $row['h1']; ?>
      </td>       
    </tr>
    <tr>
      <td>2</td>
      <td id="h2:<?php echo $row['coln_id']; ?>" contenteditable="true">
        <?php echo $row['h2']; ?>
      </td>
      </tr>
    <tr class="odd">
      <td>3</td>
      <td id="h3:<?php echo $row['coln_id']; ?>" contenteditable="true">
        <?php echo $row['h3']; ?>
      </td>
    </tr>
  </tbody>
</table>

单击提交按钮后显示隐藏的表

1 个答案: