简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 自动生成表格案例-2018年04月16日00时59分
Blogger Information
Blog 28
fans 0
comment 0
visits 16437
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
自动生成表格案例-2018年04月16日00时59分
植树青年小江同志的博客
Original
491 people have browsed it

前端部分代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>表格自动生成</title>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
  <header class="container">
      <div class="row">
        <h1 class="form-head col-md-6" id="form_title">请输入你的标题</h1>
      </div>
      
    </header>
  <div class="container">
    <div class="row">
      <form action="./form_back.php" method="post" class="col-md-6" id="form">
    
        <div class="form-group ">
          <label for="title">表格标题:</label>
          <input type="text" placeholder="请输入标题" class="form-control" name="title" id="title" required>
        </div>

        <div class="form-group">
          <label for="cols">表格行数:</label>
          <input type="text" placeholder="请输入行数" class="form-control" name="cols" id="cols" required>
        </div>

        <div class="form-group">
          <label for="rows">表格列数:</label>
          <input type="text" placeholder="请输入列数" class="form-control" name="rows" id="rows" >
        </div>

        <div class="form-group">
          <div class="row">

              <div class="col-md-4">
                <button class="btn-lg btn-primary" type="submit" id="btn_submit">生成表格</button>
              </div>
 
              <div class="col-md-3">
                <button class="btn-lg btn-warning" type="reset" id="btn_reset">重置</button>
              </div>
              
            
          </div>
        </div>

      </form>
    </div>
    
    <div class="container">
      <div class="row">
        <div class=" col-md-6 main"></div>
      </div>
    </div>
  </div>

  <script>
    $('#form').on('submit', function (e) {
        //阻止默认表单提交
      e.preventDefault();


      
      var formData = {};
      formData['title'] = $('#title').val();
      formData['cols'] = $('#cols').val();
      formData['rows'] = $('#rows').val();
      $.ajax({
        url:'./form_back.php',
        type:'POST',
        async:true,
        data: formData,
        beforeSend:function() {
          $('#form_title').html(formData['title']);
          //防止用户多次点击按钮
          $("#btn_submit").attr({ disabled: "disabled" });
          //提交前再次确认
          $(':input').not('button').each(function (index, obj) {
            return checkVal(obj);
          });
        },
        success:function (data){
        //按钮恢复
          $("#btn_submit").removeAttr("disabled");
          console.log('success');
          $('.main').html(data);
          
        },
        error:function (data) {

        }
      });

      return false;
    })

    $('#btn_reset').on('click', function (e){ 
      $('#form_title').html('请输入你的标题');
      $('.main').html('');
    });

    function checkVal(ele) {
      if ($(ele).val().length == 0) {
        console.log($(ele));
        $(ele).before('<span style="color:red;">不能为空</span>');
        //淡出效果
        $(ele).prev().fadeOut(3000);
        return false;
      } else  {
        return true;
      }
    }
  </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

后端PHP代码

实例

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
  if (!empty($_POST['rows']) && !empty($_POST['cols']) && !empty($_POST['title'])) {
    $rows = $_POST['rows'];
    $cols = $_POST['cols'];
    $title = $_POST['title'];

    $table = '<table border="1" cellspacing="0" cellpadding="3" align="center" width="80%">'; 

   
    $table .= '<caption style="text-align:center;caption-side:top">'. $title . '</caption>';
    //标题
    $table .= '<tr align="center" bgcolor="#3e3e3e;">';
    //  表头
    for ($i = 0; $i< $cols; $i++) {
      $table .='<th> X </th>';
    }
    $table .= '</tr>';


    // 表格
    for ($r = 0; $r<$rows; $r++ ) {
      $table .='<tr>';
      for($c = 0; $c<$cols; $c++) {
        $data = $r*$cols+$c;

        $table .= '<td align="center">'. ++$data. '</td>';
      }
      $table .= '</tr>';
    }

    $table .='</table>';

    echo $table;
    exit();
  } else {
    	exit('<span style="color:red">请求类型错误</span>' . $_POST['cols']);
  }
}

运行实例 »

点击 "运行实例" 按钮查看在线实例


实现效果

屏幕快照 2018-04-16 01.02.51.png

实现效果2


屏幕快照 2018-04-16 01.03.08.png


总结：1.习惯了表单提交使用post；

         2.采用了form标签自带的reset重置和form下input标签的required功能

         3.使用ajax带地原生form提交

         4.后端可通过$_SERVER和$_GET和$POST这些超全局变量直接获取http的内容

         

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！