HTML 表的条件格式因列而异
conditional formatting for html table varies by column
我正在尝试修改我在这里找到的代码:
HTML 表格单元格的条件格式
我有两组不同的格式规则。最终表中将有 37 列。大多数将使用规则 1 进行格式化,大约 10 个将按照规则 2 进行格式化。
以下是我迄今为止的工作:
http://jsfiddle.net/8ed89exs/3/
这是代码:
.html
<table>
<thead>
<tr>
<th>Name</th>
<th>0.1</th>
<th>0.2</th>
<th>0.3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Allan, Paul</td>
<td>-9</td>
<td>-9</td>
<td>-9</td>
</tr>
<tr>
<td>Bartlett, James</td>
<td>-5</td>
<td>-5</td>
<td>-5</td>
</tr>
<tr>
<td>Callow, Simon</td>
<td>-2</td>
<td>-2</td>
<td>-2</td>
</tr>
<tr>
<td>Dennis, Mark</td>
<td>-1</td>
<td>-1</td>
<td>-1</td>
</tr>
<tr>
<td>Ennals, Simon</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>Finnegan, Seamus</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>Goldberg, John</td>
<td>9</td>
<td>9</td>
<td>9</td>
</tr>
</tbody>
.css
table {
width: 13em;
}
th {
border-bottom: 2px solid #ccc;
padding: 0.1em 0 0.0em 0;
font-size: .9em;
}
td {
border-bottom: 0px solid #ccc;
padding: 0.1em 0 0.1em 0;
text-align: center;
}
.abovePlus {
background-color: #1b7837; color: #fff;
}
.above {
background-color: #7fbf7b; color: #000;
}
.high {
background-color: #d9f0d3; color: #000;
}
.at {
background-color: #ffffff; color: #000;
}
.low {
background-color: #e7d4e8; color: #000;
}
.below {
background-color: #af8dc3; color: #000;
}
.belowPlus {
background-color: #762a83; color: #fff;
}
.js
$(function() {
$( "td" ).each(function(index) {
var scale = [['abovePlus', 20, 20], ['above', 5, 6], ['high', 2, 1], ['at', 0, 0], ['low', -1, -2], ['below', -2, -4], ['belowPlus', -9, -9]];
var score = $(this).text();
var column = [[0, 1], [1, 1], [2, 2], [3, 1]];
for (var i = 0; i < scale.length; i++)
{
if (score <= scale[i][1]) {
$(this).addClass(scale[i][0]);
}
}
});
});
如上所示,所有列都按规则 1 设置格式。如果我更改:
if (score <= scale[i][1]) {
自
if (score <= scale[i][2]) {
所有列都将按规则 2 设置格式。
我需要能够让一些列按规则 1 格式化,其他列按规则 2 格式化。列数组将定义哪些列将由哪些规则格式化(在最终产品中将有 37 列)。
我正在尝试使用变量执行此操作:
var x = column[i][1];
然后更改
if (score <= scale[i][1]) {
自
if (score <= scale[i][x]) {
但是当我放置
var x = column[i][1];
进入循环块,代码无法格式化。
我对 js 的经验有限,所以我想知道我是否犯了语法错误。
我试图开始工作的代码是:
$(function() {
$( "td" ).each(function(index) {
var scale = [['abovePlus', 20, 20], ['above', 5, 6], ['high', 2, 1], ['at', 0, 0], ['low', -1, -2], ['below', -2, -4], ['belowPlus', -9, -9]];
var score = $(this).text();
var column = [[0, 1], [1, 1], [2, 2], [3, 1]];
for (var i = 0; i < scale.length; i++)
{
var x = column[i][1];
if (score <= scale[i][x]) {
$(this).addClass(scale[i][0]);
}
}
});
});
感谢您的任何帮助。
如果我理解这个问题,也许这会有所帮助
//it is easier to handle with json array
var scale = [{'class': 'abovePlus', 'r1': 20, 'r2': 20},
{'class': 'above', 'r1': 5, 'r2': 6},
{'class': 'high', 'r1': 2, 'r2': 1},
{'class': 'at', 'r1': 0, 'r2': 0},
{'class': 'low', 'r1': -1, 'r2': -2},
{'class': 'below', 'r1': -2, 'r2': -4},
{'class': 'belowPlus', 'r1': -9, 'r2': -9}];
//three columns with data. skipping first
var column = [
[0, 1],
[1, 1],
[2, 2]
];
$(function () {
//finds each row
$("tr").each(function () {
//in row find each cell (td), but not the first
$(this).find('td').not(':first').each(function (index) {
var $td = $(this);
//get score
var score = $(this).text();
//moves through a variable
$.each(scale, function (i, scl) {
//get class, and value 1 i 2
var newClass = scl.class;
var r1 = scl.r1;
var r2 = scl.r2;
//get rul for column
var rule = column[index][1];
//based on the rules and values, add class to cell (td)
if (rule == 1 && score < r1) $td.addClass(newClass);
if (rule == 2 && score < r2) $td.addClass(newClass);
})
});
})
});
测试
相关文章:
- Google Sheets自定义函数条件格式
- D3.js轴刻度条件格式
- Google Apps 脚本,用于根据一个单元格的值对另一个单元格进行条件颜色格式设置
- 带rhandontable的数字和条件格式
- 如何在不强制的情况下添加条件文本?[101,pdf格式]
- 在ng repeat中按条件设置格式/样式
- 当数据超过 5k 时,为动手提供条件格式的最佳方法
- HTML 表的条件格式因列而异
- 获取条件json格式的表单数据
- moment.js中有条件格式吗
- json格式的jison启动条件
- Jquery UI对话框条件格式
- 条件格式数据表DT R
- Jquery if条件,如果字符串格式不正确,将调用Alert
- 只上传具有特定格式的文件的条件
- Jqgrid条件格式
- 使用google脚本操作数据条件格式和数据验证
- HandsonTable条件格式
- Javascript中的HTML表条件格式代码没有按计划工作
- jQuery连接格式(字符串和条件语句)