今天在合并单元格的时候出现了很多问题,现在记录如下,如果只是简单合并几列的话,下面介绍的方法都是可以用的!具体使用哪一种方法,各位看官自取所需吧,如果有更好的方法,欢迎各位在评论里给出,并且第二种方法如果有人有优化方案了,也可以告诉我,让我继续学习优化一下自己的方法,想看效果的可以直接到最后粘贴代码,给出全部代码(注意jquery包的导入哦)!良心推荐大家直接看第二种方法中的方法2!题目标红了,这个是最好用的方法!你会爱上我的!
合并之前的样子: 理想的效果图为(参考第二种方法): 合并混乱的方法(适合少数列合并参考第一种方法):
第一,指定哪列合并哪列,这种的缺点很明显,但是对于普通简单的合并已经够用了!错乱了的合并,他不管前面的内容,只要你指定了这列,他就会对这列相邻的相同元素进行合并,这种合并的结果如下图所示:
方法1:
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
//tableId要合并的表的Id
//arr指定要合并列的
function mergeRowCell(tableId,arr){
for(var i =0; i<arr.length; i++){
$("#"+tableId).rowspan(arr[i]);//传入的参数是对应的列数从0开始
}
}
$(function() {
//要合并哪些列
var arr = [0, 1, 2,3];
mergeRowCell("table2",arr);
});
方法2:
//arr 要合并的列数 tableid要合并的table的ID
function formatTable(arr,tableid){
var array=new Array();
array=arr.split(",");
for(var k=0;k<array.length;k++){
var jqtid="#"+tableid;
var $table=$(jqtid);
var tagStr="";
var name="";
$table.find("tr:gt(0)").each(function(i){
var $tr=$(this);
var $td=$tr.children("td:eq("+array[k]+")");
var tdname=$td.text();
if(name==tdname){
//表示相同名字
$td.remove();
}else{
//
tagStr=tagStr+(i+1)+",";
}
name=tdname;
});
//对标记字符串进行分割
var strs= new Array();
strs=tagStr.substring(0,tagStr.length-1).split(",");
var count=$table.find("tr:gt(0)").length+1;
for(i=0;i<strs.length;i++){
var s="tr:eq("+strs[i]+")"
if(i<strs.length-1){
//得到要合并的行数
$table.find(s).children("td:eq("+array[k]+")").attr("rowspan",(strs[i+1]-strs[i]));
}else{
$table.find(s).children("td:eq("+array[k]+")").attr("rowspan",(count-strs[i]));
}
}
}
}
$(function() {
formatTable('2,1,0',"table2"); //要合并的列数,注意倒叙写列,第一列从0开始
});
方法3:
/**
* @ function:合并指定表格列(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格
* @ param:table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
* @ param:arr 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
*/
function table_rowspan(table_id, arr) {
var array=new Array();
array=arr.split(",");
for(var k=0;k<array.length;k++){
table_firsttd = "";
table_currenttd = "";
table_SpanNum = 0;
table_Obj = $(table_id + " tr td:nth-child(" + array[k] + ")");
table_Obj.each(function (i) {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
} else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) { //这边注意不是val()属性,而是text()属性
//td内容为空的不合并
if(table_firsttd.text() !=""){
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan", table_SpanNum);
}
} else {
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
}
}
$(function() {
table_rowspan("#table2","1,2,3,4");
});
方法4(来源于博友,粘贴过来的代码,留着以备后面使用,全部代码可移步博友博客)
$(function () {
// 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
// 才保留了jQuery.prototype这个形式
$.fn.mergeCell = function (options) {
return this.each(function () {
var cols = options.cols;
for (var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console调试
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
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();
}
$('#table2').mergeCell({
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
// 然后根据指定列来处理(合并)相同内容单元格
cols: [0, 1, 2, 3]
});
});
第二,这种合并会解决上面的错乱问题,但也有点问题,后续有时间了再去优化吧,满足暂时使用了(再往后的话数量列合并出现点问题,还需再优化了),效果如下图所示:
方法1:
//函数说明:合并指定表格(表格id为_w_table_id)指定列(行数大于_w_table_mincolnum 小于_w_table_maxcolnum)相同列中的相同文本的相邻单元格
// 多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_mincolnum 为需要进行比较合并的起始列数。为数字,则从最左边第一行为1开始算起。
// 此参数可以为空,为空则第一列为起始列。
// 需要注意,如果第一列为序号列,则需要排除此列。
//参数说明:_w_table_maxcolnum 为需要进行比较合并的最大列数,列数大于这个数值的单元格将不进行比较合并。
// 为数字,从最左边第一列为1开始算起。
// 此参数可以为空,为空则同_w_table_mincolnum。
function _w_table_lefttitle_rowspan(_w_table_id,_w_table_mincolnum,_w_table_maxcolnum){
if(_w_table_mincolnum == void 0){_w_table_mincolnum=1;}
if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=_w_table_mincolnum;}
if(_w_table_mincolnum>_w_table_maxcolnum){
return "";
}else{
var _w_table_splitrow=new Array();
for(iLoop=_w_table_mincolnum;iLoop<=_w_table_maxcolnum;iLoop++){
_w_table_onerowspan(iLoop);
}
}
function _w_table_onerowspan(_w_table_colnum){
_w_table_firstrow = 0;//前一列合并区块第一行
_w_table_SpanNum = 0;//合并单元格时的,单元格Span个数
_w_table_splitNum = 0;//数组的_w_table_splitrow的当前元素下标
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
_w_table_curcol_rownum = _w_table_Obj.length-1;//此列最后一行行数
if(_w_table_splitrow.length==0){_w_table_splitrow[0] = _w_table_curcol_rownum;}
_w_table_lastrow = _w_table_splitrow[0];//前一列合并区块最后一行
var _w_table_firsttd;
var _w_table_currenttd;
var _w_table_curcol_splitrow=new Array();
_w_table_Obj.each(function(i){
if(i==_w_table_firstrow){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
setTableRow(i-1);
}
if(i==_w_table_lastrow){setTableRow(i);}
}
function setTableRow(_splitrownum){
if(_w_table_lastrow<=_splitrownum&&_w_table_splitNum++<_w_table_splitrow.length){
//_w_table_firstrow=_w_table_lastrow+1;
_w_table_lastrow=_w_table_splitrow[_w_table_splitNum];
}
_w_table_curcol_splitrow[_w_table_curcol_splitrow.length]=_splitrownum;
if(i<_w_table_curcol_rownum){_w_table_firstrow=_splitrownum+1;}
}
});
_w_table_splitrow=_w_table_curcol_splitrow;
}
}
$(function() {
//要合并哪些列
var arr = [0, 1, 2,3];
_w_table_lefttitle_rowspan("#table2",1,4);//1和4分别代表开始列和结束列,包含关系,都为空的话默认只合并第一列
});
方法2(在所有方法的基础上进行改进!良心推荐此方法,你会爱上我的!):
$(function() {
//要合并哪些列(合并多列,需要将待处理的列从大到小排列)
var arr =[4,3,2,1,0];
mergeRowCell("table2",1,0,arr);
});
/*
mergeRowCell("tableId", 1, 0, 1);
Para1:tableId,table表格的id
Para2:1,开始行的索引值
Para3:0,结束行的索引值
Para4:1,需要处理的列的索引值(这是一个数组,注意数组里列的顺序)
*/
function mergeRowCell(tableId,startRow,endRow,arr){
for(var i =0; i<arr.length; i++){
MergeTableCell(tableId,startRow,endRow,arr[i]);
}
}
/*
MergeTableCell("tableId", 1, 0, 1);
Para1:tableId,table表格的id
Para2:1,开始行的索引值
Para3:0,结束行的索引值
Para4:1,需要处理的列的索引值
*/
function MergeTableCell(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
//设置为0时,检索所有行
if (endRow == 0) {
endRow = tb.rows.length - 1;
}
//指定数据行索引大于表格行数
if (endRow >= tb.rows.length) {
return;
}
//检测指定的列索引是否超出表格列数
if (col >= tb.rows[0].cells.length) {
return;
}
//循环需要判断的数据行
for (var i = startRow; i < endRow; i++) {
//如果当前行与下一行数据值相同,则进行前面列的判断
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
var Same = true;
//循环跟前面的所有的同级数据行进行判断
for (var j = col; j > 0; j--) {
if (tb.rows[startRow].cells[j - 1].innerHTML != tb.rows[i + 1].cells[j - 1].innerHTML) {
Same = false;
break;
}
}
//如果前面的同级数据行的值均相同,则进行单元格的合并
if (true == Same) {
//如果相同则删除下一行的第0列单元格
tb.rows[i + 1].cells[col].style.display = 'none';
//更新rowSpan属性
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
}
else {
//增加起始行
startRow = i + 1;
}
}
else {
//增加起始行
startRow = i + 1;
}
}
}
纯手工的新鲜出炉代码,全文代码如下(友情提示记得导入jquery包哦):
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
td{
border:1px solid red;
}
</style>
<script src="jquery.min.js"></script>
<script>
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
//tableId要合并的表的Id
//arr指定要合并列的
function mergeRowCell(tableId,arr){
for(var i =0; i<arr.length; i++){
$("#"+tableId).rowspan(arr[i]);//传入的参数是对应的列数从0开始
}
}
$(function() {
//要合并哪些列
var arr =[0,1,2,3,4];
//mergeRowCell("table2",arr);
//table_rowspan("#table2","1,2,3,4");
//_w_table_lefttitle_rowspan("#table2",1,6);
//formatTable('3,2,1,0',"table2"); //要合并的列数 需要将待处理的列从大到小排列
var arr2 =[4,3,2,1,0];//要合并哪些列(合并多列,需要将待处理的列从大到小排列)
mergeRowCellNew("table2",1,0,arr2);
});
/*
mergeRowCell("tableId", 1, 0, 1);
Para1:tableId,table表格的id
Para2:1,开始行的索引值
Para3:0,结束行的索引值
Para4:1,需要处理的列的索引值(这是一个数组,注意数组里列的顺序)
*/
function mergeRowCellNew(tableId,startRow,endRow,arr){
for(var i =0; i<arr.length; i++){
MergeTableCell(tableId,startRow,endRow,arr[i]);
}
}
/*
MergeTableCell("tableId", 1, 0, 1);
Para1:tableId,table表格的id
Para2:1,开始行的索引值
Para3:0,结束行的索引值
Para4:1,需要处理的列的索引值
*/
function MergeTableCell(tableId, startRow, endRow, col) {
var tb = document.getElementById(tableId);
//设置为0时,检索所有行
if (endRow == 0) {
endRow = tb.rows.length - 1;
}
//指定数据行索引大于表格行数
if (endRow >= tb.rows.length) {
return;
}
//检测指定的列索引是否超出表格列数
if (col >= tb.rows[0].cells.length) {
return;
}
//循环需要判断的数据行
for (var i = startRow; i < endRow; i++) {
//如果当前行与下一行数据值相同,则进行前面列的判断
if (tb.rows[startRow].cells[col].innerHTML == tb.rows[i + 1].cells[col].innerHTML) {
var Same = true;
//循环跟前面的所有的同级数据行进行判断
for (var j = col; j > 0; j--) {
if (tb.rows[startRow].cells[j - 1].innerHTML != tb.rows[i + 1].cells[j - 1].innerHTML) {
Same = false;
break;
}
}
//如果前面的同级数据行的值均相同,则进行单元格的合并
if (true == Same) {
//如果相同则删除下一行的第0列单元格
tb.rows[i + 1].cells[col].style.display = 'none';
//更新rowSpan属性
tb.rows[startRow].cells[col].rowSpan = (tb.rows[startRow].cells[col].rowSpan | 0) + 1;
}
else {
//增加起始行
startRow = i + 1;
}
}
else {
//增加起始行
startRow = i + 1;
}
}
}
//arr 要合并的列数 tableid要合并的table的ID
function formatTable(arr,tableid){
var array=new Array();
array=arr.split(",");
for(var k=0;k<array.length;k++){
var jqtid="#"+tableid;
var $table=$(jqtid);
var tagStr="";
var name="";
$table.find("tr:gt(0)").each(function(i){
var $tr=$(this);
var $td=$tr.children("td:eq("+array[k]+")");
var tdname=$td.text();
if(name==tdname){
//表示相同名字
$td.remove();
}else{
//
tagStr=tagStr+(i+1)+",";
}
name=tdname;
});
//对标记字符串进行分割
var strs= new Array();
strs=tagStr.substring(0,tagStr.length-1).split(",");
var count=$table.find("tr:gt(0)").length+1;
for(i=0;i<strs.length;i++){
var s="tr:eq("+strs[i]+")"
if(i<strs.length-1){
//得到要合并的行数
$table.find(s).children("td:eq("+array[k]+")").attr("rowspan",(strs[i+1]-strs[i]));
}else{
$table.find(s).children("td:eq("+array[k]+")").attr("rowspan",(count-strs[i]));
}
}
}
}
/**
* @ function:合并指定表格列(表格id为table_id)指定列(列数为table_colnum)的相同文本的相邻单元格
* @ param:table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data
* @ param:arr 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
*/
function table_rowspan(table_id, arr) {
var array=new Array();
array=arr.split(",");
for(var k=0;k<array.length;k++){
table_firsttd = "";
table_currenttd = "";
table_SpanNum = 0;
table_Obj = $(table_id + " tr td:nth-child(" + array[k] + ")");
table_Obj.each(function (i) {
if (i == 0) {
table_firsttd = $(this);
table_SpanNum = 1;
} else {
table_currenttd = $(this);
if (table_firsttd.text() == table_currenttd.text()) { //这边注意不是val()属性,而是text()属性
//td内容为空的不合并
if(table_firsttd.text() !=""){
table_SpanNum++;
table_currenttd.hide(); //remove();
table_firsttd.attr("rowSpan", table_SpanNum);
}
} else {
table_firsttd = $(this);
table_SpanNum = 1;
}
}
});
}
}
//函数说明:合并指定表格(表格id为_w_table_id)指定列(行数大于_w_table_mincolnum 小于_w_table_maxcolnum)相同列中的相同文本的相邻单元格
// 多于一列时,后一列的单元格合并范围不能超过前一列的合并范围。避免出现交错。
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data
//参数说明:_w_table_mincolnum 为需要进行比较合并的起始列数。为数字,则从最左边第一行为1开始算起。
// 此参数可以为空,为空则第一列为起始列。
// 需要注意,如果第一列为序号列,则需要排除此列。
//参数说明:_w_table_maxcolnum 为需要进行比较合并的最大列数,列数大于这个数值的单元格将不进行比较合并。
// 为数字,从最左边第一列为1开始算起。
// 此参数可以为空,为空则同_w_table_mincolnum。
function _w_table_lefttitle_rowspan(_w_table_id,_w_table_mincolnum,_w_table_maxcolnum){
if(_w_table_mincolnum == void 0){_w_table_mincolnum=1;}
if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=_w_table_mincolnum;}
if(_w_table_mincolnum>_w_table_maxcolnum){
return "";
}else{
var _w_table_splitrow=new Array();
for(iLoop=_w_table_mincolnum;iLoop<=_w_table_maxcolnum;iLoop++){
_w_table_onerowspan(iLoop);
}
}
function _w_table_onerowspan(_w_table_colnum){
_w_table_firstrow = 0;//前一列合并区块第一行
_w_table_SpanNum = 0;//合并单元格时的,单元格Span个数
_w_table_splitNum = 0;//数组的_w_table_splitrow的当前元素下标
_w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
_w_table_curcol_rownum = _w_table_Obj.length-1;//此列最后一行行数
if(_w_table_splitrow.length==0){_w_table_splitrow[0] = _w_table_curcol_rownum;}
_w_table_lastrow = _w_table_splitrow[0];//前一列合并区块最后一行
var _w_table_firsttd;
var _w_table_currenttd;
var _w_table_curcol_splitrow=new Array();
_w_table_Obj.each(function(i){
if(i==_w_table_firstrow){
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
}else{
_w_table_currenttd = $(this);
if(_w_table_firsttd.text()==_w_table_currenttd.text()){
_w_table_SpanNum++;
_w_table_currenttd.hide(); //remove();
_w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
}else{
_w_table_firsttd = $(this);
_w_table_SpanNum = 1;
setTableRow(i-1);
}
if(i==_w_table_lastrow){setTableRow(i);}
}
function setTableRow(_splitrownum){
if(_w_table_lastrow<=_splitrownum&&_w_table_splitNum++<_w_table_splitrow.length){
//_w_table_firstrow=_w_table_lastrow+1;
_w_table_lastrow=_w_table_splitrow[_w_table_splitNum];
}
_w_table_curcol_splitrow[_w_table_curcol_splitrow.length]=_splitrownum;
if(i<_w_table_curcol_rownum){_w_table_firstrow=_splitrownum+1;}
}
});
_w_table_splitrow=_w_table_curcol_splitrow;
}
}
</script>
</head>
<body>
<table class="table mbn tc-med-1 tc-bold-last tc-fs13-last" id="table1">
<thead>
<tr>
<th>省份</th>
<th>市级</th>
<th>商品代码</th>
<th>商品名称</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>20</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>30</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00027</td>
<td>白花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00027</td>
<td>白花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00027</td>
<td>白花油</td>
<td>30</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00027</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00027</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00027</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
</tbody>
</table>
<table class="table mbn tc-med-1 tc-bold-last tc-fs13-last" id="table2">
<thead>
<tr>
<th>省份</th>
<th>市级</th>
<th>商品代码</th>
<th>商品名称</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>20</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>30</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>深圳</td>
<td>00027</td>
<td>白花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00027</td>
<td>白花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>广州</td>
<td>00027</td>
<td>白花油</td>
<td>30</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00027</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00027</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00027</td>
<td>红花油</td>
<td>10</td>
</tr>
<tr>
<td>广东</td>
<td>河源</td>
<td>00028</td>
<td>红花油</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>