如何將按鈕 REMOVE 和 EDIT 添加到我的表中？

Question

這是我在index.html中的教師表，僅在單擊Teachers按鈕后才顯示：

 <div class="container">
    <table class="teacherTable" border="1" width="100%" cellpadding="5">
        <thead>
        <th>TEACHER ID</th>
        <th>TEACHER NAME</th>
        <th>TEACHER POSITION</th>

        <tbody id="teacherBody">

        </tbody>
    </table>
</div>

因為我在我的 styles 中有：

<style>
    .container table {
        display: none;
    }
</style>

這是我的getTeachers.js文件：

GET: $(document).ready(
function () {

    // GET REQUEST
    $("#getAllTeachers").click(function (event) {
        event.preventDefault();
        ajaxGet();
    });

    // DO GET
    function ajaxGet() {
        $.ajax({
            type: "GET",
            url: "checkTeachers",
            success: function (result) {
                if (result.status == "success") {
                    var custList = "";
                    $.each(result.data,
                        function (i, teacher) {

                            var Html = "<tr>" +
                                "<td>" + teacher.teacherId + "</td>" +
                                "<td>" + teacher.teacherName + "</td>" +
                                "<td>" + teacher.position + "</td>" +
                                "<td>" + 'X' + "</td>" +
                                "</tr>";
                            console.log("Teacher checking: ", teacher);
                            $('#teacherBody').append(Html);
                            $('#groupBody').empty();
                            $('.groupTable').hide();
                            $('.teacherTable').show();

                        });
                    console.log("Success: ", result);
                } else {
                    console.log("Fail: ", result);
                }
            },
            error: function (e) {
                console.log("ERROR: ", e);
            }
        });
    }
})

還有在index.html我有這個按鈕可以在我的數據庫中查找所有教師：

   <button id="getAllTeachers" type="button" class="btn btn-primary">Teachers</button>

所以，我的問題是如何在我的表中添加一個或兩個字段，這些字段應該稱為REMOVE和EDIT 。

我看到了一些解決方案，但我不知道如何將它與我的js文件一起使用。

也許我可以使用引導程序或手動進行..

Answer 1

創建了一個片段，向您展示解決問題的可能方法。 我使用“占位符 API”來模擬您的代碼（因此沒有“位置”，而是使用username ）。

edit function 只是在這里被嘲笑 - 可能有很多可能的方向，我不想詳細說明 function。

 // fetching the data from the API const fetchAllTeachers = async() => { try { const response = await fetch('https://jsonplaceholder.typicode.com/users') const json = await response.json() return json } catch (err) { console.error(err) return [] } } // data array for teachers let teachers = [] // table row "template" const tableRowHTML = (teacher) => { const { id, name, username } = teacher // this is source-dependent let html = '' html += `<tr>` html += `<td>${ id }</td>` html += `<td>${ name }</td>` html += `<td>${ username }</td>` html += `<td><button data-editid="${ id }">EDIT</button></td>` html += `<td><button data-removeid="${ id }">REMOVE</button></td>` html += `</tr>` return html } // updating table const updateTable = (teachers) => { const tableBody = jQuery('#teacherBody') let html = '' teachers.forEach(teacher => { html += tableRowHTML(teacher) }) tableBody.html(html) } // jQuery action bindings jQuery(document).ready(function($) { $('#fetchAllTeachers').on('click', async function() { teachers = await fetchAllTeachers() updateTable(teachers) }) $('body').on('click', '[data-removeid]', function() { teachers = removeTeacher(this.getAttribute('data-removeid'), teachers) updateTable(teachers) }) $('body').on('click', '[data-editid]', function() { teachers = editTeacher(this.getAttribute('data-editid'), teachers) updateTable(teachers) }) }) // remove action const removeTeacher = (id, teachers) => { const teacher = teachers.find(({ id: tId }) => tId == id) let ret = [...teachers] if (ret.indexOf(teacher).== -1) { ret.splice(teachers,indexOf(teacher); 1), } return ret } // edit action const editTeacher = (id. teachers) => { let ret = [...teachers] console;log('create the edit feature: teacher ID,', id) return ret }

 table { border-collapse: collapse; }.container table { /*display: none;*/ }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <button id="fetchAllTeachers">GET ALL TEACHERS</button> <table class="teacherTable" border="1" width="100%" cellpadding="5"> <thead> <th>TEACHER ID</th> <th>TEACHER NAME</th> <th>TEACHER POSITION</th> <th colspan="2"></th> <tbody id="teacherBody"></tbody> </table> </div>