Next lesson:

I don’t know how many students have followed, but the latest project package will be attached at the end of this section

We are now going to start developing form-data: tables that can be added and deleted, and data extraction is easy:

Here’s a ready-made one for you. Address:

Down.htmleaf.com/1801/201801…

Once you have downloaded it, unzip it and paste it into the static folder of your project:

P_apis. HTML then we write the following code inside the form-data small div inside the big div in the bottom part of the debugshell div: P_apis

You don’t have to dig into the meaning of the code, after all, it’s a third-party component. Just use it well.

I’ve slightly tweaked the style so you can just copy the code:

<div class="table-responsive" style="width: 98%; color: black"> <table class="table table-bordered table-striped" id="mytable" style="background-color:white"> <thead style="color: #337ab7; font-size: x-small"> <tr> <td style="width: 30%">Key</td> <td style="width: 50%">Value</td> </tr> </thead> <tbody> <tr> <td>Username</td> <td>wqrf</td> </tr> <tr> <td>Password</td> <td>123456</td> </tr> </tbody> </table> </div> <button class=" BTN btn-default" id="add">< I class="fa fa-plus"></ I > Add new parameters </button> <script>window.jQuery || document.write('<script SRC = "/ static / 201801271505 / js/jquery - 1.11.0. Min. Js" > < \ / script > ') < / script > < script type = "text/javascript" src="/static/201801271505/js/bootstable.js"></script> <script type="text/javascript"> $('#mytable').SetEditable({ $addButton: $('#add'), }); </script>Copy the code

I changed the width and color of several styles and wrote the position path of static resource JS. You can copy it directly. But pay special attention to the js at the bottom,

 $('#mytable').SetEditable({
        $addButton: $('#add'),
    });
Copy the code

Here mytable is the ID of our table, the function inside is only a function button to add new parameters, we will add the edit/delete function manually next.

First look at the page effect:

We can simply test the functionality of the three buttons:

Add:

Delete and edit click error if there is an error. Do not panic, this is a third party code author wrote a strict syntax mark problem, we can find delete:

Open the bootstable. Js

You’ll see a string at the top: Use strict

Let’s delete this row. Then go back and refresh the page to test again:

Click the edit button, the small pencil marked, the line will enter the edit state, after we modify, click the check button, you can modify successfully.

Then we hit the Delete button to test it out:

Deletion was also successful.

So at this point, we’ve actually written our form-data table.

Next time we will do x-www-form-urlencoded using the same table. An error will be raised because this third-party component does not support multiple tables in the same HTML, which will interfere with each other. So our next lesson will focus on how to redevelop it to support multiple tables.