试题要求：
1.当页面加载完毕后要求在颜色列表中的每一种颜色前添加颜色标识。其中每种颜色的html代码格式如下：
<span ColorId="1" ColorCode="#000000">
<input id="ctl04" type="checkbox" name="ctl04" /><label for="ctl04">黑色</label>
</span>
2.当选中颜色或尺寸的时候能够更新下方的库存列表，其中一种颜色和一种尺寸为一行。所以如果选中2中颜色和2中尺寸，则应该添加4行到库存表格中。
3.当取消严重颜色会尺寸时能够删除对应的库存行信息。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<link type="text/css" rel="Stylesheet" href="Content/Index.css" />
<script type="text/javascript" src="Script/jquery-1.5.1.js"></script>
<style type="text/css">
.spanlist
{
min-height: 80px;
height: auto;
float:left;
}
.spanlist span
{
width:120px;
float:left;
margin-top:0px;
}
.productImage
{
float:left;
width:100px;
}
.productImage img
{
width:100px;
height:110px;
}
.textbox{ height:20px; width:200px; font-size:12px; color:#19315d;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var checkboxCount = $("#ColorList input");
for (var i = 0; i < checkboxCount.length; i++) {
$(checkboxCount[i]).before("<span style='border:1px solid red;width:16px; height:10px; margin-right:3px; background-color:" + $("span[ColorId='" + (i + 1) + "']").attr("ColorCode") + "'></span>");
}
$("#ColorList input").bind("click", function() {
if ($(this).attr("checked")) {
var SizeCheckedbox = $("#SizeList input:checked");
if (SizeCheckedbox.length > 0) {
for (var i = 0; i < SizeCheckedbox.length; i++) {
var html = "<tr><td><input type='text' class='textbox' value='" + $(this).next().text() + "'></input></td><td><input type='text' class='textbox' value='" + $(SizeCheckedbox[i]).next().text() + "'></input></td><td><input type='text' class='textbox' value='0' ></input></td></tr>";
$("#storageList").append(html);
}
}
}
else {
var CancleText = $(this).next().text();
var InputCount = $("#storageList tr").find("input");
for (var i = 0; i < InputCount.length; i++) {
if ($(InputCount[i]).attr("value") == CancleText) {
$(InputCount[i]).parent().parent().remove();
}
}
}
});
$("#SizeList input").bind("click", function() {
if ($(this).attr("checked")) {
var ColorCheckedbox = $("#ColorList input:checked");
if (ColorCheckedbox.length > 0) {
for (var i = 0; i < ColorCheckedbox.length; i++) {
var html = "<tr><td><input type='text' class='textbox' value='" + $(ColorCheckedbox[i]).next().text() + "'></input></td><td><input type='text' class='textbox' value='" + $(this).next().text() + "'></input></td><td><input type='text' class='textbox' value='0' ></input></td></tr>";
$("#storageList").append(html);
}
}
}
else {
var CancleText = $(this).next().text();
var InputCount = $("#storageList tr").find("input");
for (var i = 0; i < InputCount.length; i++) {
if ($(InputCount[i]).attr("value") == CancleText) {
$(InputCount[i]).parent().parent().remove();
}
}
}
});
});
</script>
</head>
<body>
<!--商品库存-->
<div id="StorageInfo" class="hide">
<table width="90%" id="storageTable" align="center">
<tr>
<td style="width:80px" class="label">颜色列表</td>
<td id="colortd" >
<div id="ColorList" class="spanlist">
<span ColorId="1" ColorCode="#000000">
<input id="ctl04" type="checkbox" name="ctl04" /><label for="ctl04">黑色</label>
</span>
<span ColorId="2" ColorCode="#FFFFFF"><input id="ctl05" type="checkbox" name="ctl05" /><label for="ctl05">白色</label></span><span ColorId="3" ColorCode="#FF0000"><input id="ctl06" type="checkbox" name="ctl06" /><label for="ctl06">红色</label></span><span ColorId="4" ColorCode="#FFFF00"><input id="ctl07" type="checkbox" name="ctl07" /><label for="ctl07">黄色</label></span><span ColorId="5" ColorCode="#00FF00"><input id="ctl08" type="checkbox" name="ctl08" /><label for="ctl08">绿色</label></span><span ColorId="6" ColorCode="#FF00FF"><input id="ctl09" type="checkbox" name="ctl09" /><label for="ctl09">粉色</label></span><span ColorId="7" ColorCode="#C0C0C0"><input id="ctl10" type="checkbox" name="ctl10" /><label for="ctl10">灰色</label></span><span ColorId="8" ColorCode="#CCEEFF"><input id="ctl11" type="checkbox" name="ctl11" /><label for="ctl11">天蓝色</label></span><span ColorId="9" ColorCode="#00FFFF"><input id="ctl12" type="checkbox" name="ctl12" /><label for="ctl12">浅绿色</label></span><span ColorId="10" ColorCode="#F0FFFF"><input id="ctl13" type="checkbox" name="ctl13" /><label for="ctl13">天蓝色</label></span><span ColorId="11" ColorCode="#F5F5DC"><input id="ctl14" type="checkbox" name="ctl14" /><label for="ctl14">米色</label></span><span ColorId="12" ColorCode="#FFE4C4"><input id="ctl15" type="checkbox" name="ctl15" /><label for="ctl15">桔黄色</label></span><span ColorId="13" ColorCode="#FFEBCD"><input id="ctl16" type="checkbox" name="ctl16" /><label for="ctl16">白杏色</label></span><span ColorId="14" ColorCode="#8A2BE2"><input id="ctl17" type="checkbox" name="ctl17" /><label for="ctl17">紫罗兰色 </label></span><span ColorId="15" ColorCode="#A52A2A"><input id="ctl18" type="checkbox" name="ctl18" /><label for="ctl18">褐色</label></span><span ColorId="16" ColorCode="#D2691E"><input id="ctl19" type="checkbox" name="ctl19" /><label for="ctl19">巧克力色</label></span><span ColorId="17" ColorCode="#DC143C"><input id="ctl20" type="checkbox" name="ctl20" /><label for="ctl20">暗深红色</label></span><span ColorId="18" ColorCode="#228B22"><input id="ctl21" type="checkbox" name="ctl21" /><label for="ctl21">森林绿</label></span><span ColorId="19" ColorCode="#FF00FF"><input id="ctl22" type="checkbox" name="ctl22" /><label for="ctl22">紫红色</label></span><span ColorId="20" ColorCode="#ADFF2F"><input id="ctl23" type="checkbox" name="ctl23" /><label for="ctl23">黄绿色</label></span>
</div>
</td>
</tr>
<tr>
<td style="width:80px" class="label">尺寸列表</td>
<td id="sizetd">
<div id="SizeList" class="spanlist">
<span title="小码160" SizeId="1"><input id="ctl24" type="checkbox" name="ctl24" /><label for="ctl24">S</label></span><span title="中码165" SizeId="2"><input id="ctl25" type="checkbox" name="ctl25" /><label for="ctl25">M</label></span><span title="大码170" SizeId="3"><input id="ctl26" type="checkbox" name="ctl26" /><label for="ctl26">L</label></span><span title="加大码175" SizeId="4"><input id="ctl27" type="checkbox" name="ctl27" /><label for="ctl27">XL</label></span><span title="超大码180CM" SizeId="5"><input id="ctl28" type="checkbox" name="ctl28" /><label for="ctl28">XXL</label></span><span title="155CM" SizeId="6"><input id="ctl29" type="checkbox" name="ctl29" /><label for="ctl29">XS</label></span><span title="胸罩罩杯：约7.5CM" SizeId="7"><input id="ctl30" type="checkbox" name="ctl30" /><label for="ctl30">AA</label></span><span title="胸罩罩杯：约10CM" SizeId="8"><input id="ctl31" type="checkbox" name="ctl31" /><label for="ctl31">A</label></span><span title="胸罩罩杯：约12.5CM" SizeId="9"><input id="ctl32" type="checkbox" name="ctl32" /><label for="ctl32">B</label></span><span title="胸罩罩杯：约15CM" SizeId="10"><input id="ctl33" type="checkbox" name="ctl33" /><label for="ctl33">C</label></span><span title="胸罩罩杯：约17.5CM" SizeId="11"><input id="ctl34" type="checkbox" name="ctl34" /><label for="ctl34">D</label></span><span title="胸罩罩杯：约20CM" SizeId="12"><input id="ctl35" type="checkbox" name="ctl35" /><label for="ctl35">E</label></span><span title="内裤尺码：" SizeId="13"><input id="ctl36" type="checkbox" name="ctl36" /><label for="ctl36">22.5</label></span><span SizeId="14"><input id="ctl37" type="checkbox" name="ctl37" /><label for="ctl37">23</label></span><span SizeId="15"><input id="ctl38" type="checkbox" name="ctl38" /><label for="ctl38">23.5</label></span><span SizeId="16"><input id="ctl39" type="checkbox" name="ctl39" /><label for="ctl39">24</label></span><span SizeId="17"><input id="ctl40" type="checkbox" name="ctl40" /><label for="ctl40">24.5</label></span><span SizeId="18"><input id="ctl41" type="checkbox" name="ctl41" /><label for="ctl41">25</label></span><span SizeId="19"><input id="ctl42" type="checkbox" name="ctl42" /><label for="ctl42">25.5</label></span><span SizeId="20"><input id="ctl43" type="checkbox" name="ctl43" /><label for="ctl43">26</label></span><span SizeId="21"><input id="ctl44" type="checkbox" name="ctl44" /><label for="ctl44">26.5</label></span><span SizeId="22"><input id="ctl45" type="checkbox" name="ctl45" /><label for="ctl45">27</label></span><span SizeId="23"><input id="ctl46" type="checkbox" name="ctl46" /><label for="ctl46">27.5</label></span><span SizeId="24"><input id="ctl47" type="checkbox" name="ctl47" /><label for="ctl47">28</label></span>
</div>
</td>
</tr>
<tr>
<td style="width:80px" class="label">库存列表</td>
<td>
<table id="storageList" class="customeGridView" width="600px">
<tr>
<th style="width:30%">颜色</th>
<th style="width:30%">尺寸</th>
<th style="width:40%">库存</th>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
