Bootstrap to implement a table with additions and deletions (demo detailed) _javascript Skills

Objective

Bootstrap table style, there are similar easyui tables, there are card-type table, put on the mobile side of the display, the same. But Bootstrap's own table is not the operation of the list, a lot of resources on the Internet, but are relatively single, fragmented, JS, CSS also often give the incomplete, oneself after about one months time, the form encapsulated a bit, hoping to share to everyone.

The table encapsulates 3 versions, and then shows you the style and code.

Version One

1. Style

Table layout:

Add: Add a new line of blank code

Modify: Select the modifiable columns, click the cells you want to modify, and then change to an editable state.

2. Code

View Code:

<div class= "Container-fluid main-content" > <div class= "Row" > <div class= "col-lg-12" > <div class= "  
Widget-container fluid-height clearfix > @* button *@ <div class= "heading" > @* Add button *@ <span class= "Ui-button" > <a class= "btn btn-success glyphicon glyphicon-plus" href= ". /addeduinfo/addeduinfo "> Add </a> </span> @* modify *@ <span class=" Ui-button "> <a class=" btn Btn-warn ing glyphicon glyphicon-edit "href=". /addeduinfo/addeduinfo "> Modify </a> </span> @* Delete *@ @* <span class=" Ui-button "data-target=" #myModal " > <a class= "btn btn-danger glyphicon glyphicon-minus" > Delete </a> </span>*@ <span> <button t Ype= "button" class= "btn btn-danger glyphicon Glyphicon-minus" data-toggle= "modal" data-target= "#myModal" > Delete </ button> </span> </div> <table id= "events-table" style= "font-size:15px" class= "table" data-toggle= "t Able "data-card-view=" true "Data-url="/stupersoninfo/Showeducation "> <thead> <tr class=" info "> <th data-field=" state "data-checkbox=" true "></th > <th data-field= "StartDate" data-sortable= "true" > Start date </th> <th data-field= "EndDate" data-sortable = "true" > End date </th> <th data-field= "Schoolname" data-sortable= "true" > Graduation school </th> <th Data-field = "TeacherName" data-visible= "true" > Proof teacher </th> @* <th data-field= "data-sortable=" true "data-formatter=" Operateformatter "data-events=" operateevents "> Edit </th>*@ </tr> </thead> </table> </div > </div> </div> </div>

Controller code:

#region showeducation () Show education Experience Wang Mei June 5, 2015 
///<summary> 
///Show educational experience 
///</summary> 
/// <returns> Educational Experience json</returns> public 
Jsonresult showeducation () 
{ 
//create WCF Interface 
Ieduinfoservice eduserviceshow = Servicefactory.geteduinfoservice (); 
Obtain the identity card number 
string identitycardid = (string) memcachehelper.get ("Identitycardid") from the cache; 
Invoke WCF Query method 
list<eduexperienceviewmodel> listeduinfo = Eduserviceshow.queryeduinfo (identitycardid); 
Returns the JSON string return 
JSON (Listeduinfo, Jsonrequestbehavior.allowget) 
; 
#endregion

The above is a small set to introduce the bootstrap to realize with the deletion of the function of the table (demo detailed), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!