How to implement real-time editing of tables with php and ajax (code attached)-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

How to implement real-time editing of tables with php and ajax (code attached)

不言

Aug 18, 2018 pm 05:29 PM

php

The content of this article is about how to implement real-time editing of tables with php and ajax (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

AJAX usage scenarios

Asynchronous search filtering content data (keyword search)
Form asynchronous verification (form submission Verification)
Asynchronous loading of content data (more content)
Data logic processing

AJAX features

Asynchronous interaction with the server without refreshing the current page
Optimizes the data between the browser and the server Transmission, reducing unnecessary data round-trips
Transfer part of the data to the client, reducing the pressure on the server

The basics of implementing AJAX Idea

Select a javascript class library according to your needs
The javascript part transmits data to the server
PHP accepts the passed data, processes the data, and returns it to JavaScript
javascript accepts the data from PHP and processes it accordingly

Basic knowledge

Front-end aspect: html css javascript jquery json
Server aspect: php apache (nginx)
Database: mysql sql

Learning objectives

Learn asynchronous interaction between php and javascript
Understand the operating structure and basic principles of ajax code
Clear layout of javascript code

Rendering

How to implement real-time editing of tables with php and ajax (code attached)

Code implementation

Create a basic data table
Complete the display function
Complete the delete data function
Complete the add data function
Complete the data modification function

Table SQL

create table et_data(
    id int primary key auto_increment,
    c_a varchar(30),
    c_b varchar(30),
    c_c varchar(30),
    c_d varchar(30),
    c_e varchar(30),
    c_f varchar(30),
    c_g varchar(30),
    c_h varchar(30)
);

Display data process

Display a basic html
$.get=====> ;data.php
data.php gets db data ==>js
js=>Generate rows and throw them to basic html

Build the front-end structure before adding data

Add buttons to UI and 8 text box operation columns
Cancel function
Confirm to add button and collect UI data—>data.php
data.php —>js
The list displays normally, and the record still exists after refreshing

Editing function

Add events to the edit button , Replace UI Delete button –>Save button Edit button –>Cancel button
Cancel editing event
Save edited event, Mobile data->data.php
##data.php->js

1. Style: main.css

body{background-color:#899BA5;}
.container {width:960px;margin:80px auto;}
td {font-size:20px;width:120px;height:40px;text-align:center;color:black;cursor:pointer;background-color:white;}
td:hover{background-color:#aaaacc;}
input.txtField{width:90px;height:30px;}
.optLink{text-decoration:none;  color:#f46948;}
.optLink:hover{color:#cc0033;}

2. Basic template: index.html

<!doctype html><html>
    <head>
        <meta charset="utf-8">
        <title>可编辑表格DEMO</title>
        <link rel="stylesheet" href="css/main.css" >
    </head>
    <body>
        <p class="container">
            <table class="data">
                <tr>
                    <td>1</td>  
                    <td>2</td>  
                    <td>3</td>  
                    <td>4</td>  
                    <td>5</td>  
                    <td>6</td>  
                    <td>7</td>  
                    <td>8</td>  
                    <td style="width:240px;">
                        <a id="addBtn" class="optLink" href="javascript:;"/>添加</a>
                    </td>   
                </tr>
            </table>
        </p>
        <script type="text/javascript" src="js/jquery.js"> </script>
        <script type="text/javascript" src="js/app.js"> </script>
    </body></html>

3 , JS code: app.js

$(function(){
    var g_table = $("table.data");//定义全局变变量，定位到html的表格
    var init_data_url = "data.php?action=init_data_list";
    $.get(init_data_url,function(data){
        var row_items = $.parseJSON(data);//json数据转换成json数组对象
        //js循环遍历
        for(var i = 0 , j = row_items.length ; i < j ; i++){            
        var data_dom = create_row(row_items[i]);
            g_table.append(data_dom);
        }
    });    //循环生成行记录
    function create_row(data_item){
        var row_obj = $("<tr></tr>");        
        for(var k in data_item){            
        if("id" != k){//去除返回字段中的id
                var col_td = $("<td></td>");
                col_td.html(data_item[k]);//给col_td写入内容
                row_obj.append(col_td);//追加DOM
            }
        }        //自定义按钮
        var delButton = $(&#39;<a class="optLink" href="javascript:;">删除 </a>&#39;);//删除按钮
        delButton.attr("dataid",data_item[&#39;id&#39;]);//给按钮添加dataid属性
        delButton.click(delHandler);//给按钮添加点击事件
        var editButton = $(&#39;<a class="optLink" href="javascript:;">编辑</a>&#39;);//编辑按钮
        editButton.attr("dataid",data_item[&#39;id&#39;]);
        editButton.click(editHandler);        //追加操作列
        var opt_td = $(&#39;<td></td>&#39;);
        opt_td.append(delButton);
        opt_td.append(editButton);
        row_obj.append(opt_td);        return row_obj;
    }    //操作列的删除事件
    function delHandler(){
        var data_id = $(this).attr("dataid");//获取删除的dataid的值，$(this)指点击的这个button
        var meButton = $(this);//按钮这个变量
        $.post("data.php?action=del_row",{dataid:data_id},function(res){
            if(res == "ok"){
                $(meButton).parent().parent().remove();//删除行记录
            }else{
                alert(res);
            }
        });
    }    //添加行记录
    $("#addBtn").click(function(){
        var addRow = $("<tr></tr>");        //八个文本框
        for(var i=0;i<8;i++){           
         var col_td = $("<td><input type=&#39;text&#39; class=&#39;txtField&#39;/></td>");
            addRow.append(col_td);
        }        //操作列
        var col_opt = $("<td></td>");        
        var confirmBtn = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>确认 </a>");
        confirmBtn.click(function(){//确认操作
            var currentRow = $(this).parent().parent();//tr
            var input_fields = currentRow.find("input");           
             var post_fields = {};//发送数据对象
            for(var i=0,j=input_fields.length;i<j;i++){
                post_fields[&#39;col_&#39; + i] = input_fields[i].value;
            }
            $.post("data.php?action=add_row",post_fields,function(res){
                if(0 < res){
                    post_fields[&#39;id&#39;] = res;                    
                    var postAddRow = create_row(post_fields);
                    currentRow.replaceWith(postAddRow);
                }else{
                    alert(res);
                }
            });
        });        
        var cancelBtn = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>取消</a>");
        cancelBtn.click(function(){//删除操作，取消直接删除行
            $(this).parent().parent().remove();
        });


        col_opt.append(confirmBtn);
        col_opt.append(cancelBtn);
        addRow.append(col_opt);

        g_table.append(addRow);
    });    //编辑行记录
    function editHandler(){
        var data_id = $(this).attr("dataid");        
        var meButton = $(this);        
        var meRow = $(this).parent().parent();//没有事件
        var editRow = $("<tr></tr>");       
         for(var i=0;i<8;i++){            
         var editTd = $("<td><input type=&#39;text&#39; class=&#39;txtField&#39;/></td>");            
         var v = meRow.find(&#39;td:eq(&#39; + i +&#39;)&#39;).html();
            editTd.find(&#39;input&#39;).val(v);
            editRow.append(editTd);
        }        //操作列
        var opt_td = $("<td></td>");        
        var saveButton = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>保存 </a>");
        saveButton.click(function(){
            var currentRow = $(this).parent().parent();            
            var input_fields = currentRow.find("input");           
             var post_fields = {};            
             for(var i=0,j=input_fields.length;i<j;i++){
                post_fields[&#39;col_&#39; + i] = input_fields[i].value;
            }
            post_fields[&#39;id&#39;] = data_id;
            $.post("data.php?action=edit_row",post_fields,function(res){
                if(res == &#39;ok&#39;){                    
                var newUpdateRow = create_row(post_fields);
                    currentRow.replaceWith(newUpdateRow);
                }else{
                    alert(res);
                }
            });
        });       
         var cancleButton = $("<a href=&#39;javascript:;&#39; class=&#39;optLink&#39;>取消</a>")
        cancleButton.click(function(){
            var currentRow = $(this).parent().parent();//当前行
            meRow.find(&#39;a:eq(0)&#39;).click(delHandler);//新替换的行没有点击事件，需要重新赋予点击事件
            meRow.find(&#39;a:eq(1)&#39;).click(editHandler);
            currentRow.replaceWith(meRow);//meRow为以前的行
        });

        opt_td.append(saveButton);
        opt_td.append(cancleButton);
        editRow.append(opt_td);
        meRow.replaceWith(editRow);
    }    //打印输出调试
    function debug(res){
        console.log(res);
    }
});

4, PHP code: data.php

<?php
//路由
$action = $_GET[&#39;action&#39;];
switch($action){    
case &#39;init_data_list&#39;:
    init_data_list();    
    break;    
    case &#39;add_row&#39;:
    add_row();    
    break;    
    case &#39;del_row&#39;:
    del_row();    
    break;    
    case &#39;edit_row&#39;:
    edit_row();    
    break;
}//初始化数据
function init_data_list(){
    $sql = "SELECT * FROM `et_data` ";//下面函数的参数
    $query = query_sql($sql);//自定义函数未定义形参
    while ($row = $query->fetch_assoc()) {       
     $data[] = $row;
    }    echo json_encode($data);exit();

}//新增行记录function add_row(){
    $sql = &#39;INSERT INTO `et_data` ( `c_a`,`c_b`,`c_c`,`c_d`,`c_e`,`c_f`,`c_g`,`c_h` ) VALUES ( &#39;;    
    for($i = 0;$i<8;$i++){        
    $sql .= &#39;\&#39;&#39; . $_POST[&#39;col_&#39; . $i] . &#39;\&#39;,&#39;;
    }    $sql = trim($sql,&#39;,&#39;);    $sql .= &#39;)&#39;;    
    $lastInsertId = "SELECT LAST_INSERT_ID() AS LD";    
    if($res = query_sql($sql,$lastInsertId)){        
    $d = $res->fetch_assoc();        
    echo $d[&#39;LD&#39;];exit();
    }else{        
    echo "db error...";exit();
    }
}//删除行记录
function del_row(){
    $dataid = $_POST[&#39;dataid&#39;];    
    $sql = "DELETE FROM `et_data` where `id` = " . $dataid;    
    if(query_sql($sql)){        
    echo "ok";exit();
    }else{        
    echo "db error...";exit();
    }
}//编辑行记录
function edit_row(){
    $sql = "UPDATE     `et_data` SET ";    
    $id = $_POST[&#39;id&#39;];    
    unset($_POST[&#39;id&#39;]);    
    for($i=0;$i<8;$i++){       
     $sql .= &#39;`c_&#39;.chr(97 + $i) . &#39;` = \&#39;&#39;.$_POST[&#39;col_&#39; . $i] . &#39; \&#39;,&#39;; 
    }    
    $sql = trim($sql,&#39;,&#39;);    
    $sql .= &#39; WHERE `id` = &#39; . $id;    
    if(query_sql($sql)){        
    echo "ok";exit();
    }else{        
    echo "db error...";exit();
    }
}//数据库查询function query_sql(){
    $mysqli = new mysqli(&#39;127.0.0.1&#39;,&#39;root&#39;,&#39;root&#39;,&#39;etable&#39;);    
    $sqls = func_get_args();//获取函数的所有参数
    foreach ($sqls as $key => $value) {       
     $query = $mysqli->query($value);
    }    
    $mysqli->close();    
    return $query;
}

Source code link: https://pan.baidu.com/s/1fAinVXU-nWt7ODgrWoNRIg Password: n5yr

Related recommendations:

PHP code example to realize that member accounts can only be logged in uniquely

Solution to memory overflow in phpExcel when exporting files method

The above is the detailed content of How to implement real-time editing of tables with php and ajax (code attached). For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

php怎么把负数转为正整数Apr 19, 2022 pm 08:59 PM

php把负数转为正整数的方法：1、使用abs()函数将负数转为正数，使用intval()函数对正数取整，转为正整数，语法“intval(abs($number))”；2、利用“~”位运算符将负数取反加一，语法“~$number + 1”。

php怎么实现几秒后执行一个函数Apr 24, 2022 pm 01:12 PM

实现方法：1、使用“sleep(延迟秒数)”语句，可延迟执行函数若干秒；2、使用“time_nanosleep(延迟秒数,延迟纳秒数)”语句，可延迟执行函数若干秒和纳秒；3、使用“time_sleep_until(time()+7)”语句。

php怎么除以100保留两位小数Apr 22, 2022 pm 06:23 PM

php除以100保留两位小数的方法：1、利用“/”运算符进行除法运算，语法“数值 / 100”；2、使用“number_format(除法结果, 2)”或“sprintf("%.2f",除法结果)”语句进行四舍五入的处理值，并保留两位小数。

php怎么根据年月日判断是一年的第几天Apr 22, 2022 pm 05:02 PM

判断方法：1、使用“strtotime("年-月-日")”语句将给定的年月日转换为时间戳格式；2、用“date("z",时间戳)+1”语句计算指定时间戳是一年的第几天。date()返回的天数是从0开始计算的，因此真实天数需要在此基础上加1。

php字符串有没有下标Apr 24, 2022 am 11:49 AM

php字符串有下标。在PHP中，下标不仅可以应用于数组和对象，还可应用于字符串，利用字符串的下标和中括号“[]”可以访问指定索引位置的字符，并对该字符进行读写，语法“字符串名[下标值]”；字符串的下标值（索引值）只能是整数类型，起始值为0。

php怎么读取字符串后几个字符Apr 22, 2022 pm 08:31 PM

在php中，可以使用substr()函数来读取字符串后几个字符，只需要将该函数的第二个参数设置为负值，第三个参数省略即可；语法为“substr(字符串,-n)”，表示读取从字符串结尾处向前数第n个字符开始，直到字符串结尾的全部字符。

php怎么替换nbsp空格符Apr 24, 2022 pm 02:55 PM

方法：1、用“str_replace(" ","其他字符",$str)”语句，可将nbsp符替换为其他字符；2、用“preg_replace("/(\s|\&nbsp\;||\xc2\xa0)/","其他字符",$str)”语句。

php怎么判断有没有小数点Apr 20, 2022 pm 08:12 PM

php判断有没有小数点的方法：1、使用“strpos(数字字符串,'.')”语法，如果返回小数点在字符串中第一次出现的位置，则有小数点；2、使用“strrpos(数字字符串,'.')”语句，如果返回小数点在字符串中最后一次出现的位置，则有。

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

Repo: How To Revive Teammates

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Hot Tools

Dreamweaver CS6

Visual web development tools

Dreamweaver Mac version

Visual web development tools

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),