Javascript 根据表格内容设置表格样式
我有下表: 我正在努力:Javascript 根据表格内容设置表格样式,javascript,jquery,Javascript,Jquery,我有下表: 我正在努力: 在具有相同ID的所有行上获取相同的样式 突出显示具有相同ID的行中每个行的差异 但现在我似乎无法理解步骤1)所需的逻辑。使用jQuery没关系,我只是发现使用普通js更容易 此外,我在代码的这一部分得到了警告: table.rows[i+1].cells[0].innerHTML 像这样 var newColor = "#F1D0F2"; var diffColor = "#CECECE"; $('#tbl tr:gt(0)').each(function () {
table.rows[i+1].cells[0].innerHTML
像这样
var newColor = "#F1D0F2";
var diffColor = "#CECECE";
$('#tbl tr:gt(0)').each(function () { //Loop through the trs leaving out the header
var txt = $(this).find('td:eq(0)').text(); //get the text of the id column
var $this = $(this);
var matchingRows = $('#tbl tr').not(this).filter(function () { //get the matching rows whose id colum value is same
return $(this).find('td:eq(0)').text() == txt;
}).css('background-color', newColor); //apply css for match
matchingRows.find('td').css('background-color', function (i) { //apply background color
if ($this.find('td:eq(' + i + ')').text() != this.innerHTML) return diffColor; // to the tds of matching rows but column valud differ.
});
});
参考资料:
var allColors = ["#333333","#990099", "#1295A6", "#FFFF99"]; //Set up the colors in to an array
var diffColor = "#CECECE";
$('#tbl tr:gt(0)').each(function () {
var txt = $(this).find('td:eq(0)').text();
var $this = $(this);
if($this.is('.transformed')) //check for class transformed is present if so this has already been processed skip it.
return;
//Get the matching rows whose id column value is same
var matchingRows = $('#tbl tr').filter(function () {
return $(this).find('td:eq(0)').text() == txt;
}).css('background-color', allColors.shift()).addClass('transformed'); //Set the color and add a class to avoid latter processing
matchingRows.find('td').css('background-color', function (i) { //apply background color
var $parTd = $this.find('td:eq(' + $(this).index() + ')');
if ($.trim($parTd.text()) != $.trim(this.innerHTML)) // to the tds of matching rows but column value differ.
{
$parTd.css('background-color', diffColor);
return diffColor;
}
});
});
对于第一步:
有几种方法可以做到这一点,我可能会将一个类附加到特定类型的所有表格单元格,以便您可以轻松地一次选择所有单元格进行编辑
<table>
<tr>
<td class="id-cell"></td>
</tr>
</table>
但您也可以使用更多的jQuery/JavaScript来查找您正在查找的表单元格。这个fiddle使用jQuery查找“id”列中的所有单元格,并将背景涂成红色
另一种方法:
$("table tr:not(:first-child) td:first-child").each(function(index) {
var thisId = $(this);
$("table tr:not(:first-child) td:first-child").each(function(_index) {
if (index != _index && thisId.text() == $(this).text())
{
thisId.parent("tr").css("backgroundColor", "red");
$(this).css("backgroundColor", "red");
$(this).siblings("td").each(function(sindex) {
var other = $(thisId.siblings()[sindex]);
if (other.text() != $(this).text())
other.css("backgroundColor", "yellow");
});
}
});
});
我在JSFIDLE中对表做了一点修改:这段代码不应该使ID3145和1042行来自不同的背景吗?我可能没有解释清楚,但具有相同id的行具有相同的背景,但同时与组中彼此共享相同id的其他行组的背景不同。@Cornwell好的,您在问题中没有提到这一点。你想买这样的东西吗?非常感谢。抱歉说不清楚。这正是我想做的。只是一个问题:如果我添加更多行,它应该可以工作,对吗?因为在这里,它们在没有背景的情况下显示:@Cornwell可以通过数组本身实现。只需使用shift移除顶部,并将该值推到末尾,以便循环重复。用这个来测试,我还没有测试。另外,如果您的原始问题至少得到了回答,请记住标记为答案。:)@康威尔,不客气。我希望最新的一期能够回答您的问题。:)
$("table tr:not(:first-child) td:first-child").each(function(index) {
var thisId = $(this);
$("table tr:not(:first-child) td:first-child").each(function(_index) {
if (index != _index && thisId.text() == $(this).text())
{
thisId.parent("tr").css("backgroundColor", "red");
$(this).css("backgroundColor", "red");
$(this).siblings("td").each(function(sindex) {
var other = $(thisId.siblings()[sindex]);
if (other.text() != $(this).text())
other.css("backgroundColor", "yellow");
});
}
});
});