我需要比较 html 表的行中的数据答案

【问题标题】：I need to compare the data in rows of a html table我需要比较 html 表的行中的数据
【发布时间】：2013-07-19 23:10:52
【问题描述】：

我正在使用 javascript 循环来创建一个由数字组成的表格。该代码当前可以很好地创建表格，并且我已经为其添加了一些样式。我遇到的问题是找到一种方法来比较单元格列中的数据，以突出显示该列中该组中表现最好和最差的。

这是我正在使用的 javascript 函数。

function performanceMetricsLoad() {
var records = storePerformanceMetricsData.getRecordsValues();
var groupTracker = null;
var assetTracker = null;
var htmlStr;
htmlStr = "<table class='TableStyles'><thead class='HeaderStyles'><tr><th width='400'>Name</th><th width='110'>1 month Cumulative Performance to "
            + records[0].DatetimeRecorded.format("F j, Y") + "</th><th width='110'>3 month Cumulative Performance to "
            + records[0].DatetimeRecorded.format("F j, Y") + "</th><th width='110'>6 month Cumulative Performance to "
            + records[0].DatetimeRecorded.format("F j, Y") + "</th><th width='110'>12 month Cumulative Performance to " 
            + records[0].DatetimeRecorded.format("F j, Y") + "</th></tr></thead><tbody>";

for (var i = 0; i < records.length; i++) {

    if (groupTracker != records[i].ClassOption) {
        htmlStr += "<tr>" + "<td class='GroupStyleCSS' colspan='5'>" 
        + records[i].Diversification + "</td></tr>";
        groupTracker = records[i].ClassOption;
    }

    if (groupTracker == records[i].ClassOption) {
        htmlStr += "<tr>" + "<td class='RecordCssStyle'>" + records[i].AssetLongName
        + "</td>"+ "<td class='RecDiv'>" + records[i].TotalReturn1m.toFixed(2)
        + "</td>" + "<td class='RecDiv'>" + records[i].TotalReturn3m.toFixed(2)
        + "</td>" + "<td class='RecDiv'>" + records[i].TotalReturn6m.toFixed(2) 
        + "</td>" + "<td class='RecDiv'>" + records[i].TotalReturn12m.toFixed(2) + "</tr>"; 
        assetTracker = records[i].AssetLongName;
    }
}

htmlStr += "</tbody></table>";
createRow("", htmlStr);
frmMetrics.doLayout();

}

function createRow(cls, text) {
frmMetrics.add(new Ext.BoxComponent({
    cls: cls,
    html: "<div>" + text + "</div>"
}));

}

信息被输出到一个EXT formPanel。

我现在遇到的问题是它输出了我需要的信息，以便找到一种方法来突出显示列中、分组中表现最好和最差的人...

该表在基金名称的顶部输出 5 列，在基金名称的左侧输出最多 10 个组，这些组按其“多元化”分组，具体取决于使用 SQL 查询请求的信息。

有没有人知道我可以用这段代码的当前状态来做到这一点？我正在考虑使用另一个外部函数，可能还有一些 if 语句选择不同的 css 类......任何帮助将不胜感激。非常感谢。

抱歉没有截图，我尝试了一些，但显然我需要 10 的声誉分数才能做到，或者类似的东西......

【问题讨论】：

不是编程101找最大和最小的数吗？好吧，您可以为最大和最小创建一个变量，并在创建每一行时，将值与最大和最小进行比较。如果它大于最大变量，则更改最大变量并与最小变量相同。
绝对不要使用 DOM 进行数据存储。它真的很慢。在添加行并将额外的 CSS 类添加到需要它的行时，使用 JavaScript 变量在 JavaScript 中进行所有比较。
如果您已经在使用 Ext，我想您至少对 Ext 的“外观”感到满意。那么，为什么不放弃原始表而使用 Ext.grid.Panel 呢？您可以让它使用代表您的性能指标数据结构的存储。然后，您可以使用 Ext 框架功能（例如，在列渲染器功能中）进行格式化。
我被明确告知这个功能不能使用 EXT 网格面板，如果不是这样的话，它会是我的首选。

标签： javascript html css extjs html-table

【解决方案1】：

将这两行添加到函数的顶部

var largest;
var smallest;

然后在你的循环中，添加：

if(value > largest){
    largest = value;
}
if(value < smallest){
    smallest = value;
}

如果您想为具有这些值的单元格添加样式，请添加一行以存储这些值的索引（以相同方式更新）并使用 css 为 ID 设置 or 和 select。

【讨论】：