[Django] adding and deleting tables (for reference), django instance

[Django] adding and deleting tables (for reference), django instance

You have not used any table plug-ins. For more information, see the examples on the Internet. For more information, see!

First, let's take a look at the figure. The table layout uses bootstrap. As the saying goes, css will be used when there are more bootstrap slaves:

There are two buttons on them, which are dynamically added. You can use the jquery language, $ ("# xx"). append adds a new button,

The most basic form code:

<Button class = "btn-small btn-primary" type = "button" id = "blank"> Add a blank form </button>
<Form class = "form-inline" >{% csrf_token %} <table class = "table-conde" id = "t2"> <caption class = "text-left"> </caption> <thead> </thead> <tbody> </tbody> <tfoot> </table> <table class = "table-conde" id = "t3"> <caption class = "text-left"> </caption> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot> </table> <div class = "text-center" id = "form_add"> </div> </form>

Next, use js to dynamically load the table:

$ ('# Blank '). click (function () {// blank form $ ("# t1 caption "). append ("<span class = 'text-info'> <I class = 'icon-forward '> </I> basic contract list </span> "); $ ("# t1 tbody "). append (formbill (); $ ("# t2 caption "). append ("<span class = 'text-info'> <I class = 'icon-forward '> </I> Appendix 1 contract mobile phone list & nbsp; & nbsp; <a class = 'btn btn-small' id = 't2row'> <I class = 'icon-plus '> </I> Add a row </a> </span> "); $ ("# t2 thead "). append ("<th> customer name </th> <th> Contract No. </th> <th> business number </th> <th> package type </th> <th>> operator </th> <th> remarks </th> <th> operation </th> "); $ ("# t3 caption "). append ("<span class = 'text-info'> <I class = 'icon-forward '> </I> Appendix 2 landline list of contract hosts & nbsp; & nbsp; <a class = 'btn btn-small' id = 't3row'> <I class = 'icon-plus '> </I> Add a row </a> </span> "); $ ("# t3 thead "). append ("<th> customer name </th> <th> Contract No. </th> <th> business number </th> <th> package type </th> <th>> operator </th> <th> remarks </th> <th> operation </th> "); $ ("# form_add "). append ("<input type = 'button 'id = 'btn _ add' value = 'submit data' class = 'btn btn-primary btn-sm '/> ");} );

Then, you can add or delete rows:

// Add rows
$ ('# T2 caption '). on ("click", "# t2row", function () {var len = $ ("# t2 tr "). length + 1; $ ("# t2 tbody "). append ("<tr id =" + len + ">" + "<td> <input type = 'text' class = 'input-medium acct_code 'placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium acc_nbr' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium tc_type' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium con_agent' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium remark' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium remark' placeholder = '. input-medium '> </td> "+" <td> <a class = 'btn btn-small' onclick = 'deltr ("+ len + ") '> Delete </a> </td> "+" </tr> ") ;}); $ (' # t3 caption '). on ("click", "# t3row", function () {var len = $ ("# t3 tr "). length + 1; $ ("# t3 tbody "). append ("<tr id =" + len + ">" + "<td> <input type = 'text' class = 'input-medium acct_name 'placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium acct_code' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium acc_nbr' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium tc_type' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium con_agent' placeholder = '. input-medium '> </td> "+" <td> <input type = 'text' class = 'input-medium remark' placeholder = '. input-medium '> </td> "+" <td> <a class = 'btn btn-small' onclick = 'deltr ("+ len + ") '> Delete </a> </td> "+" </tr> ");});
// Delete rows
Function deltr (index ){
$ ("Tr [id = '" + index + "']"). remove (); // Delete the current row
}

 

Pay attention to the following two issues:

First, the buttons like id = t2row/t3rowde are dynamically added, if you use a normal $ ('# XXX '). click is useless. You must use $ ('# t2 caption '). on ("click", "# t2row", function () {}) Format

Second, the id of the delete button must correspond to the id in tr.

 

After adding and deleting rows, you need to pass the multi-field form to the backend of django. The Code is as follows:

Var str_tailsj = "["; $ ("# t2 tbody "). find ("tr "). each (function () {var tdArr1 = $ (this ). children (); str_tailsj = str_tailsj + "{'product _ name': 'cell phone ',"; str_tailsj = str_tailsj + "'acct _ name ': '"+ tdArr1.eq (0 ). find ("input "). val () + "',"; str_tailsj = str_tailsj + "'acct _ Code':'" + tdArr1.eq (1 ). find ("input "). val () + "',"; str_tailsj = str_tailsj + "'Acc _ nbr': '" + tdArr1.eq (2 ). find ("input "). val () + "',"; str_tailsj = str_tailsj + "'tc _ type':'" + tdArr1.eq (3 ). find ("input "). val () + "',"; str_tailsj = str_tailsj + "'Con _ agent':'" + tdArr1.eq (4 ). find ("input "). val () + "',"; str_tailsj = str_tailsj + "'remark':'" + tdArr1.eq (5 ). find ("input "). val () + "'}," ;}); str_tailsj = str_tailsj + "]";

The multi-field form is passed to the backend in the form of a json string, and then the backend uses eval in python to convert it into a corresponding form for processing. For specific code, refer:

Reference: http://www.cnblogs.com/CQ-LQJ/p/5442785.html

A = "[{'bill1': '1', 'bill41': '2'}, {'bill1': '1', 'bill41 ': '2'},] "print eval (a) [0] ['bill1'] the output is 1