如何用ASP.NET、Javascript解决方案实现表格式布局
我们需要实现表的以下结构（这是一个示例；数据源是动态的）。请注意，该月有中间值总计（总和） 如果我们除了计算出的Total之外还有数据源（日期和金额），您有什么建议动态生成这种表格样式的布局吗如何用ASP.NET、Javascript解决方案实现表格式布局,javascript,asp.net,html,Javascript,Asp.net,Html,我们需要实现表的以下结构（这是一个示例；数据源是动态的）。请注意，该月有中间值总计（总和） 如果我们除了计算出的Total之外还有数据源（日期和金额），您有什么建议动态生成这种表格样式的布局吗 Date Amount ========================== 1 Nov 300 22 Nov 500 30 Nov 200 Total 1000 5 Dec 100 28 Dec 200 Total 300 谢谢。为什么需要Javascrip
Date Amount
==========================
1 Nov 300
22 Nov 500
30 Nov 200
Total 1000
5 Dec 100
28 Dec 200
Total 300
谢谢。为什么需要Javascript？这是表格数据，使用表格
<table>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 Nov</td>
<td>300</td>
</tr>
<tr>
<td>22 Nov</td>
<td>500</td>
</tr>
<tr>
<td>30 Nov</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>1000</td>
</tr>
<tr>
<td>5 Dec</td>
<td>100</td>
</tr>
<tr>
<td>28 Dec</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>300</td>
</tr>
</tbody>
</table>
日期
数量
11月1日
300
11月22日
500
11月30日
200
全部的
1000
12月5日
100
12月28日
200
全部的
300
我不是100%确定行标题的语义，但我非常确定这是正确的。为什么需要Javascript？这是表格数据，使用表格
<table>
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>1 Nov</td>
<td>300</td>
</tr>
<tr>
<td>22 Nov</td>
<td>500</td>
</tr>
<tr>
<td>30 Nov</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>1000</td>
</tr>
<tr>
<td>5 Dec</td>
<td>100</td>
</tr>
<tr>
<td>28 Dec</td>
<td>200</td>
</tr>
<tr>
<th scope="row">Total</th>
<td>300</td>
</tr>
</tbody>
</table>
日期
数量
11月1日
300
11月22日
500
11月30日
200
全部的
1000
12月5日
100
12月28日
200
全部的
300
我不是100%确定行标题的语义，但我非常确定这是正确的。如果问题只是关于布局，那么它应该非常简单，因为“总计”行的单元格数与所有其他行相同。只需将CSS类应用于这些行，就可以使它们区分开来 问题是，如何检索数据？它是否也包括总数，还是必须实时计算
如果必须是运行总计，则可以使用GridView、Repeater或ListView创建表，并注册控件的OnItemDataBound/OnRowDataBound事件来计算它。我相信您可以通过这些事件中可用的数据项访问这些值，通过比较当前行的月份与前一行的月份，您知道何时插入总行，并重置计数器。如果问题只是关于布局，那么应该非常简单，因为“总计”行与所有其他行的单元格数相同。只需将CSS类应用于这些行，就可以使它们区分开来 问题是，如何检索数据？它是否也包括总数，还是必须实时计算
如果必须是运行总计，则可以使用GridView、Repeater或ListView创建表，并注册控件的OnItemDataBound/OnRowDataBound事件来计算它。我相信您可以通过这些事件中可用的数据项访问这些值，通过比较当前行的月份与前一行的月份，您知道何时插入总行，并重置计数器。您可以从这里获得一些想法：
<html>
<body>
<script>
var data =[
{d:1, m:'nov', a:300},
{d:22, m:'nov', a:500},
{d:30, m:'nov', a:20},
{d:5, m:'dec', a:1000},
{d:28,m:'dec', a:200},
{d:9,m:'dec', a:300}
];
var total = 0 ;
var prev='';
var htm = [];
htm.push('<table border="1">');
htm.push('<tr><th>Date</th><th>Amount</th></tr>');
for(var i=0;i<data.length;i++){
var d = data[i].d;
var m = data[i].m;
var a = data[i].a;
if(prev!='' && prev!=m){
htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
total = 0;
}
total = total + a;
prev = m;
htm.push('<tr><td>' + d + ' ' + m + '</td><td>' + a + '</td></tr>');
}
htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
htm.push('</table>');
document.write(htm.join(''));
</script>
</body>
</html>
var数据=[
{d:1，m:nov'，a:300}，
{d:22，m:nov'，a:500}，
{d:30，m:11'，a:20}，
{d:5，m:'dec'，a:1000}，
{d:28，m:'dec'，a:200}，
{d:9，m:'dec'，a:300}
];
var合计=0；
var prev=''；
var htm=[]；
htm.push（“”）；
htm.push（'DateAmount'）；
对于（var i=0；i您可以从这里获得想法：
<html>
<body>
<script>
var data =[
{d:1, m:'nov', a:300},
{d:22, m:'nov', a:500},
{d:30, m:'nov', a:20},
{d:5, m:'dec', a:1000},
{d:28,m:'dec', a:200},
{d:9,m:'dec', a:300}
];
var total = 0 ;
var prev='';
var htm = [];
htm.push('<table border="1">');
htm.push('<tr><th>Date</th><th>Amount</th></tr>');
for(var i=0;i<data.length;i++){
var d = data[i].d;
var m = data[i].m;
var a = data[i].a;
if(prev!='' && prev!=m){
htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
total = 0;
}
total = total + a;
prev = m;
htm.push('<tr><td>' + d + ' ' + m + '</td><td>' + a + '</td></tr>');
}
htm.push('<tr style="font-weight:bold;"><td>Total</td><td>' + total + '</td></tr>');
htm.push('</table>');
document.write(htm.join(''));
</script>
</body>
</html>
var数据=[
{d:1，m:nov'，a:300}，
{d:22，m:nov'，a:500}，
{d:30，m:11'，a:20}，
{d:5，m:'dec'，a:1000}，
{d:28，m:'dec'，a:200}，
{d:9，m:'dec'，a:300}
];
var合计=0；
var prev=''；
var htm=[]；
htm.push（“”）；
htm.push（'DateAmount'）；
对于（var i=0；i您应该看一看。此外，还有一个非常好的插件，您可以使用它轻松实现一个分离良好的模板：。优点是您可以通过Web服务惰性地加载数据
但是正如Gidon评论的那样，您可以通过简单地使用标准asp.net机制和构建表服务器端（例如，使用嵌套的Repeater/DataGrid或任何datacontrol）轻松实现想要的行为
带着亲切的问候你应该看看。另外，还有一个非常好的插件，你可以轻松地实现一个很好的分离模板：。优点是你可以通过Web服务惰性地加载数据
但是正如Gidon评论的那样，您可以通过简单地使用标准asp.net机制和构建表服务器端（例如，使用嵌套的Repeater/DataGrid或任何datacontrol）轻松实现想要的行为
出于善意，您可以使用中继器。请注意，此解决方案只是一个示例，可以在许多方面进行改进
<table>
<tr>
<th>Date</th>
<th>Amount</th>
</tr>
<asp:Repeater ID="myRepeater" runat="server" OnItemDatabound="myRepeater_Databound">
<ItemTemplate>
<tr>
<td><%# Eval("Date", "{0:dd MMM}") %></td>
<td><%# Eval("Amount") %></td>
</tr>
<tr id="trMonthlyTotal" runat="server" Visible="false">
<td>Total</td>
<td><asp:Literal id="ltMontlyTotal" runat="server" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
请注意，这个解决方案只是一个例子，可以在许多方面加以改进
<table>
<tr>
<th>Date</th>
<th>Amount</th>
</tr>
<asp:Repeater ID="myRepeater" runat="server" OnItemDatabound="myRepeater_Databound">
<ItemTemplate>
<tr>
<td><%# Eval("Date", "{0:dd MMM}") %></td>
<td><%# Eval("Amount") %></td>
</tr>
<tr id="trMonthlyTotal" runat="server" Visible="false">
<td>Total</td>
<td><asp:Literal id="ltMontlyTotal" runat="server" /></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
你在问什么？HTML是如何工作的？ASP.NET是如何工作的？我的意思是基于数据源（日期和金额）动态生成表格样式UI。你在问什么？HTML是如何工作的？ASP.NET是如何工作的？我的意思是基于数据源（日期和金额）动态生成表格样式UI对不起，数据源是动态的，不是静态的。我如何动态生成表格样式的UI。对不起，数据源是动态的，不是静态的。我如何动态生成表格样式的UI。