添加/修改：
2. 代码
@using ITOO.FreshNewReport.ViewModel @{ Layout = null; } <html> <head> <title>数据表格编辑_大气漂亮的Bootstrap后台管理系统模板Se7en - JS代码网 </title> <!--<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700" media="all" type="text/css" />--> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" type="text/css" /> <link href="" media="all" title="green-theme" type="text/css" /> <link href="" media="all" title="orange-theme" type="text/css" /> <link href="" media="all" title="magenta-theme" type="text/css" /> <link href="" media="all" title="gray-theme" type="text/css" /> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <script src="" type="text/javascript"></script> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head> <body> <div> <div> <div> <h1>Editable DataTables </h1> </div> <!-- DataTables Example --> <div> <div> <div> <div> <i></i>DataTable with Sorting<a href="#"><i></i>Add row</a> </div> <div> <table> <thead> @*<th> <input type="checkbox">*@ <th>姓名</th> <th>称谓 </th> <th>年龄 </th> <th>政治面貌</th> <th>电话号码 </th> <th>工作单位</th> <th>家庭住址</th> <th></th> <th></th> </thead> <tbody> @foreach (FamilyInfoViewModel enStuFam in ViewData["DataList"] as List<FamilyInfoViewModel>) { <tr> @*<td> <input type="checkbox"> </td>*@ <td>@enStuFam.Name </td> <td>@enStuFam.RelationShip</td> <td>@enStuFam.Age</td> <td>@enStuFam.PoliticalStatus</td> <td>@enStuFam.TelNum </td> <td>@enStuFam.WorkUnit</td> <td>@enStuFam.Address </td> <td> <a href="#">Edit</a> </td> <td> <a href="#">Delete</a> </td> </tr> } </tbody> </table> </div> </div> </div> </div> <!-- end DataTables Example --> </div> </div> </body> </html>
版本三
1.样式
卡片式表格：