JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h1>没有JS操作合并前的效果</h1>
<table width="400" border=1 id="theTable" >
	<thead>
    	<tr>
        	<th>编号</th>
            <th>数字测试1</th>
            <th>数字测试2</th>
        </tr>
    </thead>
    <tbody>
    	<tr>
          <td>001</td>
          <td>2</td>
          <td>3</td>
        </tr>
        <tr>
          <td>004</td>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>004</td>
          <td>5</td>
          <td>9</td>
        </tr>
        <tr>
          <td>005</td>
          <td>11</td>
          <td>12</td>
        </tr>
        <tr>
          <td>006</td>
          <td>14</td>
          <td>15</td>
        </tr>
        <tr>
          <td>006</td>
          <td>17</td>
          <td>18</td>
        </tr>
        <tr>
          <td>006</td>
          <td>8</td>
          <td>9</td>
        </tr>
        <tr>
          <td>007</td>
          <td>8</td>
          <td>9</td>
        </tr>
    </tbody>
</table>
<h1>JS操作合并后的效果</h1>
<table width="400" border=1 id="theTable" >
	<thead>
    	<tr>
        	<th>编号</th>
            <th>数字测试1</th>
            <th>数字测试2</th>
        </tr>
    </thead>
    <tbody id="j-tbody">
		
    </tbody>
</table>

JavaScript

//去掉数组重复项
   function unique(arr){
		arr = arr || [];
		var obj = {},
			ret = [];
		for(var i = 0, ilen = arr.length; i < ilen; i+=1) {
			var curItem = arr[i],
				curItemType = typeof(curItem) + curItem;
			if(obj[curItemType] !== 1) {
				ret.push(curItem);
				obj[curItemType] = 1;
			}
		}
		return ret;
	}
	/**
	$.ajax({
		
	});**/
	// 假如返回数据如下：
	var data = [{'key':[{'num1':'001','n2':'4','n3':'5'}]},
				{'key':[{'num1':'002','n2':'44','n3':'55'},{'num1':'002','n2':'44','n3':'55'}]},
				{'key':[{'num1':'003','n2':'444','n3':'555'},{'num1':'003','n2':'444','n3':'555'}]},
				{'key':[{'num1':'004','n2':'666','n3':'666'},{'num1':'004','n2':'666','n3':'666'}]}
			   ];
		html = "";
	
	$('#j-tbody').html('');
	for(var i = 0; i < data.length; i++) {
		
		for(var j = 0; j < data[i].key.length; j++) {
			html += '<tr class="j-number" data-num="'+data[i].key[j].num1+'" data-len="'+data[i].key.length+'">'+
					  /*'<td>'+data[i].key[j].num1+'</td>'+ */
					  '<td>'+data[i].key[j].n2+'</td>'+
					  '<td>'+data[i].key[j].n3+'</td>'+
					'</tr>';
		}
	}
	$("#j-tbody").html(html);

	var rets = [];
	// 遍历tr 获取属性 data-num 
	$('.j-number').each(function(){
		var num = $(this).attr('data-num');
		rets.push(num);
	});
	var newArrs = unique(rets),
		domElems = $('.j-number');
	
    // 再次遍历新数组
	for(var m = 0; m < newArrs.length; m++) {
		for(var n = 0; n < domElems.length; n++) {
			var elemNum = $(domElems[n]).attr('data-num'),
				elemLen = $(domElems[n]).attr('data-len');
			if(newArrs[m] == elemNum) {
				var td = '<td rowspan="'+elemLen+'">'+elemNum+'</td>';
				$(domElems[n]).prepend(td);
				break;
			}
		}
	}