`
joerong666
  • 浏览: 418299 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

div 、ul、li 动态生成table

 
阅读更多

public string GenerateTable(int colCount,SqlDataReader rs,string[] fields,string startStr,string endStr)
        {
            int i = 0;
            StringBuilder resultStr = new StringBuilder();

            while (rs.Read())
            {
                //将索引复位
                if (++i % colCount == 0)
                    i = 0;

                //colCount余数为1说明将进行分行,接下的列将纳入新的行中
                if (i == 1)
                    resultStr.Append("<ul>");

                foreach (string field in fields)
                {
                    //列标签开始
                    resultStr.Append("<li>");

                    //内容
                    resultStr.Append(startStr);
                    resultStr.Append(rs[field].ToString());
                    resultStr.Append(endStr);

                    //列标签结束
                    resultStr.Append("</li>");
                }

                //colCount余数为0说明行结束
                if (i == 0)
                    resultStr.Append("</ul>");
            }

            //如果colCount的余数在0和colCount之间,则说明前一行的列数不够colCount,结尾尚无</ul>,故需补上
            if (0 < i && i < colCount)
                resultStr.Append("</ul>");

            return resultStr.ToString();
        }

        /// <summary>
        /// 用div、ul、li 生成表格
        /// </summary>
        /// <param name="colCount">每行的列数</param>
        /// <param name="fields"></param>
        /// <param name="startStr"></param>
        /// <param name="endStr"></param>
        /// <param name="liClass"></param>
        /// <returns></returns>
        public string GenerateRow(int colCount, string[] fields, string startStr, string endStr,string liClass)
        {
            int i = 0;
            StringBuilder resultStr = new StringBuilder();

            foreach (string field in fields)
            {
                //将索引复位
                if (++i % colCount == 0)
                    i = 0;

                //colCount余数为1说明将进行分行,接下的列将纳入新的行中
                if (i == 1)
                    resultStr.Append("<ul>");

                //列标签开始
                resultStr.Append("<li" + (liClass == String.Empty || liClass == null ?String.Empty:" class=\"" + liClass + "\"") + ">");

                //内容
                resultStr.Append(startStr);
                resultStr.Append(field);
                resultStr.Append(endStr);

                //列标签结束
                resultStr.Append("</li>");

                //colCount余数为0说明行结束
                if (i == 0)
                    resultStr.Append("</ul>");
            }

            //如果colCount的余数在0和colCount之间,则说明前一行的列数不够colCount,结尾尚无</ul>,故需补上
            if (0 < i && i < colCount)
                resultStr.Append("</ul>");

            return resultStr.ToString();
        }

分享到:
评论

相关推荐

    DIV CSS布局教程:应用ul、li实现表格形式

    标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`&lt;ul&gt;`)和列表项(`&lt;li&gt;`)元素,通过CSS样式来模拟传统HTML表格(`&lt;table&gt;`)的效果。这种方法常用于创建灵活、响应式的布局,...

    精易模块---用于网页操作及其它功能的易语言模块

    ULLI_取引用代码 说明:取【ULLI】的引用代码,失败返回空文本 ULLI_选择 说明:选择指定的【ULLI】项,失败返回假 表格_取单元格数量 说明:取出指定【表格】内的所有单元格数量,失败返回0 表格_取单元格文本 ...

    layui的布局和表格的渲染以及动态生成表格的方法

    但是,演示了使用Layui的table组件,结合JavaScript代码来动态生成表格数据的原理。 - 可以通过调用Layui的table模块提供的接口,如table.render()方法,来动态地渲染表格。 - 这个方法可以接受各种参数,比如数据...

    好看的下拉菜单

    .menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;} &lt;![endif]--&gt; &lt;div class="menu"&gt; &lt;ul&gt; &lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS...

    div+css实现两列table效果示例

    在示例中,`div`被用作一个容器,包含了一组`ul`列表元素,形成两个并排的列。 CSS部分是实现两列效果的关键。`mycode`类定义了整体的样式,其中`margin-top`设置上边距,`padding-right`和`padding-left`设置了内...

    实现表格动态滚动效果

    本教程将详细介绍如何使用CSS和JavaScript来实现一个类似表格的动态滚动效果,通过`ul`和`li`标签来模拟表格结构。 ### CSS基础布局 首先,我们需要创建一个容器来包裹我们的“表格”。这可以通过`&lt;div&gt;`标签实现...

    纯DIV+CSS网页示例

    而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。 12.另外如果你不是javascrput的高手,你可以不必去写ID,只用class就可以。当客户端程序员写完程序,需要调整时候,你可以在利用...

    基于jQuery 开发的几个组件 (Table, Grid ,Menu ,Layout)

    本文将深入探讨如何使用jQuery开发四个关键的前端组件:Table、Grid、Menu和Layout,以提高Web应用的用户体验和交互性。 1. jQuery Table组件 jQuery Table组件用于展示结构化的数据,例如报表或数据库查询结果。...

    用div和ul标签画表格进行布局兼容火狐、ie6、ie7、Opera等浏览器

    在网页设计中,为了实现跨浏览器的兼容性,有时候我们需要避免使用HTML的`&lt;table&gt;`标签,转而采用更灵活的CSS布局技术,比如使用`&lt;div&gt;`和`&lt;ul&gt;`标签来模拟表格布局。这样的做法可以更好地控制样式,提高页面性能,...

    新手学习DIV+CSS难点之经验总结

    创建一个简单的水平导航条,可以使用`&lt;ul&gt;`和`&lt;li&gt;`标签,并通过CSS来布局。 **CSS示例代码:** ```css ul { list-style: none; /* 移除默认样式 */ margin: 0; padding: 0; } li { display: inline-block; /...

    雅虎TAB效果代码 Javascript实现

    #tabs ul li div {display:none;} #tabs ul li:hover {padding-bottom:132px; border-bottom:1px solid #fff; color:#000; margin-bottom:0;} #tabs ul li:hover &gt; a.outer {color:#000; background-position:0 -...

    div+css布局必了解的列表元素ul ol li dl dt dd详解

    列表元素ul、ol、li、dl、dt和dd是构建内容列表、导航链接和其他有序或无序信息的基石。了解并正确使用这些元素对于创建清晰、可访问且搜索引擎优化友好的网站至关重要。 首先,ul(无序列表)和ol(有序列表)是...

    div居中常见问题.docx

    例如,如果有一个包含文本的`div`元素,只需在CSS中为父`div`设置`.txtCenter{text-align: center;}`即可实现文本的居中对齐。 接下来,我们讨论块状元素的居中。块状元素分为定宽和不定宽两种。对于定宽块状元素,...

    JQ高仿select控件

    &lt;div style="padding:100px;"&gt; &lt;p&gt;JQ高仿select控件 &lt;br/&gt; &lt;div style="height:100px;border-bottom:5px solid #ff0000;"&gt; &lt;table cellpadding="0" cellspacing="0" border="0"&gt; ...

    通过css动画实现一个表格滚动轮播效果

    css动画的一个应用,与此前的... &lt;div class=box&gt; &lt;ul class=header&gt; &lt;li class=cell&gt;序号&lt;/li&gt; &lt;li class=cell&gt;姓名&lt;/li&gt; &lt;li class=cell&gt;年龄&lt;/li&gt; &lt;li class=cell&gt;性别&lt;/li&gt; &lt;li class=cell&gt;专业&lt;/li&gt; &lt;/ul&gt;

    ASP.Net电子商务网站后台模板

    &lt;li id="now19"&gt;生成文件管理" href="#" target="content3"&gt;生成文件管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1a"&gt;标签管理" href="#" target="content3"&gt;标签管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1b"&gt;模板管理" onclick=...

    【JavaScript源代码】JavaScript实现table切换的插件封装.docx

     本文实例为大家分享了JavaScript实现table切换插件的封装代码,供大家参考,具体内容如下 效果图: HTML部分: &lt;div class="box"&gt; &lt;div id="tabBox"&gt; &lt;ul&gt; &lt;li class="liStyle"&gt;A&lt;/li&gt; &lt;li&gt;B&lt;/li&gt; &lt;li&gt;C&lt;/...

    DIVCSS学习(入门)教程.pdf

    如果需要修改列表项(`&lt;li&gt;`),可以使用`#menu ul li`。此外,还可以直接通过元素选择器(如`img`、`table`等)来设置元素的样式。 在布局时,浮动(`float`)属性经常被用来控制元素的排列方式,如`float:left`使...

    div居中常见问题.pdf

    1. **使用 `display: table`**:这种方法是将元素包裹在一个 `table` 元素中,利用表格的自适应特性,再通过 `margin: 0 auto` 来实现居中。HTML 结构如下: ```html &lt;div&gt; &lt;table&gt; &lt;!-- 内容 --&gt; ...

    DIV+CSS入门教程

    例如,虽然DIV是常用的布局标签,但页面中还可以包含span、p、a、ul、li等多种标签,每种标签都有其特定的功能,应根据内容需求恰当选用。 #### 知识点四:Table布局的局限性 使用Table进行网页布局曾是一种普遍...

Global site tag (gtag.js) - Google Analytics