有一個表格將根據所選的下拉元素進行填充。這是代碼（我沒有插入帶有下拉元素的行）：<table id="myPlaneTable" class="table table-bordered"> <tr> <td style="width: 20%">Max speed</td> <td style="width: 15%">450</td> <td style="width: 15%">487</td> <td style="width: 15%">450</td> <td style="width: 15%">600</td> </tr> <tr> <td style="width: 20%">Max speed</td> <td style="width: 15%">580</td> <td style="width: 15%">490</td> <td style="width: 15%">543</td> <td style="width: 15%">742</td> </tr></table這是它的樣子由于我剛開始學習jQuery，我嘗試了以下代碼，但它不起作用$("#myPlaneTable tbody tr.data-in-table").each(function () { $(this).find('td').each(function (index) { var currentCell = $(this); var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null; if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) { currentCell.css('backgroundColor', 'red'); nextCell.css('backgroundColor', 'green'); } });});我想要得到的結果突出顯示是否僅顯示最佳值和最差值（而不是介于兩者之間）如果多個單元格中的數據匹配，則也需要突出顯示它們如果沒有數據，單元格應該不突出顯示數據應該在一行內進行比較<tr>，因為會有多行
2 回答
有只小跳蛙
TA貢獻1824條經驗 獲得超8個贊
您可以將每行的所有值存儲在一個數組中。然后，存儲最小值和最大值，最后如果值匹配，
則為每個值應用顏色。<td>
$("#myPlaneTable tbody tr").each(function () {
var values = [];
var tds = $(this).find('td');
tds.each(function () {
if ($.isNumeric($(this).text())) {
values.push($(this).text());
}
});
var min = Math.min.apply(Math, values);
var max = Math.max.apply(Math, values);
tds.each(function () {
if ($(this).text() == min) {
$(this).css('backgroundColor', 'red');
}
if ($(this).text() == max) {
$(this).css('backgroundColor', 'green');
}
});
});
一只名叫tom的貓
TA貢獻1906條經驗 獲得超3個贊
您必須循環(huán)遍歷所有表行和表單元格，將它們放在一個數組中，然后比較數字的最低值和最高值。
我將為您提供 2 個樣式解決方案，第一個（更好的選擇）通過單獨的 css 文件樣式，第二個通過內聯(lián) jQuery 樣式。
這是一個如何解決它的工作示例： https ://jsfiddle.net/efmkr08t/1/
$('#myPlaneTable').find('tr').not(':first').each(function(index, tr) {
var cols = [];
$(tr).find('td').not(':first').each(function(index, td) {
if ($(td).text() === '') {
return;
}
cols[index] = Number($(td).text());
});
var max = Math.max.apply(null, cols);
var min = Math.min.apply(null, cols);
$(tr).find('td').not(':first').each(function(index, td) {
if (Number($(td).text()) === min) {
// the way you should use it (styling is via css)
$(td).addClass('min')
// inline css
// $(td).css('background', 'red');
}
if (Number($(td).text()) === max) {
// the way you should use it (styling is via css)
$(td).addClass('max')
// inline css
// $(td).css('background', 'green');
}
});
});
- 2 回答
- 0 關注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消