这个希望对新手有帮助：
1.建立程序：打开vs工具->新建网站->选择使用c#模板，使用空网站，选择路径设置（默认名Default.aspx）->完毕。
思路：创建两个div,id为top和bottom；top为购物列表和单价信息等，bottom为购物完要显示的清单。
top中建立了一个table，分了6行，前五行每行4列，最后一行合并，显示button操作。
在aspx页面添加表格，代码如下：
<body>
<div id="top">
<form id="form1" runat="server">
<table width="800px" height="240px" border="1" style="border-collapse:collapse">
<tr bgcolor="#FFFFCC">
<td width="112">菜名：</td>
<td width="132">单价（斤/元）</td>
<td width="132">数量（斤）</td>
<td width="132">是否购买</td>
</tr>
<tr bgcolor="#FFFF99">
<td>白菜</td>
<td>1.0</td>
<td><input type="text" name="txt"/></td>
<td><input type="checkbox" name="ck" id="白菜" value="1.0"/></td>
</tr>
<tr bgcolor="#FFFF66">
<td>胡萝卜</td>
<td>2.0</td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<td><input type="text" name="txt"/></td>
<td><input type="checkbox" name="ck" id="胡萝卜" value="2.0"/></td>
</tr>
<tr bgcolor="#FFFF33">
<td>青菜</td>
<td>1.3</td>
<td><input type="text" name="txt"/></td>
<td><input type="checkbox" name="ck" id="青菜" value="1.3"/></td>
</tr>
<tr bgcolor="#FFFF00">
<td>辣椒</td>
<td>1.5</td>
<td><input type="text" name="txt"/></td>
<td><input type="checkbox" name="ck" id="辣椒" value="1.5"/></td>
</tr>
<tr bgcolor="#FFFF00">
<td colspan="4" align="center">
<input type ="button" name="Submin" value="全选" onclick="quanxuan()" />
<input type ="button" name="Submin" value="反选" onclick="fanxuan()" />
<input type ="button" name="Submin" value="查看" onclick="chakan()" />
</td>
</tr>
</table>
</form>
</div>
<div id="bottom">
</div>
</body>
2.然后对设计的表格设置以下样式：
右键资源管理器->添加新项->样式表（默认名StyleSheet.css）->完毕。
思路：设置div的显示样式，并且bottom初始化为隐藏状态。
代码如下所示：
body {
}
#top,#bottom
{
width:900px;
height:350px;
border:2px #FFFF00 solid;
}
#bottom
{
visibility:hidden;
}
3.实现js,右键资源管理器->添加新项->js脚本（默认名JScript.js）->完毕。
思路：三个函数，quanxuan(),fanxuan(),chakan(),分别在table中最后一行显示的按钮，绑定了这些事件函数为它们。
用js创建购物清单： var str = "<table width='400' height='240' border='1' style='collapse:collapse'><tr bgcolor='#FFFF66'><td colspan='4' align='center'>购物清单</td></tr>" +
"<tr bgcolor='#FFFF66'><td>菜名</td><td>单价</td><td>数量</td><td>金额</td></tr>"; ......“完整的看代码块”
设置bottom的显示状态bottom.style.visibility = "visible";
创建的table显示在页面上bottom.innerHTML = str;
var shuliang = document.forms[0].txt;获取top中table的所有name为txt的（<td><input type="text" name="txt"/></td>）。
toFixed()方法表示对小数位数保留几位。如toFixed（2），保留两位小数。
代码如下所示：
function quanxuan() { var strlove = document.forms[0].ck; for (var i = 0; i < strlove.length; i++) { strlove[i].checked = true; } } function fanxuan() { var strlove = document.forms[0].ck; for (var j = 0; j < strlove.length; j++) { strlove[j].checked = strlove[j].checked ? false : true; } } function chakan() { var str = "<table width='400' height='240' border='1' style='collapse:collapse'><tr bgcolor='#FFFF66'><td colspan='4' align='center'>购物清单</td></tr>" + "<tr bgcolor='#FFFF66'><td>菜名</td><td>单价</td><td>数量</td><td>金额</td></tr>"; //</table>"; var shuliang = document.forms[0].txt; var strlove = document.forms[0].ck; var zongjine = 0; var danjia; var shuliang1; var name; var jine; for (var s = 0; s < strlove.length; s++) { if (strlove[s].checked) { danjia = strlove[s].value; shuliang1 = shuliang[s].value; name = strlove[s].id; shuliang1 = (shuliang[s].value == "") ? 1 : shuliang[s].value; jine = danjia * shuliang1; zongjine = zongjine + danjia * shuliang1; str = str + "<tr bgcolor='#FFFF66'><td>" + name + "</td><td>" + danjia + "</td><td>" + shuliang1 + "</td><td>" + jine.toFixed(2) + "</td></tr>"; } } str = str + "<tr bgcolor='#FFFF66'><td colspan='4'>总金额：￥" + zongjine.toFixed(2) + "</td></tr>"; str = str + "</table>"; bottom.style.visibility = "visible"; bottom.innerHTML = str; }
4.引入样式表和js文本到aspx页面调用。代码如下所示：
思路：<script type="text/javascript" src="JScript.js"></script>引入js脚本
<link rel="Stylesheet" href="StyleSheet.css" type="text/css" />引入样式表
<script type="text/javascript" src="JScript.js"></script> <link rel="Stylesheet" href="StyleSheet.css" type="text/css" />
欢迎大虾们的指导(*^__^*) ！
