首页 > 解决方案 > jQuery - 将相同 Section # 中的 (s) 值与相同 Group # 组合/删除重复项

问题描述

我已经更新了代码,该代码目前正在为每个 Group # 工作。现有代码确定匹配的 Section # 和 Group #,并组合 TR 值,添加平均值并除以 TR 的数量,并删除任何重复项。

我正在尝试为第 # 节中的每个组 # 确定一个位置。(*示例 - 第 1 部分:第 1 组 - 第 1 组 / 第 2 组 - 第 3 组 / 第 3 组 - 第 2 组)

 $(function() {
    alert('View Table Before Grouping');

 	sort_array();
   	combine_rows();
    compute_average();
  
});

//function sort_array
function sort_array() {
var $table = $('table');
var header = $('table tr:first-child').html();
var l = [];
  
  $table.find('tr').each( function() {
  	//get values from td(s) from each row
    var section = $(this).find('.class_section_number').text();
    var group_number = $(this).find('.group_number').text();
    var average = $(this).find('td:eq(2)').text();
    var place = $(this).find('td:eq(3)').text();
  	//add to array
	 	l.push([section, group_number, average, place]); 
    //remove saved row
   	$(this).remove();  
   });
   
   l = l.slice(1);  
   //sort the array by section #, then group #
 	 l.sortBy(0, true, 1, true, 2, false);
   
   $table.prepend(header);
 
 	 //rebuild table after sort
   $.each(l, function(key, value) {
     $('table').append('<tr><td class="class_section_number">' + value[0] + '</td><td class="group_number">' + value[1] + '</td><td class="grade">' + value[2] + '</td><td>' + value[3] + '</td></tr>');
 	 });
   
}

//function combine_rows
function combine_rows() {  
  $('table tr').each( function() {
  
   //get current row data	
    var section = $(this).find('.class_section_number').text();
    var group = $(this).find('.group_number').text();
    var average = $(this).find('td:eq(2)').text();    
    //get next row data
    var next_section = $(this).next('tr').find('.class_section_number').text();
    var next_group = $(this).next('tr').find('.group_number').text();
    var next_average = $(this).next('tr').find('td:eq(2)').text();
    //check for section # / group # row match   
    	if ((section === next_section) && (group === next_group)) {
      	 //check for empty average
      	 if (average === 'No Data') {
         	 average = 0 + ',' + next_average;
         }
         else {
         	 average = average + ',' + next_average;
         }
      	 //set combined average
         $(this).next('tr').find('td:eq(2)').text(average);
         //remove matching row
      	 $(this).remove();
      }
    
});
}

//function compute_average
function compute_average() {
	 $('table tr').each( function() {
     //get average from row
   	 var average = $(this).find('td:eq(2)').text();
     //split average into array (*if comma separated values)
     average_array = average.split(',');
     var total = 0;
     //total average values from array / divide by count and set     
      for (var i = 0; i < average_array.length; i++) {
          total += (+average_array[i]);          
          $(this).find('td:eq(2)').text((total / average_array.length).toFixed(2));
      }
   });
}

//array sort function
Array.prototype.sortBy = function (propertyName, sortDirection) {
    var sortArguments = arguments;
    this.sort(function (objA, objB) {
        var result = 0;
        for (var argIndex = 0; argIndex < sortArguments.length && result === 0; argIndex += 2) {
            var propertyName = sortArguments[argIndex];
            result = (objA[propertyName] < objB[propertyName]) ? -1 : (objA[propertyName] > objB[propertyName]) ? 1 : 0;
            result *= sortArguments[argIndex + 1] ? 1 : -1;
        }
        return result;
    });
}

   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table>
<tbody>
	<tr>
		<th>Section #</th>
		<th>Group #</th>
		<th>Averages</th>
		<th>Place</th>
	</tr>
	
	<tr>
		<td class="class_section_number">1</td>
		<td class="group_number">2</td>
		<td class="grade">78.29</td>
		<td>Test Place 1st</td>
	</tr>
	<tr>
		<td class="class_section_number">1</td>
		<td class="group_number">2</td>
		<td class="grade">85.52</td>
		<td>Test Place 1st</td>
	</tr>
	<tr>
		<td class="class_section_number">1</td>
		<td class="group_number">1</td>
		<td class="grade">74.41</td>
		<td>Test Place 2nd</td>
	</tr>
	<tr>
		<td class="class_section_number">1</td>
		<td class="group_number">2</td>
		<td>No Data</td>
		<td>Test Place 3rd</td>
	</tr>
		<tr><td class="class_section_number">2</td>
		<td class="group_number">1</td>
		<td class="grade">78.90</td>
		<td>Test Place 2nd</td>
	</tr>
</tr>
		<tr><td class="class_section_number">1</td>
		<td class="group_number">3</td>
		<td class="grade">91.03</td>
		<td>Test Place 2nd</td>
	</tr>
</tr>
		<tr><td class="class_section_number">2</td>
		<td class="group_number">2</td>
		<td class="grade">81.69</td>
		<td>Test Place 2nd</td>
	</tr>
	<tr>
		<td class="class_section_number">2</td>
		<td class="group_number">2</td>
		<td class="grade">81.13</td>
		<td>Test Place 1st</td>
	</tr>
	<tr>
		<td class="class_section_number">2</td>
		<td class="group_number">2</td>
		<td class="grade">78.13</td>
		<td>Test Place 1st</td>
	</tr>		
</tbody>
</table>

标签: javascriptjqueryhtml

解决方案


推荐阅读