问题描述
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>添加成品模板</title><scripttype="text/javascript"src="scripts/jquery-1.9.1.min.js"></script><linkhref="css/css.css"rel="stylesheet"/><style>#re_table{border-collapse:collapse;backgrouad_color:#eaf5ff;}#re_tabletd,th{border:#9999991pxsolid;}#ys_table{border-collapse:collapse;backgrouad_color:#eaf5ff;}#ys_tabletd,th{border:#9999991pxsolid;}</style></head><body><tablewidth="600"id="re_table"><thead><tr><th>产品编号</th><th>产品名称</th><th>计量单位</th><th>产品价格</th><th>供应商</th></tr></thead><tbodyid="tb_body_selected"></tbody></table></div></div></body><scripttype="text/javascript">$(document).ready(function(){varjson=[{code:'001',name:'螺丝',unit:'个',price:5,factory:'艾玛特'},{code:'001',name:"螺帽",unit:'个',price:3,factory:'艾玛特'},{code:'002',name:'尺子',unit:'支',price:2,factory:'艾玛特'},{code:'003',name:'钢笔',unit:'支',price:7,factory:'艾玛特'},{code:'003',name:'铅笔',unit:'支',price:7,factory:'艾玛特'},{code:'003',name:'毛笔',unit:'支',price:7,factory:'艾玛特'},];$(json).each(function(){$("#tb_body_selected").append("<tr>"+"<td>"+this.code+"</td>"+"<td>"+this.name+"</td>"+"<td>"+this.unit+"</td>"+"<td>"+this.price+"</td>"+"<td>"+this.factory+"</td>"+"</tr>");});});</script>
效果如下:想实现图片上的效果就是根据code,如果code相同的话就合并行我该怎么实现啊
解决方案
本帖最后由 yupl358301074 于 2014-09-08 12:51:28 编辑
解决方案二：
我这里不知道为什么中文汉字都是乱码，都用拼音代替了，你看下：代码：<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Product</title><style>#re_table{border-collapse:collapse;backgrouad_color:#eaf5ff;}#re_tabletd,th{border:#9999991pxsolid;}#ys_table{border-collapse:collapse;backgrouad_color:#eaf5ff;}#ys_tabletd,th{border:#9999991pxsolid;}</style><scripttype="text/javascript"src="../js/jquery-1.10.2.min.js"></script><scripttype="text/javascript">$(document).ready(function(){vararr=newArray();vararrSum=newArray();varindex=0;varjson=[{code:'001',name:'luosi',unit:'ge',price:5,factory:'B/S'},{code:'001',name:'luomao',unit:'ge',price:3,factory:'B/S'},{code:'002',name:'chizhi',unit:'ge',price:2,factory:'B/S'},{code:'003',name:'gangbi',unit:'ge',price:7,factory:'B/S'},{code:'003',name:'qianbi',unit:'ge',price:7,factory:'B/S'},{code:'003',name:'maobi',unit:'ge',price:7,factory:'B/S'},{code:'001',name:'luoding',unit:'ge',price:3,factory:'B/S'},];$(json).each(function(){varisHave=false;if(arr!=null&&arr.length>0){for(vari=0;i<arr.length;i++){if(arr[i]==this.code){isHave=true;break;}}}if(isHave){returntrue;}arr[index++]=this.code;});for(vari=0;i<arr.length;i++){varsum=0;$(json).each(function(){if(this.code==arr[i]){sum=sum+1;}});arrSum[i]=sum;}for(vari=0;i<arr.length;i++){varisTrue=true;$(json).each(function(){if(arr[i]==this.code){if(isTrue){$("#tb_body_selected").append("<tr>"+"<tdrowspan="+arrSum[i]+">"+this.code+"</td>"+"<td>"+this.name+"</td>"+"<td>"+this.unit+"</td>"+"<td>"+this.price+"</td>"+"<td>"+this.factory+"</td>"+"</tr>");isTrue=false;}else{$("#tb_body_selected").append("<tr>"+"<td>"+this.name+"</td>"+"<td>"+this.unit+"</td>"+"<td>"+this.price+"</td>"+"<td>"+this.factory+"</td>"+"</tr>");}}});}});</script></head><body><tablewidth="600"id="re_table"><thead><tr><th>ProductCode</th><th>ProductName</th><th>ProductType</th><th>ProductPrice</th><th>Desperation</th></tr></thead><tbodyid="tb_body_selected"></tbody></table></div></div></body></html>
解决方案三：
上面的代码没有注释，下面的代码是我加了注释的：<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Product</title><style>#re_table{border-collapse:collapse;backgrouad_color:#eaf5ff;}#re_tabletd,th{border:#9999991pxsolid;}#ys_table{border-collapse:collapse;backgrouad_color:#eaf5ff;}#ys_tabletd,th{border:#9999991pxsolid;}</style><scripttype="text/javascript"src="../js/jquery-1.10.2.min.js"></script><scripttype="text/javascript">$(document).ready(function(){vararr=newArray();//用于标记有多少个不重复的编码vararrSum=newArray();//相同编码的有多少个，用于跨行varindex=0;varjson=[{code:'001',name:'luosi',unit:'ge',price:5,factory:'B/S'},{code:'001',name:'luomao',unit:'ge',price:3,factory:'B/S'},{code:'002',name:'chizhi',unit:'ge',price:2,factory:'B/S'},{code:'003',name:'gangbi',unit:'ge',price:7,factory:'B/S'},{code:'003',name:'qianbi',unit:'ge',price:7,factory:'B/S'},{code:'003',name:'maobi',unit:'ge',price:7,factory:'B/S'},{code:'001',name:'luoding',unit:'ge',price:3,factory:'B/S'},];$(json).each(function(){//筛选出所有不重复的编码，保存在数组中varisHave=false;//是否跳出本次玄幻if(arr!=null&&arr.length>0){for(vari=0;i<arr.length;i++){if(arr[i]==this.code){isHave=true;break;}}}if(isHave){returntrue;//each调出循环returnfalse-退出循环，相当于break;}arr[index++]=this.code;});for(vari=0;i<arr.length;i++){//相同编码的总数，用于跨行，存放在相应的数组中varsum=0;$(json).each(function(){if(this.code==arr[i]){sum=sum+1;}});arrSum[i]=sum;}for(vari=0;i<arr.length;i++){//循环遍历出来varisTrue=true;//是否是第一次打印$(json).each(function(){if(arr[i]==this.code){//把相同编号的数据取出来if(isTrue){//是第一次打印$("#tb_body_selected").append("<tr>"+"<tdrowspan="+arrSum[i]+">"+this.code+"</td>"//跨行+"<td>"+this.name+"</td>"+"<td>"+this.unit+"</td>"+"<td>"+this.price+"</td>"+"<td>"+this.factory+"</td>"+"</tr>");isTrue=false;}else{//已经打印过了$("#tb_body_selected").append("<tr>"+"<td>"+this.name+"</td>"+"<td>"+this.unit+"</td>"+"<td>"+this.price+"</td>"+"<td>"+this.factory+"</td>"+"</tr>");}}});}});</script></head><body><tablewidth="600"id="re_table"><thead><tr><th>ProductCode</th><th>ProductName</th><th>ProductType</th><th>ProductPrice</th><th>Desperation</th></tr></thead><tbodyid="tb_body_selected"></tbody></table></div></div></body></html>
解决方案四：
如果code和上一个code相等，rowsspan++