据动态生成html的table

yaoyaogghaha 2017-06-05 09:45:50
数据表：select IndexID,Otype,colSpan,rowSpan from A ，如下图：
indexid:通过这个排序，按先后顺序生成每行固定的四列HTML控件(每行tr只能有四列)
otype:控件类型
colspan:跨列数
rowspan:跨行数


如何写SQL拼出，根据colspan,rowspan这两个字段，如果存在跨行或跨列的情况去生成html的Table，生成效果像下面的UI这样：



就是说后台代码通过查询A表数据，在逻辑里怎么去根据每行固定四列的显示方式去拼装table，最后显示到UI里？或者通过改SQL实现也可以。
...全文
503 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
Dulm2016 2020-01-02
  • 打赏
  • 举报
 回复 
select * from sb where erbi
道素 2017-06-14
  • 打赏
  • 举报
 回复
引用 11 楼 yaoyaogghaha 的回复:
[quote=引用 10 楼 yaoyaogghaha 的回复:] [quote=引用 8 楼 ch21st 的回复:] 上海有个小错误，最后tr多了一个反斜杠 


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
这行报错 [/quote] 把case when sum(colspan)over(order by indexid)%4=0 then 1 else 0 end ChangeRow 里的order by indexid去掉就可以[/quote] 那就是你的SQL Server还不支持这个，需要换个写法: 

DECLARE @tableHTML NVARCHAR(max)=''
 create table #t(IndexID INT,Otype NVARCHAR(100),colSpan INT,rowSpan INT)
INSERT INTO #T(IndexID,Otype,colSpan,rowSpan)
   SELECT 0,N'文本',4,1 union all
    SELECT 1,N'图片',1,1 union all
    SELECT 2,N'文本',1,1 union all
    SELECT 3,N'标签',2,1 union all
    SELECT 4,N'图片',4,1 union all
    SELECT 5,N'文本',4,1 union all
    SELECT 6,N'图片',4,1 union all
    SELECT 7,N'单选',1,1 union all
    SELECT 8,N'单选',1,1 union all
    SELECT 9,N'单选',1,1 union all
    SELECT 10,N'单选',1,1 union all
    SELECT 11,N'文本',2,1 union all
    SELECT 12,N'文本',2,1 union all
    SELECT 13,N'文本',4,1 
;WITH AA AS (
   select *, case when isnull(p.cols,0)%4=0 then 1 else 0 end ChangeRow
           ,case when min(IndexID)over()=IndexID then 1 else 0 end firstrow 
           ,case when max(IndexID)over()=IndexID then 1 else 0 end lastrow 
    from #T as t1
    outer apply(select sum(colspan) from #t as tt where tt.IndexID<t1.IndexID) p(cols)
 )
 
--select * from AA
SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'

 
 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 select  @tableHTML
yaoyaogghaha 2017-06-14
  • 打赏
  • 举报
 回复
引用 10 楼 yaoyaogghaha 的回复:
[quote=引用 8 楼 ch21st 的回复:] 上海有个小错误，最后tr多了一个反斜杠 


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
这行报错 [/quote] 把case when sum(colspan)over(order by indexid)%4=0 then 1 else 0 end ChangeRow 里的order by indexid去掉就可以
yaoyaogghaha 2017-06-14
  • 打赏
  • 举报
 回复
引用 8 楼 ch21st 的回复:
上海有个小错误，最后tr多了一个反斜杠 


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
这行报错
yaoyaogghaha 2017-06-14
  • 打赏
  • 举报
 回复
引用 8 楼 ch21st 的回复:
上海有个小错误，最后tr多了一个反斜杠 


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
使用的是SQLSERVER2008，上面的写法好像不支持2008
道素 2017-06-11
  • 打赏
  • 举报
 回复
上海有个小错误，最后tr多了一个反斜杠 


SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '<tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
道素 2017-06-11
  • 打赏
  • 举报
 回复
更正，上面的有错误： 

DECLARE @tableHTML NVARCHAR(max)=''
 create table #t(IndexID INT,Otype NVARCHAR(100),colSpan INT,rowSpan INT)
INSERT INTO #T(IndexID,Otype,colSpan,rowSpan)
   SELECT 0,N'文本',4,1 union all
    SELECT 1,N'图片',1,1 union all
    SELECT 2,N'文本',1,1 union all
    SELECT 3,N'标签',2,1 union all
    SELECT 4,N'图片',4,1 union all
    SELECT 5,N'文本',4,1 union all
    SELECT 6,N'图片',4,1 union all
    SELECT 7,N'单选',1,1 union all
    SELECT 8,N'单选',1,1 union all
    SELECT 9,N'单选',1,1 union all
    SELECT 10,N'单选',1,1 union all
    SELECT 11,N'文本',2,1 union all
    SELECT 12,N'文本',2,1 union all
    SELECT 13,N'文本',4,1 
;WITH AA AS (
   select *, case when sum(colspan)over(order by IndexID)%4=0 then 1 else 0 end ChangeRow
           ,case when min(IndexID)over()=IndexID then 1 else 0 end firstrow 
           ,case when max(IndexID)over()=IndexID then 1 else 0 end lastrow 
    from #T
 )

--select * from AA

SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg" />' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'"/>' end,''
       ,case when ChangeRow=1 then '</tr>' else '' end+case when ChangeRow=1 and lastrow=0 then '</tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</table>'
 
 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 select  @tableHTML
 


<table>
	<tr>
		<td colspan="4">
			<input type="text" name="input0" />
		</td>
	</tr>
	</tr>
	<td colspan="1">
		<img src="aaa.jpg" />
	</td>
	<td colspan="1">
		<input type="text" name="input2" />
	</td>
	<td colspan="2">aaaa</td>
	</tr>
	</tr>
	<td colspan="4">
		<img src="aaa.jpg" />
	</td>
	</tr>
	</tr>
	<td colspan="4">
		<input type="text" name="input5" />
	</td>
	</tr>
	</tr>
	<td colspan="4">
		<img src="aaa.jpg" />
	</td>
	</tr>
	</tr>
	<td colspan="1">
		<input type="radio" name="input7" />
	</td>
	<td colspan="1">
		<input type="radio" name="input8" />
	</td>
	<td colspan="1">
		<input type="radio" name="input9" />
	</td>
	<td colspan="1">
		<input type="radio" name="input10" />
	</td>
	</tr>
	</tr>
	<td colspan="2">
		<input type="text" name="input11" />
	</td>
	<td colspan="2">
		<input type="text" name="input12" />
	</td>
	</tr>
	</tr>
	<td colspan="4">
		<input type="text" name="input13" />
	</td>
	</tr>
</table>
道素 2017-06-11
  • 打赏
  • 举报
 回复
引用 5 楼 yaoyaogghaha 的回复:
[quote=引用 4 楼 ch21st 的回复:] 如果需要根据colspan来保证每个TRxia的TD数目，那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr，不知道你是不是这个意思
对的，果然有点希望了，根据来保证每个TR下的TD数目,就是数据表A，如果没有colspan跨列的话，是每四条数据就要换一行，也就是每四条数据生成一个tr，现在不知道如果colspan,rowspan有值 的话，怎么去构建这些TR[/quote]
引用 5 楼 yaoyaogghaha 的回复:
[quote=引用 4 楼 ch21st 的回复:] 如果需要根据colspan来保证每个TRxia的TD数目，那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr，不知道你是不是这个意思
对的，果然有点希望了，根据来保证每个TR下的TD数目,就是数据表A，如果没有colspan跨列的话，是每四条数据就要换一行，也就是每四条数据生成一个tr，现在不知道如果colspan,rowspan有值 的话，怎么去构建这些TR[/quote] 我觉得还有不严谨的地方,bi 如按顺序凑不出4的整数倍怎么办？ 不知道你 用什么版本数据库，显示是下面的语法是不是都支持，另外下面的例子没有考虑rowspan，加上会更负责些，先弄个简单的，计入每个单元格都占一行 

DECLARE @tableHTML NVARCHAR(max)=''
 create table #t(IndexID INT,Otype NVARCHAR(100),colSpan INT,rowSpan INT)
INSERT INTO #T(IndexID,Otype,colSpan,rowSpan)
   SELECT 0,N'文本',4,1 union all
    SELECT 1,N'图片',1,1 union all
    SELECT 2,N'文本',1,1 union all
    SELECT 3,N'标签',2,1 union all
    SELECT 4,N'图片',4,1 union all
    SELECT 5,N'文本',4,1 union all
    SELECT 6,N'图片',4,1 union all
    SELECT 7,N'单选',1,1 union all
    SELECT 8,N'单选',1,1 union all
    SELECT 9,N'单选',1,1 union all
    SELECT 10,N'单选',1,1 union all
    SELECT 11,N'文本',2,1 union all
    SELECT 12,N'文本',2,1 union all
    SELECT 13,N'文本',4,1 
;WITH AA AS (
   select *, case when sum(colspan)over(order by IndexID)%4=0 then 1 else 0 end ChangeRow,case when min(IndexID)over()=IndexID then 1 else 0 end firstrow from #T
 )

--select * from AA

SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT case when firstrow=1 then '<tr>' else '' end ,
       [td/@colspan]=colspan,td=case when /*非表单*/Otype=N'标签' then 'aaaa' when Otype=N'图片' then '<img src="aaa.jpg"' else 
               '<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'单选' THEN 'radio' END +'" name="input'+ltrim(IndexID)+'">' end,''
       ,case when ChangeRow=1 then '</tr><tr>' else '' end
       FROM AA as A ORDER BY A.IndexID FOR XML PATH(''),TYPE
))+N'</tr></table>'
 
 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 select  @tableHTML
 


<table><tr><td colspan="4"><input type="text" name="input0"></td></tr><tr><td colspan="1"><img src="aaa.jpg"</td><td colspan="1"><input type="text" name="input2"></td><td colspan="2">aaaa</td></tr><tr><td colspan="4"><img src="aaa.jpg"</td></tr><tr><td colspan="4"><input type="text" name="input5"></td></tr><tr><td colspan="4"><img src="aaa.jpg"</td></tr><tr><td colspan="1"><input type="radio" name="input7"></td><td colspan="1"><input type="radio" name="input8"></td><td colspan="1"><input type="radio" name="input9"></td><td colspan="1"><input type="radio" name="input10"></td></tr><tr><td colspan="2"><input type="text" name="input11"></td><td colspan="2"><input type="text" name="input12"></td></tr><tr><td colspan="4"><input type="text" name="input13"></td></tr><tr></tr></table>
yaoyaogghaha 2017-06-10
  • 打赏
  • 举报
 回复
引用 4 楼 ch21st 的回复:
如果需要根据colspan来保证每个TRxia的TD数目，那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr，不知道你是不是这个意思
对的，果然有点希望了，根据来保证每个TR下的TD数目,就是数据表A，如果没有colspan跨列的话，是每四条数据就要换一行，也就是每四条数据生成一个tr，现在不知道如果colspan,rowspan有值 的话，怎么去构建这些TR
道素 2017-06-06
  • 打赏
  • 举报
 回复
如果需要根据colspan来保证每个TRxia的TD数目，那么可以先根据每行colspan以及每个TR的最大TD数先将数据按照TR分组 然后每组生成一个tr，不知道你是不是这个意思
道素 2017-06-06
  • 打赏
  • 举报
 回复
没完全理解你的需求，下面是个大概的示范 

DECLARE @tableHTML NVARCHAR(max)=''

;WITH A(IndexID,Otype,colSpan,rowSpan)AS (
   SELECT 0,N'文本',4,2
)
SELECT  @tableHTML =@tableHTML+'<table>'+CONVERT(NVARCHAR(max),(
   SELECT 
       [td/@colspan]=colspan,td='<input type="'+CASE A.Otype WHEN N'文本' THEN 'text' WHEN N'图片' THEN 'img' END +'" name="text1">' 
       FROM A ORDER BY A.IndexID FOR XML PATH('tr'),TYPE
))+N'</table>'

 SET @tableHTML=REPLACE(REPLACE(@tableHTML,'<','<'),'>','>')
 PRINT @tableHTML
结果 

<table><tr><td colspan="4"><input type="text" name="text1"></td></tr></table>
吉普赛的歌 2017-06-05
  • 打赏
  • 举报
 回复
这么复杂的html， 不应该在 sql 中生成， 在程序里处理吧。 简单的表格类 html ， 可以参考：http://blog.csdn.net/yenange/article/details/52689781
shiguangxin 2017-06-05
  • 打赏
  • 举报
 回复
俺们都是想尽办法给 SQL服务器 减负，你倒好，该不该它干的活都让它干，你就不怕它劳累过度，厌倦X生,死给你看 ?
动态生成HTMLTable,table,DataTable
见天讲了几个以前学过的功能！ 主要的就是动态生成table！下面我把代码给大家分享一下！ 1，  动态生成Htmltable!首先要引入命名空间！ using System.Web.UI.HtmlControls; protected void Button1_Click(object sender, EventArgs e)     {          HtmlTable tabl
js通过后台配置动态生成html table表格
js根据后台配置动态生成合并行。。。。
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里
通过JS代码动态生成HTML表格(Table),Input框,Button按钮.并且通过Input框的值进行查询动态生成数据填写在指定的表格里 需求分析: 使用JS动态生成Table表格、input框、button按钮 通过input框、button按钮实现查询。 将查询后的结果动态填写在table里面。 实现的效果 通过点击测试按钮生成下面的表格和其他组件 需求实现 1.先在页面定义一个div,用来指定表格生成在哪,并设置一个按钮来触发生成表格函数 <div id="ch_DIV
JS 动态生成Table的三种方法
JS 动态生成Table的三种方法
js 动态生成table
前几天一朋友问我js怎么控制页面动态生成表格，我整理了一下代码： js代码： &lt;script language="javascript"&gt; var data = [{"id": 1, "name": "张三"},{"id": 14, "name": "张三"},{"id": 1, "name"
疑难问题

22,297

社区成员

121,730

社区内容

发帖
与我相关
我的任务
社区描述
MS-SQL Server 疑难问题
社区管理员
  • 疑难问题社区
  • 尘觉
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章