JQ或JS仿京东淘宝属性规格SKU样式
2024-05-08 18:14:46
<!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样式相关推荐
- Android 仿京东淘宝多规格选择
上图直接点,下次在修改理论,因为要下班了 这是淘宝的规格选择,我随便选择了一个,将就着看吧 然后再来看看我的效果 这个我是在CSDN上看的一篇文章 我把地址贴出来这是原文地址我是在他的基础改的 我做了 ...
- 菜鸟窝-仿京东淘宝项目学习笔记（二）ToolBar的基本使用
本篇知识点均来自于菜鸟窝-仿京东淘宝实战项目视频中 今天继续仿京东淘宝项目的学习,第二天,学习ToolBar的基本使用,本篇记录视频中一些重要的笔记 笔记一:ToolBar的一些重要属性 xml st ...
- 微信小程序仿京东淘宝商品排序
微信小程序仿京东淘宝商品排序 效果图如下所示 仿京东微信小程序视频请加QQ:1010753897 下载地址:https://download.csdn.net/download/qq_43764578 ...
- 仿京东淘宝等首页广告弹窗广告 dialog
记录贴 防止以后忘记. 上图 1.dialog布局 图片随便找的 <?xml version="1.0" encoding="utf-8"?> &l ...
- 仿京东淘宝放大镜特效 jqzoom.js
效果图如下: HTML 文本源码: 1 <!DOCTYPE html> 2 <htmllang="en"> 3 <head> 4 <met ...
- Android 仿京东淘宝 商品详情页 商品图片效果
最近重构商品,产品要求,按照淘宝京东来.... 成品如图这个效果 思路就是监听外边ScrollView的滑动监听,然后给上边图片设置margin,二话不说上代码 简单的界面布局 <?xml ve ...
- Android 仿京东淘宝拼多多的商品分类，双列表联动，RecyclerView嵌套
淘宝京东的相对简单很多,两个RecyclerView就可实现了. 现在要做的是右边滑动的时候左边跟着联动,如下图: 思路:左右肯定都是RecyclerView了,至于中间的图片嘛当然也是Recycle ...
- 安卓高仿京东淘宝的筛选功能，全网最简单方便
最近需要实现一个筛选的功能.但是在网上找了半天都写得特别乱,要不就是收费,今天做一个.实现效果图如下. 点击按钮直接弹出.可以放在任何控件下面.下面是使用代码: 首先需要添加依赖: 在build.gr ...
- 仿京东淘宝商品详情页中视频和图片的轮播功能
还没有学会如何上传视频到博客上,先上传图片吧 案例下载地址: https://download.csdn.net/download/dawnzeng/10430298 视频播放借用了饺子播放器,最主要 ...
最新文章
- 基于OpenCV高斯模型的公共场景人流量统计
- Matlab计时函数的使用
- COM笔记-CoCreateInstance
- python实验三答案_20194123 实验三《Python程序设计》实验报告
- Angular应用页面里appId的生成逻辑和位置
- 文件查找_tar_ext34_swap
- 从外部调用Django模块
- Maven + Nexus + SVN + Eclipse 配置步骤说明
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第11节 Logback日志框架介绍和SpringBoot整合实战_44、新日志框架LogBack介绍...
- 计算机boot进入u盘启动,深度u盘装系统进入boot设置教程
- Java的API帮助文档
- apple id 如何注册来啦？（亲测流程）
- 2021年网络空间安全学院预推免面试经验总结
- 大数据分析服务器硬件配置如何选择
- justinmind破解方法
- python找不到指定模块sklearn怎么办_python中sklearn找不到指定模块怎么办
- 批量分类导出语雀知识库下所有文章
- IDEA 中 Maven运行tomacat7出现A child container failed during start错误
- 从工控网络安全攻击中学习的经验
- 查看服务器状态的命令是什么,查看Zookeeper服务器状态信息的一些命令