php 增刪改操做

時間 2019-12-07

標籤 php 增刪欄目 PHP 简体版

原文原文鏈接

最近在慕課網上學習php + ajax 實現表格的實時編輯，老師講的很是好，感謝老師，按照老師的講解，本身敲了一遍，收穫不少。javascript

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>可編輯表格DEMO</title>
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" >
		<link rel="stylesheet" href="css/main.css" >
		
	</head>
	<body>
		<div class="container">
			<table class="data table table-bordered table-striped">
			   <thead>
			       <tr>
					   <th>1</th>
					   <th>2</th>
					   <th>3</th>
					   <th>4</th>
					   <th>5</th>
					   <th>6</th>
					   <th>7</th>
					   <th>8</th>
					   <th><a id="addBtn" class="optLink" href="javascript:;">增長</a></th>
				   </tr>
			   </thead>
			   <tbody>
			     
			   </tbody>
			</table>
		</div>
		<script type="text/javascript" src="../jQuery/jQuery-2.1.4.min.js"> </script>
		<script type="text/javascript" src="js/app.js"> </script>
	</body>
</html>

$(function() {
    var tbody = $("table.data tbody");
    var init_data_url = "data.php?action=init_data_list";
    $.get(init_data_url, function(data) {
        //打斷點後能夠在console 裏面寫data 回車顯示data數據
        //debugger;
        //從後臺獲取全部的數據並用$.parseJSON轉換成對象
        var row_items = $.parseJSON(data);
        for (i = 0; i < row_items.length; i++) {
            var data_dom = create_row(row_items[i]);
            tbody.append(data_dom);
        }
    })

    function delHandler() {

        var data_id = $(this).attr("dataid");
        var meButton = $(this);
        $.post("data.php?action=del_row", { dataid: data_id }, function(res) {
            alert(res);
            console.log(res == "ok");
            if (res == "ok") {
                $(meButton).parent().parent().remove();
            } else {
                alert("刪除失敗...");
            }
        });
    }

    function editHander() {
        alert("123");
        var data_id = $(this).attr("dataid");
        var meButton = $(this);
        var meRow = $(this).parent().parent();
        var editRow = $("<tr></tr>");
        debugger;
        for (var i = 0; i < 8; i++) {
            var editTd = $("<td><input type='text' class='from-control'/></td>");
            var v = meRow.find("td:" + 'eq(' + i + ')').html();
            editTd.find("input").val(v);
            editRow.append(editTd);
        }
        var opt_td = $("<td></td>");
        var saveButton = $("<a href='javascript:;'>保存 </a>");
        saveButton.click(function() {
            var currentRow = $(this).parent().parent();
            var input_fields = currentRow.find("input");
            var post_fields = {};
            for (var i = 0; i < input_fields.length; i++) {
                post_fields["col_" + i] = input_fields[i].value;
            }
            post_fields["id"] = data_id;
            $.post("data.php?action=edit_row", post_fields, function(res) {
                if (res = "ok") {
                    var newUpdateRow = create_row(post_fields);
                    currentRow.replaceWith(newUpdateRow);
                } else {
                    alert("數據更新失敗...")
                }
            })
        })
        var cancelButton = $("<a href='javascript:;'>取消</a>");
        opt_td.append(saveButton);
        opt_td.append(cancelButton);
        editRow.append(opt_td);
        meRow.replaceWith(editRow);

    }

    function create_row(data_item) {
        var row_obj = $("<tr></tr>");
        for (var k in data_item) {
            if (k != "id") {
                var col_td = $("<td></td>");
                col_td.html(data_item[k]);
                row_obj.append(col_td);
            }
        }
        var delButton = $("<a href='javascript:;'>刪除 </a>");
        delButton.attr("dataid", data_item["id"]);
        delButton.click(delHandler);
        var editButton = $("<a href='javascript:;'> 編輯</a>");
        editButton.attr("dataid", data_item["id"]);
        editButton.click(editHander);
        var opt_td = $("<td></td>");
        opt_td.append(delButton);
        opt_td.append(editButton);
        row_obj.append(opt_td);
        return row_obj;
    }
    $("#addBtn").click(function() {
        var addRow = $("<tr></tr>");
        for (i = 0; i < 8; i++) {
            var col_td = $("<td><input type='text' class='form-control' /></td>");
            addRow.append(col_td);
        }
        var col_opt = $("<td></td>");
        var confirmBtn = $("<a href='javascript:;'>確認 </a>");
        confirmBtn.click(function() {
            var currentRow = $(this).parent().parent();
            var input_fields = currentRow.find("input");
            var post_fields = {};
            for (i = 0; i < input_fields.length; i++) {
                post_fields["col_" + i] = input_fields[i].value;
            }
            $.post("data.php?action=add_row", post_fields, function(res) {
                if (res > 0) {
                    post_fields["id"] = res;
                    var postAddRow = create_row(post_fields);
                    currentRow.replaceWith(postAddRow);
                } else {
                    alert("插入失敗...")
                }
            })

        })
        var cancelBtn = $("<a href='javascript:;'>取消 </a>");
        cancelBtn.click(function() {
            $(this).parent().parent().remove();
        })
        col_opt.append(confirmBtn);
        col_opt.append(cancelBtn);
        addRow.append(col_opt);
        tbody.append(addRow);
    })
})

<?php

$action = $_GET['action'];
switch ($action) {
    case 'init_data_list':
        init_data_list();
        break;

    case 'add_row':
        add_row();
        break;

    case 'del_row':
        del_row();
        break;

    case 'edit_row':
        edit_row();
        break;
}
function init_data_list() {
    $sql = "SELECT * FROM `et_data`";
    $query = query_sql($sql);
    while ($row = $query->fetch_assoc()) {
        $data[] = $row;
    }
    //把數據轉換成json格式
    echo json_encode($data);
}
function del_row() {
    //echo "ok";
    $dataid = $_POST["dataid"];
    $sql = "DELETE FROM et_data WHERE id =" . $dataid;
    if (query_sql($sql)) {
        echo "ok";
    } else {
        echo "db error...";
    }
}
function add_row() {
    $sql = 'INSERT INTO et_data (c_a,c_b,c_c,c_d,c_e,c_f,c_g,c_h) VALUES(';
    for ($i = 0; $i < 8; $i++) {
        $sql.= '\'' . $_POST['col_' . $i] . '\', ';
    }
    $sql = trim($sql, ", ");
    $sql.= ')';
    if ($res = query_sql($sql, "SELECT LAST_INSERT_ID() as Ld")) {
        $d = $res->fetch_assoc();
        echo $d["Ld"];
    } else {
        echo "db error...";
    }
}
function edit_row() {
    $sql = "UPDATE et_data SET ";
    $id = $_POST["id"];
    unset($_POST["id"]);
    for ($i = 0; $i < 8; $i++) {
        $sql.= ' c_' . chr(97 + $i) . '= \'' . $_POST["col_" . $i] . '\', ';
    }
    $sql = trim($sql, ", ");
    $sql.= "WHERE id=" . $id;
    if (query_sql($sql)) {
        echo "ok";
    } else {
        echo "db error ...";
    }
}
function query_sql() {
    $mysqli = new mysqli("127.0.0.1", "root", "123", "demodb");
    $sqls = func_get_args();
    foreach ($sqls as $s) {
        $query = $mysqli->query($s);
    }
    $mysqli->close();
    return $query;
}
?>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。