Asp.Net中html表格的实现！

最新推荐文章于 2021-06-11 16:00:21 发布

逸尘凌虚

最新推荐文章于 2021-06-11 16:00:21 发布

阅读量643

点赞数

分类专栏： ASP 文章标签： ASP.NET table html 报表

ASP 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

相信很多初学者设计如上的界面时都会头疼,下面通过记录自己的学习过程来启发各位刚接触html或者asp的同学.

整个界面是一个大的table控件：

<tr>
<td align="right" style=" border:1px solid #00FFFF;" class="style2">
 井号</td>
<td align="left" style=" border:1px solid #00FFFF;" class="style4">
<input id="jh" runat="server" type="text" /></td>
</tr>
<tr>
<td align="right" style=" border:1px solid #00FFFF;" class="style1">
 请输入起止日期阶段：</td>
<td style=" border:1px solid #00FFFF;" class="style5">
<input id="txtksrq" runat="server" type="text" />至<input id="txtjsrq" runat="server" type="text" />（日期格式为：“YYYY-MM-DD，如2009-09-01”）</td>
</tr>
<tr>
<td align="right" style=" border:1px solid #00FFFF;" class="style6">
 曲线名称</td>
<td style=" border:1px solid #00FFFF;" class="style7">
<input id="scsj" runat="server" type="checkbox" />生产时间<input id="ty" runat="server"
type="checkbox" />套压<input id="yy" runat="server" type="checkbox" />油压<input
id="zsl" runat="server" type="checkbox" checked="checked" />日注水量</td>
</tr>

<tr >
<td rowspan="10"; align="right" style=" border:1px solid #00FFFF;">
 参数设置：</td>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%" style="height: 27px">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">曲线宽度    </td>
<td style=" border:1px solid #00FFFF;" width="15%">
<asp:DropDownList ID="widthLine" runat="server">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="1">1.0mm</asp:ListItem>
<asp:ListItem Value="1.5">1.5mm</asp:ListItem>
<asp:ListItem Value="2">2.0mm</asp:ListItem>
<asp:ListItem Value="2.5">2.5mm</asp:ListItem>
<asp:ListItem Value="3.0">3.0mm</asp:ListItem>

</asp:DropDownList></td>
</tr>
</table></td>
</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%" style="height: 27px">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">坐标轴宽度：  </td>
<td style=" border:1px solid #00FFFF;" width="15%">
<asp:DropDownList ID="XYwidth" runat="server">
<asp:ListItem></asp:ListItem>
<asp:ListItem Value="1">1.0mm</asp:ListItem>
<asp:ListItem Value="1.5">1.5mm</asp:ListItem>
<asp:ListItem Value="2">2.0mm</asp:ListItem>
<asp:ListItem Value="2.5">2.5mm</asp:ListItem>
<asp:ListItem Value="3.0">3.0mm</asp:ListItem>
<asp:ListItem Value="3.5">3.5mm</asp:ListItem>
<asp:ListItem Value="4.0">4.0mm</asp:ListItem>
</asp:DropDownList></td>
</tr>
</table></td>
</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%" style="height: 27px">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">数据点标注：  </td>
<td style=" border:1px solid #00FFFF;" width="15%">

<input id="dataPoint" runat="server" type="checkbox" />是</tr>
</table></td>
</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%" style="height: 27px">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">标数据点原点： </td>
<td style=" border:1px solid #00FFFF;" width="15%">

<input id="CirclePoint" runat="server" type="checkbox" />是</tr>
</table></td>
</tr>
<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%" style="height: 27px">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">网格线：    </td>
<td style=" border:1px solid #00FFFF;" width="15%">

<input id="GridLine" runat="server" type="checkbox" />是</tr>
</table></td>
</tr>
<tr>
<td align="left" ; style=" border:1px solid #00FFFF;"

class="style5">

td里面嵌套table，注意table中改变一个td的宽度时其他的td宽度也会发生变化，解决办法嵌套table！

<table width="100%">
<tr><td rowspan="2"; style=" border:1px solid #00FFFF;" class="style10">曲线颜色：</td>
<td width="15%" style=" border:1px solid #00FFFF;">生产时间：<asp:DropDownList
ID="Colorscsj" runat="server" AutoPostBack="True"
onselectedindexchanged="Colorscsj_SelectedIndexChanged" Height="16px"
Width="99px">
<asp:ListItem Text="" Value="Red" style="background-color:Red"></asp:ListItem>
<asp:ListItem Text="" Value="Blue" style="background-color:Blue"></asp:ListItem>
<asp:ListItem Text="" Value="Green" style="background-color:Green"></asp:ListItem>
<asp:ListItem Text="" Value="Orange" style="background-color:Orange"></asp:ListItem>
<asp:ListItem Text="" Value="Yellow" style="background-color:Yellow"></asp:ListItem>
</asp:DropDownList>
</td>
<td width="15%" style=" border:1px solid #00FFFF;">套压：<asp:DropDownList
ID="colorTaoya" runat="server" AutoPostBack="True"
onselectedindexchanged="colorTaoya_SelectedIndexChanged" Height="16px"
Width="83px" >
<asp:ListItem Text="" Value="Red" style="background-color:Red"></asp:ListItem>
<asp:ListItem Text="" Value="Blue" style="background-color:Blue"></asp:ListItem>
<asp:ListItem Text="" Value="Green" style="background-color:Green"></asp:ListItem>
<asp:ListItem Text="" Value="Orange" style="background-color:Orange"></asp:ListItem>
<asp:ListItem Text="" Value="Yellow" style="background-color:Yellow"></asp:ListItem>
</asp:DropDownList>
</td></tr>



<tr><td style=" border:1px solid #00FFFF;" class="style10">油压：<asp:DropDownList
ID="coloryouya" runat="server" Height="16px" Width="84px"
AutoPostBack="True" onselectedindexchanged="coloryouya_SelectedIndexChanged">
<asp:ListItem Text="" Value="Red" style="background-color:Red"></asp:ListItem>
<asp:ListItem Text="" Value="Blue" style="background-color:Blue"></asp:ListItem>
<asp:ListItem Text="" Value="Green" style="background-color:Green"></asp:ListItem>
<asp:ListItem Text="" Value="Orange" style="background-color:Orange"></asp:ListItem>
<asp:ListItem Text="" Value="Yellow" style="background-color:Yellow"></asp:ListItem>
</asp:DropDownList>
</td>
<td style=" border:1px solid #00FFFF;" class="style10">日注水量：<asp:DropDownList
ID="colorrzsl" runat="server" Height="16px" Width="83px"
onselectedindexchanged="colorrzsl_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Text="" Value="Red" style="background-color:Red"></asp:ListItem>
<asp:ListItem Text="" Value="Blue" style="background-color:Blue"></asp:ListItem>
<asp:ListItem Text="" Value="Green" style="background-color:Green"></asp:ListItem>
<asp:ListItem Text="" Value="Orange" style="background-color:Orange"></asp:ListItem>
<asp:ListItem Text="" Value="Yellow" style="background-color:Yellow"></asp:ListItem>
</asp:DropDownList>
</td></tr>
</table>
</td>


</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">X轴间距：    </td>
<td style=" border:1px solid #00FFFF;" width="15%">
<input id="Xlen" type="checkbox" />自定义设置<input id="XLength" runat="server" type="text" />cm</td>
</tr>
</table></td>
</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">Y轴高度：    </td>
<td style=" border:1px solid #00FFFF;" width="15%">
<input id="Ylen" type="checkbox" />自定义设置<input id="YLength" runat="server" type="text" />cm</td>
</tr>
</table></td>
</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">曲线间隔： </td>
<td style=" border:1px solid #00FFFF;" width="15%">
<asp:DropDownList ID="pointInter" runat="server">
<asp:ListItem Value="5">5</asp:ListItem>
<asp:ListItem Value="10">10</asp:ListItem>
<asp:ListItem Value="15">15</asp:ListItem>
<asp:ListItem Value="20">20</asp:ListItem>
<asp:ListItem Value="25">25</asp:ListItem>
<asp:ListItem Value="30">30</asp:ListItem>
<asp:ListItem Value="35">35</asp:ListItem>
</asp:DropDownList>天一个点</td>
</tr>
</table></td>
</tr>

<tr>
<td align="left" style=" border:1px solid #00FFFF;">
<table width="100%">
<tr>
<td style=" border:1px solid #00FFFF;" class="style11">按最小间隔画曲线：    </td>
<td style=" border:1px solid #00FFFF;" width="15%">
<input id="minInterval" type="checkbox" />是</td>
</tr>
</table></td>
</tr>

<tr>
<td align="center" >
 </td>
<td>
       <asp:Button
ID="Button2" runat="server" Text="绘制" οnclick="Button2_Click" />
</td>
</tr>

</table>