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

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 放入新文件中

更新.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)) {
?>

从 click 函数内部对 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>