11.3

标签：const value 11.3 input document data row

本次实现前端代码

add.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增生产计划</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #root {
            margin: 20px;
        }

        h2 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input, select {
            width: 300px;
            padding: 5px;
            font-size: 16px;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">新增生产计划</h1>
<div id="root" style="border: 1px solid black">
    <h2>增加生产计划</h2>
    <form id="addForm">
        <label for="planId">计划编号:</label>
        <input type="text" id="planId" name="planId" required oninput="limitInput(this)" maxlength="10">
        <label for="planName">计划名称:</label>
        <input type="text" id="planName" name="planName" required>
        <label for="planOverview">计划概述:</label>
        <input type="number" id="planOverview" name="planOverview">
        <label>排产方式:</label>
        <div id="way">
            <label><input type="radio" name="way" value="串行排产">串行排产</label>
            <label><input type="radio" name="way" value="并行排产">并行排产</label>
            <label><input type="radio" name="way" value="串并行排产">串并行排产</label>
        </div>
        <label for="beginTime">开始时间:</label>
        <input type="datetime-local" id="beginTime" name="beginTime">
        <label for="endTime">结束时间:</label>
        <input type="datetime-local" id="endTime" name="endTime">
        <label>包含工艺:</label>
        <div id="technology">
            <label><input type="checkbox" name="technology" value="锯">锯</label>
            <label><input type="checkbox" name="technology" value="热">热</label>
            <label><input type="checkbox" name="technology" value="车">车</label>
            <label><input type="checkbox" name="technology" value="铣">铣</label>
            <label><input type="checkbox" name="technology" value="钳">钳</label>
            <label><input type="checkbox" name="technology" value="去">去</label>
            <label><input type="checkbox" name="technology" value="珩">珩</label>
            <label><input type="checkbox" name="technology" value="表镀铬">表镀铬</label>
            <label><input type="checkbox" name="technology" value="表喷砂">表喷砂</label>
            <label><input type="checkbox" name="technology" value="综检">综检</label>
            <label><input type="checkbox" name="technology" value="洗">洗</label>
            <label><input type="checkbox" name="technology" value="包">包</label>
            <label><input type="checkbox" name="technology" value="入">入</label>
            <label><input type="checkbox" name="technology" value="装">装</label>
        </div>
        <button type="submit">添加生产计划</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("addForm").addEventListener("submit", function (event) {
        event.preventDefault();
        const planId = document.getElementById("planId");
        const planName = document.getElementById("planName");
        const planOverview = document.getElementById("planOverview");
        const way = document.querySelectorAll('input[name="way"]');
        let w;

        way.forEach(radio => {
            if (radio.checked) {
                w = radio.value;
                alert(w);
            }
        });
        const begin = document.getElementById("beginTime");
        const end = document.getElementById("endTime");
        const technologies = document.querySelectorAll('input[name="technology"]:checked');
        const teList = [];
        for (const t of technologies) {
            teList.push(t.value);
        }
        fetch('plan/add',
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    id: planId.value,
                    name: planName.value,
                    overview: planOverview.value,
                    productway: w,
                    begin: begin.value,
                    end: end.value,
                    technology: teList,
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.msg === 'success') {
                    alert("添加成功");
                    console.log(data);
                } else {
                    alert("添加失败  " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    function limitInput(input) {
        const value = input.value;
        if (value.length > 10) {
            input.value = value.slice(0, 10);
        }
        if (value.length < 10) {
            input.setCustomValidity('计划编号前八位必须为年月份后两位为编号');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>

2、delete.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除生产计划</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            border: 1px solid #ccc;
            padding: 500px;
        }

        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="tablecontainer">
    <h1 style="text-align: center">删除生产计划</h1>
    <form id="deleteform">
        <label>计划编号</label>
        <input type="text" id="studentid" required oninput="limitInput(this)" maxlength=10">
        <br>
        <div id="container">

        </div>
        <button type="submit" name="查询">查询</button>
    </form>
    <form id="delete">
        <input type="text" id="id" required oninput="limitInput(this)" maxlength=10">
        <br>
        <button type="submit" name="删除">删除</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("deleteform").addEventListener('submit', function (event) {
        event.preventDefault()
        const id = document.getElementById("studentid");
        fetch('plan/getById/' + id.value, {
            method: 'GET',
            headers: {
                'Content-Type': 'application.json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("tablecontainer");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");

        let row = document.createElement("tr");
        row.innerHTML = '<td>计划编号</td><td>计划名称</td><td>开始时间</td><td>结束时间</td>';
        tableBody.appendChild(row);

        row = document.createElement("tr");
        row.innerHTML = `<td>${data.id}</td><td>${data.name}</td><td>${data.begin}</td><td>${data.end}</td>`;
        tableBody.appendChild(row);

        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
<script>
    document.getElementById("delete").addEventListener('submit', function (event) {
        event.preventDefault();
        const studentid = document.getElementById("id");
        fetch('plan/delete/' + studentid.value, {
            method: 'DELETE',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(
                {
                    id: studentid.value
                }
            )
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg == 'success') {
                    alert("删除成功");
                } else {
                    alert("删除失败 " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            })
    });
</script>
<script>
    function limitInput(input) {
        const value = input.value;
        if (value.length > 10) {
            input.value = value.slice(0, 10);
        }
        if (value.length < 10) {
            input.setCustomValidity('计划编号前八位必须为年月份后两位为编号');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>

3、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生产计划管理系统</title>
    <style>
        .form {
            width: 600px;
            margin: 0 auto;
            /*border: 1px solid red;*/
        }

        .form table {
            margin: 0 auto;
        }

        .form table tr td {
            width: 100px;
            height: 30px;
            border: 1px solid #000;
            text-align: center;
        }

        button {
            display: block;
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">生产计划管理</h1>
<!-- 其余代码不变 -->
<div class="form">
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <th>编号</th>
            <th>功能</th>
        </tr>
        <tr>
            <td>1</td>
            <td>
                <a href="add.html" target="_blank">
                    <button>新增生产计划计划</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td><a href="update.html" target="_blank">
                <button>修改生产计划</button>
            </a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>
                <a href="delete.html" target="_blank">
                    <button>删除生产计划</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>
                <a href="selectByCondition.html" target="_blank">
                    <button>查询生产计划</button>
                </a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>
                <a href="select.html" target="_blank">
                    <button>生产计划浏览</button>
                </a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

4、select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生产计划浏览</title>
</head>
<body>
<div id="tablecontainer">

</div>
<div>
    <a href="index.html">
        <button>返回主界面</button>
    </a>
</div>
</body>
<script>
    display();

    function display() {
        fetch('plan/getAll', {
            method: 'GET',
            headers: {
                'Content-Type': 'application.json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data,);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    }
</script>
<script>
    function generateTable(data) {
        const tableContainer = document.getElementById("tablecontainer");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        // if (data.length>1) {
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");
        let row = document.createElement("tr");
        row.innerHTML = '<td>计划编号</td><td>计划名称</td><td>开始时间</td><td>结束时间</td>';
        tableBody.appendChild(row);
        // 查询方式是按姓名查询或多条查询
        for (let i = data.length - 1; i >= 0; i--) {
            row = document.createElement("tr");
            row.innerHTML = `<td>${data[i].id}</td><td>${data[i].name}</td><td>${data[i].begin}</td><td>${data[i].end}</td>`;
            tableBody.appendChild(row);
            table.appendChild(tableBody);
            tableContainer.appendChild(table);
        }
    }
</script>
</html>

4、select.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除生产计划</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .container {
            text-align: center;
            border: 1px solid #ccc;
            padding: 500px;
        }

        button {
            margin-top: 10px;
            padding: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="tablecontainer">
    <h1 style="text-align: center">删除生产计划</h1>
    <form id="deleteform">
        <label>计划编号</label>
        <input type="text" id="studentid" required oninput="limitInput(this)" maxlength=10">
        <br>
        <div id="container">

        </div>
        <button type="submit" name="查询">查询</button>
    </form>
    <form id="delete">
        <input type="text" id="id" required oninput="limitInput(this)" maxlength=10">
        <br>
        <button type="submit" name="删除">删除</button>
    </form>
    <div>
        <a href="index.html">
            <button>返回主界面</button>
        </a>
    </div>
</div>
</body>
<script>
    document.getElementById("deleteform").addEventListener('submit', function (event) {
        event.preventDefault()
        const id = document.getElementById("studentid").value;
        fetch(`plan/getById/${id}`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application.json'
            },
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg === 'success') {
                    generateTable(data.data);
                } else {
                    alert("此结果不存在");
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            });
    });
</script>
<script>

    function generateTable(data) {
        const tableContainer = document.getElementById("container");

        // 清空 tableContainer 中的所有子节点
        while (tableContainer.hasChildNodes()) {
            tableContainer.removeChild(tableContainer.firstChild);
        }
        const table = document.createElement("table");
        const tableBody = document.createElement("tbody");

        let row = document.createElement("tr");
        row.innerHTML = '<td>计划编号</td><td>计划名称</td><td>开始时间</td><td>结束时间</td>';
        tableBody.appendChild(row);

        row = document.createElement("tr");
        row.innerHTML = `<td>${data.id}</td><td>${data.name}</td><td>${data.begin}</td><td>${data.end}</td>`;
        tableBody.appendChild(row);

        table.appendChild(tableBody);
        tableContainer.appendChild(table);
    }
</script>
<script>
    document.getElementById("delete").addEventListener('submit', function (event) {
        event.preventDefault();
        const studentid = document.getElementById("id");
        fetch('plan/delete/' + studentid.value, {
            method: 'DELETE',
            headers: {
                'Content-type': 'application.json'
            },
            body: JSON.stringify(
                {
                    id: studentid.value
                }
            )
        })
            .then(response => response.json())
            .then(data => {
                if (data.msg == 'success') {
                    alert("删除成功");
                } else {
                    alert("删除失败 " + data.msg);
                }
            })
            .catch(error => {
                alert("请求失败，请重试");
                console.error(error);
            })
    });
</script>
<script>
    function limitInput(input) {
        const value = input.value;
        if (value.length > 10) {
            input.value = value.slice(0, 10);
        }
        if (value.length < 10) {
            input.setCustomValidity('计划编号前八位必须为年月份后两位为编号');
        } else {
            input.setCustomValidity('');
        }
    }
</script>
</html>

标签：const,value,11.3,input,document,data,row
From： https://www.cnblogs.com/zzqq1314/p/17806165.html

相关文章

赞助商

阅读排行