Convert a HTML table to DataGrid 将html表格转换成DataGrid
2012-02-22 09:07
387 查看
1、表格列必须 在 <thead><tr><th>标题</th></tr></thead>标签中定义
表格内容必须在 <tbody><tr><td>内容</td></tr></tbody>标签中定义
2、table必须设置 class="easyui-datagrid" style="width:800px;height:100px;"
3、每个数据列必须设置字段名称。 field="name1" width="50"
效果:
代码:
表格内容必须在 <tbody><tr><td>内容</td></tr></tbody>标签中定义
2、table必须设置 class="easyui-datagrid" style="width:800px;height:100px;"
3、每个数据列必须设置字段名称。 field="name1" width="50"
效果:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery EasyUI</title> <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <script type="text/javascript" src="../jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script> </head> <body> <h1>Convert a HTML table to DataGrid</h1> <table id="tt" class="easyui-datagrid" style="width:350px;height:auto;"> <thead> <tr> <th colspan="6">标题</th> </tr> <tr> <th field="name1" width="50">Col 1</th> <th field="name2" width="50">Col 2</th> <th field="name3" width="50">Col 3</th> <th field="name4" width="50">Col 4</th> <th field="name5" width="50">Col 5</th> <th field="name6" width="50">Col 6</th> </tr> </thead> <tbody> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </tbody> </table> </body> </html>
相关文章推荐
- 使用easyUI转换HTML table到datagrid
- 使用easyUI转换HTML table到datagrid
- JavaScript实现将xml转换成html table表格的方法
- 使用python转换markdown to html
- 【Html】table标签,认识网页上的表格
- HTML的dl、dt、dd标记制作表格对决Table制作表格
- html --table表格
- HTML5+CSS3 表格设计(Table)
- CSS如何设置html table表格边框样式
- atom markdown转换PDF 解决AssertionError: html-pdf: Failed to load PhantomJS module
- JSON描述的列表转换成为HTML表格类(我觉得编码风格已经好很多了)
- HTML 表格table
- 【转载】HTML之TABLE表格(七)
- html中表格table的内容居中显示
- CSS如何设置html table表格边框样式 CSS如何设置table表格边框样式 对table设置css样式边框,分为几种情况: 1、只对table设置边框 2、对td设置边框 3、对table和
- 如何只用HTML画出一个圆角的Table表格?
- Python实现dict转换成HTML表格
- (转) DataGrid表格上字符串的HTML编码(很重要的)
- 使用jQuery操作HTML的table表格的实例解析
- 如何设置HTML页面自适应宽度的table(表格)