选择具有最高值/秒和第二高值/秒的表单元格
Select table cells with highest value/s and second highest value/s
>我有下表,需要查找
- 一个或多个TD,其类为"总和",具有最高值(数字)
- 一个或多个TD,其类别为"sum",具有第二高值(数字)
- 将类"文本粗体"添加到匹配的 TD 中
JSFiddle
法典
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.text-bold { font-weight: 700; }
table {
margin: 16px 0;
color:#333;
border-width: 1px;
border-color: #666;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666;
background-color: #FBDD9B;
}
table td {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666;
background-color: #fff;
}
</style>
</head>
<body>
<table id="table-results">
<tr>
<th>Question</th>
<th>inovation</th>
<th>all-round</th>
<th>coordination</th>
<th>keeper</th>
<th>analytic</th>
</tr>
<tr>
<td>I.</td>
<td>D=2</td>
<td>A=1</td>
<td>E=10</td>
<td>C=8</td>
<td>B=4</td>
</tr>
<tr>
<td>II.</td>
<td>A=6</td>
<td>C=1</td>
<td>B=2</td>
<td>D=5</td>
<td>E=1</td>
</tr>
<tr>
<td>III.</td>
<td>E=4</td>
<td>B=1</td>
<td>D=3</td>
<td>A=2</td>
<td>C=7</td>
</tr>
<tr>
<td>Suma</td>
<td class="sum">12</td>
<td class="sum">3</td>
<td class="sum">15</td>
<td class="sum">15</td>
<td class="sum">12</td>
</tr>
</table>
</body>
</html>
在上面的示例中,结果应如下所示
苏玛 12 3 15 1512
其他可能的结果
苏玛 0 0 0 10 0
苏玛 12 3 15 7 9
苏玛 1 3 15 1512
苏玛 12 3 15 9 12
苏玛 4 4 4 44
它实际上有点复杂,你必须从.sum
元素中获取一个带有数字的数组,然后找到最高的数字,然后从数组中删除所有这些数字,然后找到下一个最高的数字,最后定位包含这两个数字的所有元素。
在代码中,这看起来像
var sum = $('.sum');
var arr = sum.map(function(_,x) { return +$(x).text() }).get();
var max = Math.max.apply( Math, arr );
var out = arr.filter(function(x) { return x != max });
var nxt = Math.max.apply( Math, out );
sum.filter(function() {
var numb = +$(this).text();
return numb == max || numb == nxt;
}).css('font-weight', 'bold');
小提琴
好的,
这需要我一段时间。使用以下代码查找最大数量有点容易:
//declare a variable for max taking the value of first td
var max = $("#table-results tr:last td:eq(1)").text();
//iterate through the last row of the table
$("#table-results tr:last td").each(function () {
//get the value of each td
var tdVal = ~~this.innerHTML;
//compare the value with max value
if (tdVal > max) {
//change the font-weight when is max
$(this).css("font-weight", "bold");
}
});
但是找到第二个最大值的棘手部分。我使用了这个问题堆栈@Jack答案中的代码,最终得出了以下结果:
//declare a variable for max taking the value of first td
var max = $("#table-results tr:last td:eq(1)").text();
var arr = [];
//iterate through the last row of the table and keep the values in an array
$("#table-results tr:last td").each(function() {
arr.push(~~this.innerHTML);
});
//get the second max from the array
var secMax = secondMax(arr);
//iterate through the last row of the table
$("#table-results tr:last td").each(function() {
//get the value of each td
var tdVal = ~~this.innerHTML;
//compare the value with max value
if (tdVal > max) {
//change the font-weight when is max
$(this).css("font-weight", "bold");
}
//comapre the second max value with the current one
if (tdVal == secMax) {
$(this).css("font-weight", "bold");
}
});
function secondMax(arr) {
///with this function i find the second max value of the array
biggest = -Infinity,
next_biggest = -Infinity;
for (var i = 0, n = arr.length; i < n; ++i) {
var nr = +arr[i]; // convert to number first
if (nr > biggest) {
next_biggest = biggest; // save previous biggest value
biggest = nr;
} else if (nr < biggest && nr > next_biggest) {
next_biggest = nr; // new second biggest value
}
}
return next_biggest;
}
.text-bold {
text-weight: 700;
}
table {
margin: 16px 0;
color: #333;
border-width: 1px;
border-color: #666;
border-collapse: collapse;
}
table th {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666;
background-color: #FBDD9B;
}
table td {
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: #666;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-results">
<tr>
<th>Question</th>
<th>inovation</th>
<th>all-round</th>
<th>coordination</th>
<th>keeper</th>
<th>analytic</th>
</tr>
<tr>
<td>I.</td>
<td>D=2</td>
<td>A=1</td>
<td>E=10</td>
<td>C=8</td>
<td>B=4</td>
</tr>
<tr>
<td>II.</td>
<td>A=6</td>
<td>C=1</td>
<td>B=2</td>
<td>D=5</td>
<td>E=1</td>
</tr>
<tr>
<td>III.</td>
<td>E=4</td>
<td>B=1</td>
<td>D=3</td>
<td>A=2</td>
<td>C=7</td>
</tr>
<tr>
<td>Suma</td>
<td class="sum">12</td>
<td class="sum">3</td>
<td class="sum">15</td>
<td class="sum">15</td>
<td class="sum">12</td>
</tr>
</table>
我整理了以下jQuery函数来解决您的问题。它遍历值,确定最大值和第二大值,然后将"文本粗体"类应用于表中的相关单元格 JSFiddle 演示
$(function(){
//set initial values
var largest = 0;
var second = 0;
//fetch the td elements with sum class
var $sums = $('td.sum');
//iterate through to find the values that represent largest and second
$sums.each(function(){
//set value of cell to variable for comparison (parsed to ensure it is a number)
var value = parseInt($(this).text());
if(largest == 0) { largest = value; }
else if(value > largest) {
second = largest;
largest = value;
}
else if(value == largest) { } //this prevents second from being overwritten by a duplicate largest value
else if(value > second) {
second = value;
}
else { }
});
//iterate through again bolding the largest and second largest values
//had to use this method because values can exist more than once
$sums.each(function(){
if($(this).text() == largest || $(this).text() == second) {
$(this).addClass("text-bold");
}
});
});
您还需要对 CSS 进行轻微调整。 .text-bold
类应该font-weight
未分配text-weight
。
.text-bold {
font-weight: 700;
}
相关文章:
- 使用jquery在单击时在单元格中输入值
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 需要将单元格值复制到html表中的其他单元格中
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- jQuery如何获取td单元格值
- 获取关联单元格onchange的值
- 如何修改或类似@model.count的内容,根据单元格值计算行数
- 如何在单击单元格中的链接值时动态更改表行背景色
- 无法使用document.getElementById获取动态生成的单元格的值
- 使用下拉选择菜单高亮显示一行表格单元格
- Extjs 4网格:根据存储文本值在单元格中放置图标
- 如何使用javascript从动态表中获取特定的单元格值
- 单击并用CTRL+C复制值时高亮显示html表格单元格
- 选择具有最高值/秒和第二高值/秒的表单元格
- 使用rowspan将重复值单元格合并为具有相同空间的单个单元格
- ExtJS EditorGridPanel ~设置行高和单元格宽度以显示所有单元格内容