How to add View/Delete button to HTML Table loaded from JSON Data

Question

I have a plain HTML Javascript table and I am loading data from a javascript file which contains the data in a JSON format. Everything seems to work perfectly fine. Now I want to add two buttons View and Delete which when clicked will go to another page or execute another javascript function. Can someone help me figure out how to add the button in the given code.

HTML Code:

        <table class="table-striped border-success">
            <thead>
                <tr>
                    <th data-field="id">
                        <span class="text-success">
                            ID
                        </span>
                    </th>
                    <th data-field="fName">
                        <span class="text-success">
                            First Name
                        </span>
                    </th>
                    <th data-field="lName">
                        <span class="text-success">
                            Last Name
                        </span>
                    </th>
                </tr>
            </thead>
        </table>
    </div>

    <!-- Include the file where the JSON data is stored -->
    <script type="text/javascript" src="test.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            // Use the given data to create 
            // the table and display it
            $('table').bootstrapTable({
                data: mydata
            });
        });

        // Parse the imported data as JSON
        // and store it
        var mydata = JSON.parse(da)
    </script>
</body>

</html>

Test.js (Javascript code which contains JSON Data):

var da = `[
    { "id": "24323", 
      "fName": "Mark ", 
      "lName": "Smith" },
    { "id": "24564",
      "fName": "Caitlin", 
      "lName": "MacDonald" }
]`;

Answer 1

You can add the 2 buttons something like this

 <table class="table-striped border-success">
        <thead>
            <tr>
                <th data-field="id">
                    <span class="text-success">
                        ID
                    </span>
                </th>
                <th data-field="fName">
                    <span class="text-success">
                        First Name
                    </span>
                </th>
                <th data-field="lName">
                    <span class="text-success">
                        Last Name
                    </span>
                </th>
            </tr>
        </thead>
    </table>
  <button type='button' onclick='gotoPage()'>View</button>
  <button type='button' onclick='delete()'>Delete</button>
</div>
<!-- Include the file where the JSON data is stored -->
<script type="text/javascript" src="test.js">
</script>
<script type="text/javascript">
    $(document).ready(function () {

        // Use the given data to create 
        // the table and display it
        $('table').bootstrapTable({
            data: mydata
        });
    });
    
    function gotToPage(){
       window.location.href = '/somepage'
    }

    function delete(){
       // Your delete functionality
    }

    // Parse the imported data as JSON
    // and store it
    var mydata = JSON.parse(da)
</script>