JQ或JS仿京东淘宝属性规格SKU样式

2024-04-21 08:48
文章标签 js 属性 淘宝 样式 京东 sku 规格 jq

本文主要是介绍JQ或JS仿京东淘宝属性规格SKU样式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

图片说明


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>生成表格</title><link rel="stylesheet" type="text/css" href="css/table.css"><style type="text/css">.hide {display: none;}.mt10 {margin-top: 10px;}.control-group {overflow: hidden;}.control-group a {color: #666;text-decoration: none;}.control-group a:hover {text-decoration: underline;}.control-label {float: left;width: 100px;line-height: 24px;}.controls {overflow: hidden;}.controls input[type="text"] {border: 1px solid #ddd;height: 20px;width: 120px;}.controls input[type="button"] {margin-top: 10px;height: 32px;cursor: pointer;}.config_item {margin-top: 10px;border: 1px dashed #ddd;padding: 10px;}.config_item section {margin-top: 10px;}.config_item section span {margin-right: 16px;}.config_item input[type="text"] {width: 80px;text-align: center;}.choose_config .Father_Title {margin: 0;margin-bottom: 10px;padding: 0;font-size: 16px;font-weight: normal;display: inline-block;vertical-align: middle;}.choose_config .Father_Item {padding: 0;margin: 0;margin-bottom: 10px;list-style: none;display: inline-block;vertical-align: middle;}.choose_config .Father_Item li {display: inline-block;margin-right: 10px;}.columnList {border-collapse: collapse;}.columnList th {background-color: #eee;}.columnList th,.columnList td {padding: 5px 10px;border: 1px solid #ddd;line-height: 24px;text-align: center;}</style>
</head>
<body>
<!-- 选择信息 -->
<div class="control-group choose_config"><div class="control-label">选择信息：</div><div class="controls"><h3 class="Father_Title">颜色：</h3><ul class="Father_Item Father_Item0"><li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li><li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="红色">红色</label></li><li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="白色">白色</label></li><li><label><input id="Checkbox0" type="checkbox" class="checkbox check_item" value="土豪金">土豪金</label></li></ul><br><h3 class="Father_Title">内存：</h3><ul class="Father_Item Father_Item1"><li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li><li><label><input id="Checkbox1" type="checkbox" class="checkbox check_item" value="32G">32G</label></li><li><label><input id="Checkbox1" type="checkbox" class="checkbox check_item" value="16G">16G</label></li></ul><br><h3 class="Father_Title">尺寸：</h3><ul class="Father_Item Father_Item2"><li><label><input id="Checkbox0" type="checkbox" class="checkbox check_all" value="全选">全选</label></li><li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="5.5">5.5</label></li><li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="4.5">4.5</label></li><li><label><input id="Checkbox2" type="checkbox" class="checkbox check_item" value="3.5">3.5</label></li></ul><br></div>
</div>
<!-- 生成表格 -->
<div class="control-group mt10"><div class="control-label">生成表格：</div><div class="controls" id="createTable"></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
/*** Created by Administrator on 14-12-01.* 模拟淘宝SKU添加组合* 页面注意事项：*      1、 .Father_Title      这个类作用是取到所有标题的值，赋给表格，如有改变JS也应相应改动*      2、 .Father_Item       这个类作用是取类型组数，有多少类型就添加相应的类名：如: Father_Item1、Father_Item2、Father_Item3 ...*/
$(function() {$(document).on('change', '.choose_config label', function() {var parent=$(this).parents('.Father_Item');var _this=$('.checkbox',this);// 是否全选$('.checkbox',parent).each(function() {var bCheck2=true;if (_this.hasClass('check_all')) {if (_this.get(0).checked) {bCheck2=true;$('.check_item',parent).prop('checked', bCheck2);}else{bCheck2=false;$('.check_item',parent).prop('checked', bCheck2);}return false;} else {if ((!this.checked)&&(!$(this).hasClass('check_all'))) {bCheck2 = false;$('.check_all',parent).prop('checked', bCheck2);return false;}}$('.check_all',parent).prop('checked', bCheck2);});step.Creat_Table();});var step = {// 信息组合Creat_Table: function() {step.hebingFunction();var SKUObj = $('.Father_Title');var arrayTile = new Array(); // 表格标题数组var arrayInfor = new Array(); // 盛放每组选中的CheckBox值的对象var arrayColumn = new Array(); // 指定列，用来合并哪些列var bCheck = true; // 是否全选，只有全选，表格才会生成var columnIndex = 0;$.each(SKUObj, function(i, item) {arrayColumn.push(columnIndex++);arrayTile.push(SKUObj.eq(i).text().replace('：', ''));var itemName = '.Father_Item' + i;var bCheck2 = true; // 是否全选// 获取选中的checkbox的值var order = new Array();$(itemName + ' .check_item:checked').each(function() {order.push($(this).val());});arrayInfor.push(order);if (order.join() == '') {bCheck = false;}})// 开始生成表格if (bCheck) {$('#createTable').html('');var table = $('<table id="process" class="columnList"></table>');table.appendTo($('#createTable'));var thead = $('<thead></thead>');thead.appendTo(table);var trHead = $('<tr></tr>');trHead.appendTo(thead);// 创建表头var str = '';$.each(arrayTile, function(index, item) {str += '<th width="100">' + item + '</th>';})str += '<th  width="200">价格</th><th width="100">操作</th>';trHead.append(str);var tbody = $('<tbody></tbody>');tbody.appendTo(table);var zuheDate = step.doExchange(arrayInfor);if (zuheDate.length > 0) {//创建行$.each(zuheDate, function(index, item) {var td_array = item.split(',');var tr = $('<tr></tr>');tr.appendTo(tbody);var str = '';$.each(td_array, function(i, values) {str += '<td>' + values + '</td>';});str += '<td ><input name="Txt_PriceSon" class="inpbox inpbox-mini" type="text"></td>';str += '<td ><a href="#">删除</a></td>';tr.append(str);});}//结束创建Table表arrayColumn.pop(); //删除数组中最后一项//合并单元格$(table).mergeCell({// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始cols: arrayColumn});} else {//未全选中,清除表格document.getElementById('createTable').innerHTML = "";}},hebingFunction: function() {$.fn.mergeCell = function(options) {return this.each(function() {var cols = options.cols;for (var i = cols.length - 1; cols[i] != undefined; i--) {mergeCell($(this), cols[i]);}dispose($(this));})};function mergeCell($table, colIndex) {$table.data('col-content', ''); // 存放单元格内容$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用// 进行"扫面"处理 关键是定位col-td, 和其对应的rowspan$('tbody tr', $table).each(function(index) {// td:eq中的colIndex即列索引var $td = $('td:eq(' + colIndex + ')', this);// 获取单元格的当前内容var currentContent = $td.html();// 第一次时走次分支if ($table.data('col-content') == '') {$table.data('col-content', currentContent);$table.data('col-td', $td);} else {// 上一行与当前行内容相同if ($table.data('col-content') == currentContent) {// 上一行与当前行内容相同则col-rowspan累加, 保存新值var rowspan = $table.data('col-rowspan') + 1;$table.data('col-rowspan', rowspan);// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响$td.hide();// 最后一行的情况比较特殊一点// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan// 最后一行不会向下判断是否有不同的内容if (++index == $table.data('trNum'))$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));}// 上一行与当前行内容不同else {// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理if ($table.data('col-rowspan') != 1) {$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));}// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan$table.data('col-td', $td);$table.data('col-content', $td.html());$table.data('col-rowspan', 1);}}})}// 同样是个private函数 清理内存之用function dispose($table) {$table.removeData();}},doExchange: function(doubleArrays) {// 二维数组，最先两个数组组合成一个数组，与后边的数组组成新的数组，依次类推，知道二维数组变成以为数组，所有数据两两组合var len = doubleArrays.length;if (len >= 2) {var arr1 = doubleArrays[0];var arr2 = doubleArrays[1];var len1 = arr1.length;var len2 = arr2.length;var newLen = len1 * len2;var temp = new Array(newLen);var index = 0;for (var i = 0; i < len1; i++) {for (var j = 0; j < len2; j++) {temp[index++] = arr1[i] + ',' + arr2[j];}}var newArray = new Array(len - 1);newArray[0] = temp;if (len > 2) {var _count = 1;for (var i = 2; i < len; i++) {newArray[_count++] = doubleArrays[i];}}return step.doExchange(newArray);} else {return doubleArrays[0];}}}
})
</script>
</body>
</html>

JD颜色选择：
 <li class="attr-l "><label><input type="checkbox" class="i-chk" name="addWareVO.colorAttr" checked="checked" fid="1" value="1566055107" id="checkColor_1566055107"><i style="background-color:#FF0000;margin-right: 2px;"></i><span title="红色" style="display: none;">红色</span></label><input type="text" class="i-txt colorAliasInput valid" name="addWareVO.colorAttrValue" maxlength="25" style="display: inline;" init="750ml装*1瓶" value="750ml装*1瓶" id="inputColor_1566055107">
</li>



这篇关于JQ或JS仿京东淘宝属性规格SKU样式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/922654。

相关文章

HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...
CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》：本文主要介绍了如何使用CSS模拟HTML的title属性，通过鼠标悬浮显示提示文字效果，通过设置`.tipBox`和`.tipBox.tipContent`的样式，实现了提示内容的隐藏和显示，详细内容请阅读本文，希望能对你有所帮助... 效
阅读更多...
解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题

《解读为什么@Autowired在属性上被警告,在setter方法上不被警告问题》在Spring开发中,@Autowired注解常用于实现依赖注入,它可以应用于类的属性、构造器或setter方法上,然... 目录1. 为什么 @Autowired 在属性上被警告？1.1 隐式依赖注入1.2 IDE 的警告：
阅读更多...
Node.js net模块的使用示例

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服
阅读更多...
mac安装nvm(node.js)多版本管理实践步骤

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》：本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N
阅读更多...
HTML5中下拉框＜select＞标签的属性和样式详解

HTML5中下拉框＜select＞标签的属性和样式详解

《HTML5中下拉框＜select＞标签的属性和样式详解》在HTML5中，下拉框（select标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中选择值的方式,本文将深入探讨select标签的... 在html5中，下拉框（<select>标签）作为表单的重要组成部分，为用户提供了一个从预定义选项中
阅读更多...
前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

前端 CSS 动态设置样式：:class、:style 等技巧(推荐)

《前端CSS动态设置样式：:class、:style等技巧(推荐)》：本文主要介绍了Vue.js中动态绑定类名和内联样式的两种方法：对象语法和数组语法，通过对象语法，可以根据条件动态切换类名或样式；通过数组语法，可以同时绑定多个类名或样式，此外，还可以结合计算属性来生成复杂的类名或样式对象，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
JS 实现复制到剪贴板的几种方式小结

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点：缺点：
阅读更多...
在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程

《在Java中使用ModelMapper简化Shapefile属性转JavaBean实战过程》本文介绍了在Java中使用ModelMapper库简化Shapefile属性转JavaBean的过程,对比... 目录前言一、原始的处理办法1、使用Set方法来转换2、使用构造方法转换二、基于ModelMapper
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2