与jquery匹配的数据

时间:2015-07-21 18:30:58

标签: jquery

我有一些值可以在数据表中查找和匹配。 http://jsfiddle.net/hhkd4ygu/ 如您所见,有3个值,如果在数据表的给定ROW中总共存在3个值的任何组,则应突出显示下一行(当前);绿色为现在,红色为不存在。

注意:任何行上应该存在3个值,这些值可能不在相邻的单元格中。

我一直在尝试在excel上解决这个问题,并在我从VBA论坛获得的代码的帮助下完成了它。但我意识到使用大型数据集运行vba代码非常慢,几乎冻结了我的计算机。

所以我创建了一个简单的表来举例说明我一直在做的事情。

.table.table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: center;
	
} 
.table td {
	padding: 4px;
	margin: 3px;
	border: 1px solid #ccc;
	width: 40px;
}
.table th {
	background-color: #E99D79; 
	color: #FFF;
	font-weight: bold;
}

.yes {
background: green;
}

.no {
background: red;
}
 
<table class="table">
<tr class="firstrow">
<th colspan="3">Values to find</th>
<th>&nbsp;</th><th> Presence</th>
<th>&nbsp;</th>
<th colspan="4">Data table</th></tr>

 <tr><td>1</td><td>12</td><td>13</td><td>&nbsp;</td><td class="yes"> </td><td>&nbsp;</td><td>f</td><td>g</td><td>d</td><td>2</td></tr>
 <tr><td>4</td><td>5</td><td>6</td><td>&nbsp;</td><td class="yes">&nbsp;</td><td>&nbsp;</td><td>1</td><td>12</td><td>g</td><td>13</td></tr>
 <tr><td>a</td><td>b </td><td>c</td><td>&nbsp;</td><td class="yes">&nbsp;</td><td>&nbsp;</td><td>a</td><td>b</td><td>c</td><td>6</td></tr>
 <tr><td>d</td><td>e</td><td>f</td><td>&nbsp;</td><td class="no">&nbsp;</td><td>&nbsp;</td><td>4</td><td>2</td><td>5</td><td>6</td></tr>
 <tr><td>3</td><td>10</td><td>b</td><td>&nbsp;</td><td class="no">&nbsp;</td><td>&nbsp;</td><td>3</td><td>10</td><td>f</td><td>k</td></tr>
 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>
 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td></td></tr>
</table>

-------------------在下面提供的答案后编辑---

为了将来参考,对于此类工作,除此之外,您可能需要检查excel + VBA解决方案(这很慢)=&gt; Matching multiple cell values on a table, 而对于excel only solution =&gt; Matching three values (three cells) on a table(请参阅我的上一条评论)。

1 个答案:

答案 0 :(得分:1)

看看以下解决方案:

http://jsfiddle.net/hhkd4ygu/3/

在您给出的示例中,它的行为就像 a,b,c 一样。 但是,考虑到你的“不相邻”标准:

  • 如果您发现不相邻时只需要三元组,则下面的代码很好
  • 如果您不关心找到的三元组是否相邻,只需删除匹配函数的return语句中的&& (max-min >= 3)部分。

代码:

var trs = $('table').find('tr')

var gethtml = function () {
        return $(this).html()
    }
var rows = [];
trs.each(function () {
    var values = $(this).find('td').slice(6).map(gethtml).get();
    rows.push(values);
});

var match = function(row) {
    var ids = this.map(function(v){
        return row.indexOf(v);
    })
    var min = Math.min.apply(null,ids);
    var max = Math.max.apply(null,ids);
    return (min > -1) && (max-min >= 3);
}

trs.each(function () {
    var tds = $(this).find('td').slice(0,3);
    var values = $(this).find('td').slice(0,3).map(gethtml).get();

    var output = $(this).find('td').eq(4);
    var isMatch = rows.some(match.bind(values));
    output.addClass(isMatch ? 'yes' : 'no');
});

如果你愿意,我可以评论它是如何工作的。