这个希望对新手有帮助:
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="全选" οnclick="quanxuan()" /> <input type ="button" name="Submin" value="反选" οnclick="fanxuan()" /> <input type ="button" name="Submin" value="查看" οnclick="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" />
欢迎大虾们的指导(*^__^*) !