jquery实现taobao 颜色尺寸联动效果

zoukankan html css js c++ java

jquery实现taobao 颜色尺寸联动效果

.sku-style
{
margin-bottom: 10px;
margin-right: 10px;
}
.sku-style .sku-title
{
float: left;
padding-right: 12px;
text-align: right;
87px;
}
.sku-style label
{
float: none;
line-height: 1.5;
padding: 0;
text-align: left;
auto;
}
.sku-style .sku-wrap
{
background-color: #F8F8F8;
border: 1px solid #ECECEC;
overflow: hidden;
}
.sku-style .sku-group
{
margin: 5px 20px 15px;
}
.sku-style .sku-label
{
display: inline-block;
margin-bottom: 5px;
}
.sku-style label
{
float: none;
line-height: 1.5;
padding: 0;
text-align: left;
auto;
}
.sku-style .sku-box
{
overflow: hidden;
}
.sku-style .sku-list li
{
display: inline-block;
height: 25px;
overflow: hidden;
vertical-align: middle;
145px;
}
.sku-style li
{
clear: none;
margin: 0;
}
.sku-style .sku-list .labelname, .sku-style .sku-list input
{
vertical-align: middle;
}
body, button, input, select, textarea
{
color: #404040;
font-family: tahoma,arial, "宋体" ,sans-serif;
font-size: 12px;
line-height: 1.5;
margin: 0;
}
.sku-style .sku-color .labelname
{
padding-left: 0;
80px;
}
.sku-style .sku-list .edit .editbox
{
display: inline;
}
.sku-style .sku-color .editbox
{
72px;
}
.sku-style .sku-list .editbox
{
margin-left: 5px;
padding: 2px;
95px;
}

.sku-style .sku-wrapper
{
margin: 10px 10px 0 100px;
}
.sku-style table
{
background-color: #FFFFFF;
}
.sku-style th
{
background-color: #EDEDED;
border: 1px solid #D7D7D7;
font-weight: normal;
height: 25px;
text-align: center;
vertical-align: middle;
}
.sku-style .sku-group table span, .sku-style .sku-wrapper table span
{
display: inline;
}

.sku-style th .required
{
background-position: right center;
display: inline-block;
padding-right: 8px;
}

.sku-style td.tile
{
max- 100px;
padding-left: 20px;
text-align: left;
}
.sku-style td
{
border: 1px solid #D7D7D7;
height: 25px;
max- 200px;
min- 60px;
padding: 3px 5px;
text-align: center;
vertical-align: middle;
}
.sku-style table .color-lump
{
margin-right: 5px;
}

.sku-style td
{
border: 1px solid #D7D7D7;
height: 25px;
max- 200px;
min- 60px;
padding: 3px 5px;
text-align: center;
vertical-align: middle;
}
.sku-style td.price
{
80px;
}
.sku-style td.price input
{
78px;
}
.sku-style input.text
{
border: 1px solid #A7A6AA;
height: auto;
margin: 0;
}
.sku-style td.quantity
{
60px;
}
.sku-style td.quantity input
{
58px;
}
.sku-style td.tsc
{
100px;
}
.sku-style td.tsc input
{
98px;
}
.sku-style td.batch
{
min- 20px;
16px;
}
.sku-style td .sku-batch
{
background: url("http://img02.taobaocdn.com/tps/i2/T1EytvXt4bXXXIZFfX-14-30.png") no-repeat scroll 1px -14px transparent;
cursor: not-allowed;
display: inline-block;
height: 16px;
16px;
}

-------------------------------------------------------------------------------

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="QingdiaoWeb.test" %>

<%@ Register Src="Control/Menu.ascx" TagName="Menu" TagPrefix="uc1" %>
<!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 rel="stylesheet" href="/css/detail.css" />
<link rel="stylesheet" href="/css/admin.css" />
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript">
String.prototype.format = function (args) {
var result = this;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
}
else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] != undefined) {
var reg = new RegExp("({[" + i + "]})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}
$(function () {

$(".sku-color li :checkbox").click(function () {
$(".sku-color input:checkbox[name='cp_1627207']:checked'").each(
function () {
//alert($(this).val());
var color = '<td class="tile" rowspan="1"><span id="color_colorcode">{0}</span></td>';

alert(color.format($(this).val()));
}
);

});
});

function makepro() {
var color = '<td class="tile" rowspan="1"><span id="color_colorcode">{0}</span></td>';
var size = '<td rowspan="1"><span class="J_Map_31091-14390029">{0}</span></td>';
var price = '<td class="price"><input type="text" value="" class="J_MapPrice text" id="txtPrice"/></td>';
var teprice = '<td class="price"><input type="text" value="" class="J_MapPrice text" id="txtTePrice"/></td>';
var quantity = '<td class="quantity"><input type="text" class="J_MapQuantity text" id="txtQuantity" maxlength="6"/></td>';
var status = '<td class="tsc"><label id="lblStatus"></label></td>';
var op = '<td class="batch" nowrap="nowrap">更新</td>';
var sbStr = color.format("loogn");
}
</script>
</head>
<body>
<div id="J_SellProperties" class="sku-style">
<label class="sku-title">
宝贝规格：</label>
<div class="sku-wrap">
<div data-features="image edit" class="sku-group " data-pid="1627207" data-caption="颜色分类">
<label class="sku-label ">
颜色分类：</label>
<div class="sku-box sku-color">
<ul class="sku-list">
<li class="sku-item edit">
<input type="checkbox" data-thumb="" data-path="" data-color="5d762a" id="prop_1627207-3232483"
value="1627207:3232483" name="cp_1627207" class="J_Checkbox">
<input type="editbox text" name="cpva_1627207:3232483" value="军绿色" maxlength="15"
class="editbox text" id="J_Alias_1627207-3232483">
</li>
<li class="sku-item">
<input type="checkbox" data-thumb="" data-path="" data-color="1eddff" id="prop_1627207-3232484"
value="1627207:3232484" name="cp_1627207" class="J_Checkbox">
<input type="editbox text" name="cpva_1627207:3232484" value="天蓝色" maxlength="15"
class="editbox text" id="J_Alias_1627207-3232484">
</li>
<li class="sku-item">
<input type="checkbox" data-thumb="" data-path="" data-color="d2691e" id="prop_1627207-3232481"
value="1627207:3232481" name="cp_1627207" class="J_Checkbox">
<input type="editbox text" name="cpva_1627207:3232481" value="巧克力色" maxlength="15"
class="editbox text" id="J_Alias_1627207-3232481">
</li>
<li class="sku-item">
<input type="checkbox" data-thumb="" data-path="" data-color="ffa500" id="prop_1627207-90554"
value="1627207:90554" name="cp_1627207" class="J_Checkbox">
<input type="editbox text" name="cpva_1627207:90554" value="桔色" maxlength="15" class="editbox text"
id="J_Alias_1627207-90554">
</li>
<li class="sku-item">
<input type="checkbox" data-thumb="" data-path="" data-color="e4e4e4" id="prop_1627207-28332"
value="1627207:28332" name="cp_1627207" class="J_Checkbox">
<input type="editbox text" name="cpva_1627207:28332" value="浅灰色" maxlength="15" class="editbox text"
id="J_Alias_1627207-28332">
</li>
</ul>
</div>
</div>
<div data-features=" edit" class="sku-group " data-pid="31091" data-caption="大小">
<label class="sku-label ">
大小：</label>
<div class="sku-box ">
<ul class="sku-list">
<li class="sku-item">
<input type="checkbox" id="prop_31091-65568459" value="31091:65568459" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:65568459" value="10厘米以下" maxlength="15"
class="editbox text" id="J_Alias_31091-65568459">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-75471003" value="31091:75471003" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:75471003" value="10厘米-19厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-75471003">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-26761148" value="31091:26761148" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:26761148" value="20厘米-29厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-26761148">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-97603" value="31091:97603" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:97603" value="30厘米-39厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-97603">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-97602" value="31091:97602" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:97602" value="40厘米-49厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-97602">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-97743" value="31091:97743" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:97743" value="50-59厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-97743">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-75473815" value="31091:75473815" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:75473815" value="60厘米-69厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-75473815">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-75473816" value="31091:75473816" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:75473816" value="70厘米-79厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-75473816">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-75473817" value="31091:75473817" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:75473817" value="80厘米-89厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-75473817">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-75473818" value="31091:75473818" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:75473818" value="90厘米-99厘米" maxlength="15"
class="editbox text" id="J_Alias_31091-75473818">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-97605" value="31091:97605" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:97605" value="1米" maxlength="15" class="editbox text"
id="J_Alias_31091-97605">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-6902025" value="31091:6902025" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:6902025" value="1.1米" maxlength="15"
class="editbox text" id="J_Alias_31091-6902025">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-5231607" value="31091:5231607" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:5231607" value="1.2米" maxlength="15"
class="editbox text" id="J_Alias_31091-5231607">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-8668736" value="31091:8668736" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:8668736" value="1.3米" maxlength="15"
class="editbox text" id="J_Alias_31091-8668736">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-10393144" value="31091:10393144" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:10393144" value="1.4米" maxlength="15"
class="editbox text" id="J_Alias_31091-10393144">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-119521" value="31091:119521" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:119521" value="1.5米" maxlength="15" class="editbox text"
id="J_Alias_31091-119521">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-4104438" value="31091:4104438" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:4104438" value="1.6米" maxlength="15"
class="editbox text" id="J_Alias_31091-4104438">
</li>
<li class="sku-item">
<input type="checkbox" id="prop_31091-28409551" value="31091:28409551" name="cp_31091"
class="J_Checkbox">
<input type="editbox text" name="cpva_31091:28409551" value="1.7米" maxlength="15"
class="editbox text" id="J_Alias_31091-28409551">
</li>
</ul>
</div>
</div>
</div>
<div style="" class="sku-wrapper">
<div id="J_SKUMapContainer" class="sku-map" style="height: auto; auto; overflow: hidden;">
<table cellspacing="0" border="0" style="visibility: visible;">
<thead>
<tr>
<th class="J_Map_1627207">
<span>颜色分类</span>
</th>
<th class="J_Map_31091">
<span>大小</span>
</th>
<th class="J_Map_0">
<span class="required">价格</span>
</th>
<th class="J_Map_0">
<span class="required">特价</span>
</th>
<th class="J_Map_0">
<span class="required">数量</span>
</th>
<th class="J_Map_0">
<span class="">是否有库存</span>
</th>
<th class="J_Map_0">
<span class="">操作</span>
</th>
</tr>
</thead>
<tbody>
<tr class="J_MapRow">
<td class="tile" rowspan="1">
<span id="color_colorcode">军绿色</span>
</td>
<td rowspan="1">
<span class="J_Map_31091-14390029">2.2米</span>
</td>
<td class="price">
<input type="text" value="" class="J_MapPrice text" id="txtPrice" />
</td>
<td class="price">
<input type="text" value="" class="J_MapPrice text" id="txtTePrice" />
</td>
<td class="quantity">
<input type="text" class="J_MapQuantity text" id="txtQuantity" maxlength="6" />
</td>
<td class="tsc">
<label id="lblStatus">
</label>
</td>
<td class="batch" nowrap="nowrap">
更新
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>

查看全文

相关阅读:
Best wishes for a wonderful new year.
Using X++ code Reading to CSV file
Types of delete action
get focus from the FORM in dynamcis AX 2009
Database Lock
Using x++ code export to CSV file from dynamics AX 2009
Using x++ code updated to system filed values
Merry Christmas and Best Wishes for a Happy New Year
the most reluctant to delete to New Year SMS
《那些年啊，那些事——一个程序员的奋斗史》——53

原文地址：https://www.cnblogs.com/niaowo/p/3077962.html

jquery实现taobao 颜色 尺寸 联动效果

jquery实现taobao 颜色尺寸联动效果