如何将按钮 REMOVE 和 EDIT 添加到我的表中？

Question

It is my teacher table in index.html which displayed only after click on button 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>

because I have in my styles:

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

And here is my getTeachers.js file:

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);
            }
        });
    }
})

And also in index.html I have this button for looking for all teachers in my database:

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

So, my question is how to add one more or two fields to my table which should be called REMOVE and EDIT .

I saw some solutions but I have no idea how to use it with my js file.

Maybe I can use bootstrap for it or do it manually..

Answer 1

Created a snippet to show you a possible way to solve the question. I used a "placeholder API" to simulate your code (so there's no "position", instead I used username ).

The edit function is just mocked here - that can have so many possible directions, that I didn't want to elaborate the 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>