使用JQuery在表列中查找重复和检查值范围
我有一张桌子，其中有两列。 Min Range和Max Range。我需要在这两列中找到重复项。并且这两列中定义的值也形成一个范围。此范围不应与任何行重叠。这是图形表示
由于row 1有min range 70和max range 75。因此，70和75不应出现在其他行的其他列（最小范围和最大范围）中。此外，没有其他行可以定义70到75之间的值，例如Min Range 71和Max Range 74。因为它位于70和75之间。我试着写一个逻辑，但我坚持在图片中显示的情况。由于4th row(Test)和5th row(Test 2)具有有效范围，但我如何检查这是否有效。 6th row(Test 3)无效，因为其范围与第一行重叠。
这是我试过的：
var contents = {};
var errorMessageArray = [];
$table.find("tbody tr").each(function(index, element) {
var $row = $(this);
var rowId = $row.attr('id');
var minRange = -1
var maxRange = -1;
var $secondColumn = $row.find('td:eq(1)');
var $thirdColumn = $row.find('td:eq(2)');
if(rowId.indexOf('inputRow') >= 0){
minRange = parseInt($secondColumn.find('input').val());
maxRange = parseInt($thirdColumn.find('input').val());
} else {
minRange = parseInt($secondColumn.html());
maxRange = parseInt($thirdColumn.html());
}
var range = minRange + maxRange;
var rowIndex = index + 1;
if (minRange < 0) {
var errorMessage = "In Row "+ rowIndex + " Min Range can not be less than 0";
errorMessageArray.push(errorMessage);
}
if (maxRange > 100) {
var errorMessage = "In Row "+ rowIndex + " Max Range can not be greater than 100";
errorMessageArray.push(errorMessage);
}
if (minRange > maxRange) {
var errorMessage = "In Row "+ rowIndex + " Min Range can not be greater than Max Range";
errorMessageArray.push(errorMessage);
}
if (contents['minRange'] && contents['minRange']== minRange) {
var errorMessage = "Min Range used in Row "+ rowIndex + " is already used.";
errorMessageArray.push(errorMessage);
} else {
contents['minRange'] = minRange
}
if (contents['maxRange'] && contents['maxRange']== maxRange) {
var errorMessage = "Max Range used in Row "+ rowIndex + " is already used.";
errorMessageArray.push(errorMessage);
} else {
contents['maxRange'] = maxRange
}
if (contents['range'] && (contents['range']== range || range < contents['range'] )) {
var errorMessage = "Range used in Row "+ rowIndex + " is overlapping.";
errorMessageArray.push(errorMessage);
} else {
contents['range'] = range;
}
});
if (errorMessageArray.length > 0) {
}
我该如何解决？
这是HTML：
<table class="tableDemo bordered" id="scoreScalesTable">
<thead>
<tr style="display: table-row;">
<th>Ranking Scale</th>
<th>Min Range</th>
<th>Max Range</th>
<th>Icon</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="scoreScalesTable-3">
<td class="Ranking Scale" id="scoreScalesTable-3-Ranking Scale">Cold</td>
<td class="Min Range" id="scoreScalesTable-3-Min Range">70</td>
<td class="Max Range" id="scoreScalesTable-3-Max Range">75</td>
<td class="Icon" id="scoreScalesTable-3-Icon"><img alt="BlueStar.png" src="/images/BlueStar.png"></td>
<td><a class="scoreScalesTable-ajaxEdit" id="scoreScalesTable-3-Edit" href="javascript:;"><img alt="Edit" src="/common/scripts/dynamicTable/images/edit.png"></a><a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="/common/scripts/dynamicTable/images/remove.png"></a></td>
</tr>
<tr id="scoreScalesTable-2">
<td class="Ranking Scale" id="scoreScalesTable-2-Ranking Scale">Warm</td>
<td class="Min Range" id="scoreScalesTable-2-Min Range">76</td>
<td class="Max Range" id="scoreScalesTable-2-Max Range">90</td>
<td class="Icon" id="scoreScalesTable-2-Icon"><img alt="BlueStar.png" src="/images/BlueStar.png"></td><td><a class="scoreScalesTable-ajaxEdit" id="scoreScalesTable-2-Edit" href="javascript:;"><img alt="Edit" src="/common/scripts/dynamicTable/images/edit.png"></a><a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="/common/scripts/dynamicTable/images/remove.png"></a></td>
</tr>
<tr id="scoreScalesTable-1">
<td class="Ranking Scale" id="scoreScalesTable-1-Ranking Scale">Hot</td>
<td class="Min Range" id="scoreScalesTable-1-Min Range">91</td>
<td class="Max Range" id="scoreScalesTable-1-Max Range">100</td>
<td class="Icon" id="scoreScalesTable-1-Icon"><img alt="BlueStar.png" src="/images/BlueStar.png"></td>
<td><a class="scoreScalesTable-ajaxEdit" id="scoreScalesTable-1-Edit" href="javascript:;"><img alt="Edit" src="/common/scripts/dynamicTable/images/edit.png"></a><a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="/common/scripts/dynamicTable/images/remove.png"></a></td>
</tr>
<tr class="inputform" id="scoreScalesTable-inputRow0" style="display: table-row;">
<td class="ajaxReq"><input name="Ranking Scale" type="text" placeholder="Enter Ranking Scale" value=""></td>
<td class="ajaxReq"><input name="Min Range" type="text" placeholder="Enter Minimum Range" value=""></td>
<td class="ajaxReq"><input name="Max Range" type="text" placeholder="Enter Maximum Range" value=""></td>
<td class="ajaxReq"><div class="ddOutOfVision" id="msdrpdd20_msddHolder" style="height: 0px; overflow: hidden; position: absolute;"><select name="Icon" tabindex="-1" id="msdrpdd20"><option value="/images/BlueStar.png" data-image="/images/BlueStar.png">BlueStar.png</option><option value="/images/BlackStar.png" data-image="/images/BlackStar.png">BlackStar.png</option><option value="/images/RedStar.png" data-image="/images/RedStar.png">RedStar.png</option><option value="/images/YellowStar.png" data-image="/images/YellowStar.png">YellowStar.png</option><option value="/images/BrownStar.png" data-image="/images/BrownStar.png">BrownStar.png</option><option value="/images/OrangeStar.png" data-image="/images/OrangeStar.png">OrangeStar.png</option><option value="/images/GreenStar.png" data-image="/images/GreenStar.png">GreenStar.png</option><option value="/images/PurpleStar.png" data-image="/images/PurpleStar.png">PurpleStar.png</option><option value="/images/WhiteStar.png" data-image="/images/WhiteStar.png">WhiteStar.png</option><option value="/images/CyanStar.png" data-image="/images/CyanStar.png">CyanStar.png</option></select></div><div tabindex="0" class="dd ddcommon borderRadius" id="msdrpdd20_msdd" style="width: 170px;"><div class="ddTitle borderRadiusTp"><span class="divider"></span><span class="ddArrow arrowoff"></span><span class="ddTitleText " id="msdrpdd20_title"><img class="fnone" src="/images/BlackStar.png"><span class="ddlabel">BlackStar.png</span><span class="description" style="display: none;"></span></span></div><input class="text shadow borderRadius" id="msdrpdd20_titleText" style="display: none;" type="text" autocomplete="off"><div class="ddChild ddchild_ border shadow" id="msdrpdd20_child" style="top: 24px; height: 213px; display: none; visibility: visible; position: absolute; z-index: 1;"><ul><li class="enabled _msddli_"><img class="fnone" src="/images/BlueStar.png"><span class="ddlabel">BlueStar.png</span><div class="clear"></div></li><li class="enabled _msddli_ selected"><img class="fnone" src="/images/BlackStar.png"><span class="ddlabel">BlackStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/RedStar.png"><span class="ddlabel">RedStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/YellowStar.png"><span class="ddlabel">YellowStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/BrownStar.png"><span class="ddlabel">BrownStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/OrangeStar.png"><span class="ddlabel">OrangeStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/GreenStar.png"><span class="ddlabel">GreenStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/PurpleStar.png"><span class="ddlabel">PurpleStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/WhiteStar.png"><span class="ddlabel">WhiteStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/CyanStar.png"><span class="ddlabel">CyanStar.png</span><div class="clear"></div></li></ul></div></div></td>
<td><a class="scoreScalesTable-addRow" href="javascript:;"><img alt="Add Row" src="/common/scripts/dynamicTable/images/addRow.png"></a><a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="/common/scripts/dynamicTable/images/remove.png"></a></td>
</tr>
<tr class="inputform" id="scoreScalesTable-inputRow1">
<td class="ajaxReq"><input name="Ranking Scale" type="text" placeholder="Enter Ranking Scale" value=""></td>
<td class="ajaxReq"><input name="Min Range" type="text" placeholder="Enter Minimum Range" value=""></td>
<td class="ajaxReq"><input name="Max Range" type="text" placeholder="Enter Maximum Range" value=""></td>
<td class="ajaxReq"><div class="ddOutOfVision" id="msdrpdd22_msddHolder" style="height: 0px; overflow: hidden; position: absolute;"><select name="Icon" tabindex="-1" id="msdrpdd22"><option value="/images/BlueStar.png" data-image="/images/BlueStar.png">BlueStar.png</option><option value="/images/BlackStar.png" data-image="/images/BlackStar.png">BlackStar.png</option><option value="/images/RedStar.png" data-image="/images/RedStar.png">RedStar.png</option><option value="/images/YellowStar.png" data-image="/images/YellowStar.png">YellowStar.png</option><option value="/images/BrownStar.png" data-image="/images/BrownStar.png">BrownStar.png</option><option value="/images/OrangeStar.png" data-image="/images/OrangeStar.png">OrangeStar.png</option><option value="/images/GreenStar.png" data-image="/images/GreenStar.png">GreenStar.png</option><option value="/images/PurpleStar.png" data-image="/images/PurpleStar.png">PurpleStar.png</option><option value="/images/WhiteStar.png" data-image="/images/WhiteStar.png">WhiteStar.png</option><option value="/images/CyanStar.png" data-image="/images/CyanStar.png">CyanStar.png</option></select></div><div tabindex="0" class="dd ddcommon borderRadius" id="msdrpdd22_msdd" style="width: 170px;"><div class="ddTitle borderRadiusTp"><span class="divider"></span><span class="ddArrow arrowoff"></span><span class="ddTitleText " id="msdrpdd22_title"><img class="fnone" src="/images/BrownStar.png"><span class="ddlabel">BrownStar.png</span><span class="description" style="display: none;"></span></span></div><input class="text shadow borderRadius" id="msdrpdd22_titleText" style="display: none;" type="text" autocomplete="off"><div class="ddChild ddchild_ border shadow" id="msdrpdd22_child" style="top: -213px; height: 213px; display: none; visibility: visible; position: absolute; z-index: 1;"><ul><li class="enabled _msddli_"><img class="fnone" src="/images/BlueStar.png"><span class="ddlabel">BlueStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/BlackStar.png"><span class="ddlabel">BlackStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/RedStar.png"><span class="ddlabel">RedStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/YellowStar.png"><span class="ddlabel">YellowStar.png</span><div class="clear"></div></li><li class="enabled _msddli_ selected"><img class="fnone" src="/images/BrownStar.png"><span class="ddlabel">BrownStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/OrangeStar.png"><span class="ddlabel">OrangeStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/GreenStar.png"><span class="ddlabel">GreenStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/PurpleStar.png"><span class="ddlabel">PurpleStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/WhiteStar.png"><span class="ddlabel">WhiteStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/CyanStar.png"><span class="ddlabel">CyanStar.png</span><div class="clear"></div></li></ul></div></div></td>
<td><a class="scoreScalesTable-addRow" href="javascript:;"><img alt="Add Row" src="/common/scripts/dynamicTable/images/addRow.png"></a><a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="/common/scripts/dynamicTable/images/remove.png"></a></td>
</tr><
tr class="inputform" id="scoreScalesTable-inputRow2">
<td class="ajaxReq"><input name="Ranking Scale" type="text" placeholder="Enter Ranking Scale" value=""></td>
<td class="ajaxReq"><input name="Min Range" type="text" placeholder="Enter Minimum Range" value=""></td>
<td class="ajaxReq"><input name="Max Range" type="text" placeholder="Enter Maximum Range" value=""></td>
<td class="ajaxReq"><div class="ddOutOfVision" id="msdrpdd23_msddHolder" style="height: 0px; overflow: hidden; position: absolute;"><select name="Icon" tabindex="-1" id="msdrpdd23"><option value="/images/BlueStar.png" data-image="/images/BlueStar.png">BlueStar.png</option><option value="/images/BlackStar.png" data-image="/images/BlackStar.png">BlackStar.png</option><option value="/images/RedStar.png" data-image="/images/RedStar.png">RedStar.png</option><option value="/images/YellowStar.png" data-image="/images/YellowStar.png">YellowStar.png</option><option value="/images/BrownStar.png" data-image="/images/BrownStar.png">BrownStar.png</option><option value="/images/OrangeStar.png" data-image="/images/OrangeStar.png">OrangeStar.png</option><option value="/images/GreenStar.png" data-image="/images/GreenStar.png">GreenStar.png</option><option value="/images/PurpleStar.png" data-image="/images/PurpleStar.png">PurpleStar.png</option><option value="/images/WhiteStar.png" data-image="/images/WhiteStar.png">WhiteStar.png</option><option value="/images/CyanStar.png" data-image="/images/CyanStar.png">CyanStar.png</option></select></div><div tabindex="0" class="dd ddcommon borderRadius" id="msdrpdd23_msdd" style="width: 170px;"><div class="ddTitle borderRadiusTp"><span class="divider"></span><span class="ddArrow arrowoff"></span><span class="ddTitleText " id="msdrpdd23_title"><img class="fnone" src="/images/YellowStar.png"><span class="ddlabel">YellowStar.png</span><span class="description" style="display: none;"></span></span></div><input class="text shadow borderRadius" id="msdrpdd23_titleText" style="display: none;" type="text" autocomplete="off"><div class="ddChild ddchild_ border shadow" id="msdrpdd23_child" style="top: -213px; height: 213px; display: none; visibility: visible; position: absolute; z-index: 1;"><ul><li class="enabled _msddli_"><img class="fnone" src="/images/BlueStar.png"><span class="ddlabel">BlueStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/BlackStar.png"><span class="ddlabel">BlackStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/RedStar.png"><span class="ddlabel">RedStar.png</span><div class="clear"></div></li><li class="enabled _msddli_ selected"><img class="fnone" src="/images/YellowStar.png"><span class="ddlabel">YellowStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/BrownStar.png"><span class="ddlabel">BrownStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/OrangeStar.png"><span class="ddlabel">OrangeStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/GreenStar.png"><span class="ddlabel">GreenStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/PurpleStar.png"><span class="ddlabel">PurpleStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/WhiteStar.png"><span class="ddlabel">WhiteStar.png</span><div class="clear"></div></li><li class="enabled _msddli_"><img class="fnone" src="/images/CyanStar.png"><span class="ddlabel">CyanStar.png</span><div class="clear"></div></li></ul></div></div></td>
<td><a class="scoreScalesTable-addRow" href="javascript:;"><img alt="Add Row" src="/common/scripts/dynamicTable/images/addRow.png"></a><a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="/common/scripts/dynamicTable/images/remove.png"></a></td>
</tr>
</tbody>
2 个答案:
答案 0 :(得分：0)
我完全评论了代码，«Rubber Duck»风格 下面回答了一些问题。
随意问！
以下是代码...... CodePen链接位于其下 SO片段已删除（但仍应在编辑历史记录中访问），因为帖子字符限制为30 000个字符！ .oO（笑！）
console.clear();
var $table = $("#scoreScalesTable");
function check(){
console.clear();
// Remove all highlights
$table.find("tbody tr").removeClass("highlight");
var rangeArray = [];
var errorMessageArray = [];
// FIRST LOOP to get the data to work on... And catch the first errors.
$table.find("tbody tr").each(function(index, element) {
var $row = $(this);
var rowId = $row.attr('id');
//console.log($row.find("td").first().html());
var minRange = -1
var maxRange = -1;
var $secondColumn = $row.find('td:eq(1)');
var $thirdColumn = $row.find('td:eq(2)');
if(rowId.indexOf('inputRow') >= 0){
var secondVal = $secondColumn.find('input').val();
var thirdVal = $thirdColumn.find('input').val();
// If there's values.
if(secondVal != "" && thirdVal!= ""){
minRange = parseInt(secondVal);
maxRange = parseInt(thirdVal);
}
} else {
minRange = parseInt($secondColumn.html());
maxRange = parseInt($thirdColumn.html());
}
var range = maxRange - minRange; // Strangely was WAS minRange + maxRange (???) Doesn't seem to be used.
var rowIndex = index + 1;
// If there's values.
if(secondVal != "" && thirdVal!= ""){
var errorMessage = ""; // Declare it here
if (minRange < 0) {
errorMessage = "In Row "+ rowIndex + " Min Range can not be less than 0";
errorMessageArray.push(errorMessage);
$table.find("tbody tr").eq(index).addClass("range_highlight");
}
if (maxRange > 100) {
errorMessage = "In Row "+ rowIndex + " Max Range can not be greater than 100";
errorMessageArray.push(errorMessage);
$table.find("tbody tr").eq(index).addClass("range_highlight");
}
if (minRange > maxRange) {
errorMessage = "In Row "+ rowIndex + " Min Range can not be greater than Max Range";
errorMessageArray.push(errorMessage);
$table.find("tbody tr").eq(index).addClass("range_highlight");
}
// If no error
if(errorMessage==""){
var content = {
minRange: minRange,
maxRange: maxRange,
range: range
};
rangeArray.push(content);
}
}
}); // Stop that loop here.
console.log("Row taken in account:\n"+rangeArray.length);
// Second looping now to check overlappings, but withing the rangeArray
var errorIndexes_on = [];
var errorIndexes_because = [];
var errorTriggedOn = [];
for(i=0;i<rangeArray.length;i++){
var errorMessage;
//console.log("checking row #"+(i+1));
// Check this range angainst all other ranges
for(k=0;k<rangeArray.length;k++){
// Don't compare against self, skip that iteration.
if(k!=i){
// Always use the right indexes depending on when the trigger occured.
var eq;
(k>=i) ? eq = k : eq = i; // To keep the conflicting line, assuming the last is always in fault compared to previouses.
(k>=i) ? rowIndex = k + 1 : rowIndex = i + 1; // For error messages, same reason as above.
(k>=i) ? overlaped = i + 1 : overlaped = k + 1;
// if overlap based on min
if(rangeArray[i].minRange >= rangeArray[k].minRange && rangeArray[i].minRange <= rangeArray[k].maxRange){ // min i inside k
// hightlight the row and log the error
errorTriggedOn.push("min");
$table.find("tbody tr").eq(eq).addClass("range_highlight");
errorMessage = "Range in Row "+ rowIndex + " overlaps the range in row " + overlaped;
errorMessageArray.push(errorMessage);
errorIndexes_on.push(rowIndex);
errorIndexes_because.push(overlaped);
}
// if overlap based on max
else if(rangeArray[i].maxRange >= rangeArray[k].minRange && rangeArray[i].maxRange <= rangeArray[k].maxRange){ // man i inside k
// hightlight the row and log the error
errorTriggedOn.push("max");
$table.find("tbody tr").eq(eq).addClass("range_highlight");
errorMessage = "Range in Row "+ rowIndex + " overlaps the range in row " + overlaped;
errorMessageArray.push(errorMessage);
errorIndexes_on.push(rowIndex);
errorIndexes_because.push(overlaped);
}
}
}
}
// Console debuging results.
console.log( "rangeArray:\n" + JSON.stringify(rangeArray));
console.log( "errorMessageArray:\n" + JSON.stringify(errorMessageArray));
console.log( "errorIndexes_on:\n" + JSON.stringify(errorIndexes_on));
console.log( "errorIndexes_because:\n" + JSON.stringify(errorIndexes_because));
console.log( "errorTriggedOn:\n" + JSON.stringify(errorTriggedOn));
// Filter error message
errorMessageArray.sort();
for(i=0;i<errorMessageArray.length;i++){
if(errorMessageArray[i] == errorMessageArray[i-1]){
errorMessageArray.splice(i,1);
}
}
// Console debuging results after error messages filtering.
console.log("==================================================");
console.log( "FILTERED errorMessageArray:\n" + JSON.stringify(errorMessageArray));
//if (errorMessageArray.length > 0) { // Condition commented out... But can be used for additional action.
var errAmount = errorMessageArray.length;
var accord = " ERROR";
if (errorMessageArray.length > 1) {
accord = " ERRORS";
}
console.log(errAmount+ accord);
//}
} // check()
// Run check on load, if you wish.
// check();
// Check button click handler
$("#test").on("click", check);
// Ensure only digits in range inputs... Esle highlight the row.
$("[name*='Range']").on("input paste", function(){
// Remove all character highlights.
$("tr").removeClass("character_highlight");
var BADmatches = $(this).val().match(/\D/g)
//console.log( BADmatches.length );
if( BADmatches != null ){
$(this).closest("tr").addClass("character_highlight");
}
});
<小时/> 问题解答：
-
if(k!=i){..} - 两个条件
这是防止行与自身进行比较的条件
因此，在i中拥有第一行索引，我们不希望与k中的行＃1索引执行重叠比较...因为它总是会找到重叠！
如果i范围的终点是k范围的终点，那么这两个是检测i范围的起点是否在k范围 OR 之内在i范围内。如果至少有一个是真的，肯定会有重叠。
无需检查两者是否属实，我们知道存在重叠。
如果没有，我们认为现在没有重叠
但是说{1}中第1行的范围是10-90，k中的第3行范围是50-60。
在该迭代中未检测到重叠
当循环将测试i中的第3行与k中的第1行相比时，这种明显的重叠将是警告。所以就在循环的后期。 ;）
我们必须“等待”下一次迭代，原因有两个：1）不会触发错误两次，2）知道哪一行是前一行。
在循环找到前一行过度重叠之前，行被认为是“正确的”。这就是eq变量由(k>=i) ? eq = k : eq = i;设置的原因，以确保我们不会突出显示前一行，而是强调后一行。
答案 1 :(得分：-1)
要检查两个范围是否重叠，您只需要查看其中一个范围是否包含任何其他范围的端点。我这样做是通过查看端点是否超过其他minRange而不是其他maxRange。
我选择循环浏览每个$("tbody tr")并缓存每一行minRange和maxRange。然后，仍然在.each()内，我使用forEach检查当前行与所有之前的行（如果您非常担心，可以用for循环替换浏览器兼容性）：
rows.forEach(function(r) {
// First make sure all the endpoints are defined
if (minRange && r.minRange && maxRange && r.maxRange) {
// Check endpoints
if ((minRange > r.minRange && minRange < r.maxRange) ||
(maxRange > r.minRange && maxRange < r.maxRange) ||
(r.minRange > minRange && r.minRange < maxRange) ||
(r.minRange > minRange && r.minRange < maxRange)) {
errorMessage = "Range used in Row " + rowIndex + " is overlapping.";
errorMessageArray.push(errorMessage);
}
}
});
请注意，我必须检查两种方式：查看当前行是否在每个上一行中都有一个端点，并且查看给定的其他行是否在当前行中有一个端点。
为了提高效率，我还认为在同一forEach中检查匹配的端点是明智的。
这是我完成的代码。我删除了图片src，因此404错误不会显示在控制台中。单击“验证”按钮以运行检查。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
function validate() {
var errorMessageArray = [];
var rows = [];
var $table = $('table');
$table.find("tbody tr").each(function(index) {
var $row = $(this);
var rowId = $row.attr('id');
var $secondColumn = $row.find('td:eq(1)');
var $thirdColumn = $row.find('td:eq(2)');
var minRange;
var maxRange;
if (rowId.indexOf('inputRow') >= 0) {
minRange = parseInt($secondColumn.find('input').val());
maxRange = parseInt($thirdColumn.find('input').val());
} else {
minRange = parseInt($secondColumn.html());
maxRange = parseInt($thirdColumn.html());
}
var errorMessage;
var rowIndex = index + 1;
if (minRange < 0) {
errorMessage = "In Row " + rowIndex + " Min Range can not be less than 0";
errorMessageArray.push(errorMessage);
}
if (minRange > maxRange) {
errorMessage = "In Row " + rowIndex + " Min Range can not be greater than Max Range";
errorMessageArray.push(errorMessage);
}
if (maxRange > 100) {
errorMessage = "In Row " + rowIndex + " Max Range can not be greater than 100";
errorMessageArray.push(errorMessage);
}
rows.forEach(function(r) {
if (minRange && r.minRange && minRange === r.minRange) {
errorMessage = "Min Range used in Row " + rowIndex + " is already used.";
errorMessageArray.push(errorMessage);
}
if (maxRange && r.maxRange && maxRange === r.maxRange) {
errorMessage = "Max Range used in Row " + rowIndex + " is already used.";
errorMessageArray.push(errorMessage);
}
if (minRange && r.minRange && maxRange && r.maxRange) {
if ((minRange > r.minRange && minRange < r.maxRange) ||
(maxRange > r.minRange && maxRange < r.maxRange) ||
(r.minRange > minRange && r.minRange < maxRange) ||
(r.minRange > minRange && r.minRange < maxRange)) {
errorMessage = "Range used in Row " + rowIndex + " is overlapping.";
errorMessageArray.push(errorMessage);
}
}
});
rows.push({
id: rowId,
minRange: minRange,
maxRange: maxRange,
range: maxRange - minRange
});
});
if (errorMessageArray.length > 0) {
errorMessageArray.forEach(function (e) {
console.error(e);
});
}
return rows;
}
$('button').click(validate);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableDemo bordered" id="scoreScalesTable">
<thead>
<tr style="display: table-row;">
<th>Ranking Scale</th>
<th>Min Range</th>
<th>Max Range</th>
<th>Icon</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr id="scoreScalesTable-3">
<td class="Ranking Scale" id="scoreScalesTable-3-Ranking Scale">Cold</td>
<td class="Min Range" id="scoreScalesTable-3-Min Range">70</td>
<td class="Max Range" id="scoreScalesTable-3-Max Range">75</td>
<td class="Icon" id="scoreScalesTable-3-Icon"><img alt="BlueStar.png" src=""></td>
<td>
<a class="scoreScalesTable-ajaxEdit" id="scoreScalesTable-3-Edit" href="javascript:;"><img alt="Edit" src=""></a>
<a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src=""></a>
</td>
</tr>
<tr id="scoreScalesTable-2">
<td class="Ranking Scale" id="scoreScalesTable-2-Ranking Scale">Warm</td>
<td class="Min Range" id="scoreScalesTable-2-Min Range">76</td>
<td class="Max Range" id="scoreScalesTable-2-Max Range">90</td>
<td class="Icon" id="scoreScalesTable-2-Icon"><img alt="BlueStar.png" src=""></td>
<td>
<a class="scoreScalesTable-ajaxEdit" id="scoreScalesTable-2-Edit" href="javascript:;"><img alt="Edit" src=""></a>
<a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src=""></a>
</td>
</tr>
<tr id="scoreScalesTable-1">
<td class="Ranking Scale" id="scoreScalesTable-1-Ranking Scale">Hot</td>
<td class="Min Range" id="scoreScalesTable-1-Min Range">91</td>
<td class="Max Range" id="scoreScalesTable-1-Max Range">100</td>
<td class="Icon" id="scoreScalesTable-1-Icon"><img alt="BlueStar.png" src=""></td>
<td>
<a class="scoreScalesTable-ajaxEdit" id="scoreScalesTable-1-Edit" href="javascript:;"><img alt="Edit" src=""></a>
<a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src="g"></a>
</td>
</tr>
<tr class="inputform" id="scoreScalesTable-inputRow0" style="display: table-row;">
<td class="ajaxReq">
<input name="Ranking Scale" type="text" placeholder="Enter Ranking Scale" value="">
</td>
<td class="ajaxReq">
<input name="Min Range" type="text" placeholder="Enter Minimum Range" value="">
</td>
<td class="ajaxReq">
<input name="Max Range" type="text" placeholder="Enter Maximum Range" value="">
</td>
<td class="ajaxReq">
<div class="ddOutOfVision" id="msdrpdd20_msddHolder" style="height: 0px; overflow: hidden; position: absolute;">
<select name="Icon" tabindex="-1" id="msdrpdd20">
<option value="/images/BlueStar.png" data-image="/images/BlueStar.png">BlueStar.png</option>
<option value="/images/BlackStar.png" data-image="/images/BlackStar.png">BlackStar.png</option>
<option value="/images/RedStar.png" data-image="/images/RedStar.png">RedStar.png</option>
<option value="/images/YellowStar.png" data-image="/images/YellowStar.png">YellowStar.png</option>
<option value="/images/BrownStar.png" data-image="/images/BrownStar.png">BrownStar.png</option>
<option value="/images/OrangeStar.png" data-image="/images/OrangeStar.png">OrangeStar.png</option>
<option value="/images/GreenStar.png" data-image="/images/GreenStar.png">GreenStar.png</option>
<option value="/images/PurpleStar.png" data-image="/images/PurpleStar.png">PurpleStar.png</option>
<option value="/images/WhiteStar.png" data-image="/images/WhiteStar.png">WhiteStar.png</option>
<option value="/images/CyanStar.png" data-image="/images/CyanStar.png">CyanStar.png</option>
</select>
</div>
<div tabindex="0" class="dd ddcommon borderRadius" id="msdrpdd20_msdd" style="width: 170px;">
<div class="ddTitle borderRadiusTp"><span class="divider"></span><span class="ddArrow arrowoff"></span><span class="ddTitleText " id="msdrpdd20_title"><img class="fnone" src=""><span class="ddlabel">BlackStar.png</span><span class="description" style="display: none;"></span></span>
</div>
<input class="text shadow borderRadius" id="msdrpdd20_titleText" style="display: none;" type="text" autocomplete="off">
<div class="ddChild ddchild_ border shadow" id="msdrpdd20_child" style="top: 24px; height: 213px; display: none; visibility: visible; position: absolute; z-index: 1;">
<ul>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BlueStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_ selected"><img class="fnone" src=""><span class="ddlabel">BlackStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">RedStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">YellowStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BrownStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">OrangeStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">GreenStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">PurpleStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">WhiteStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">CyanStar.png</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</td>
<td>
<a class="scoreScalesTable-addRow" href="javascript:;"><img alt="Add Row" src=""></a>
<a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src=""></a>
</td>
</tr>
<tr class="inputform" id="scoreScalesTable-inputRow1">
<td class="ajaxReq">
<input name="Ranking Scale" type="text" placeholder="Enter Ranking Scale" value="">
</td>
<td class="ajaxReq">
<input name="Min Range" type="text" placeholder="Enter Minimum Range" value="">
</td>
<td class="ajaxReq">
<input name="Max Range" type="text" placeholder="Enter Maximum Range" value="">
</td>
<td class="ajaxReq">
<div class="ddOutOfVision" id="msdrpdd22_msddHolder" style="height: 0px; overflow: hidden; position: absolute;">
<select name="Icon" tabindex="-1" id="msdrpdd22">
<option value="/images/BlueStar.png" data-image="/images/BlueStar.png">BlueStar.png</option>
<option value="/images/BlackStar.png" data-image="/images/BlackStar.png">BlackStar.png</option>
<option value="/images/RedStar.png" data-image="/images/RedStar.png">RedStar.png</option>
<option value="/images/YellowStar.png" data-image="/images/YellowStar.png">YellowStar.png</option>
<option value="/images/BrownStar.png" data-image="/images/BrownStar.png">BrownStar.png</option>
<option value="/images/OrangeStar.png" data-image="/images/OrangeStar.png">OrangeStar.png</option>
<option value="/images/GreenStar.png" data-image="/images/GreenStar.png">GreenStar.png</option>
<option value="/images/PurpleStar.png" data-image="/images/PurpleStar.png">PurpleStar.png</option>
<option value="/images/WhiteStar.png" data-image="/images/WhiteStar.png">WhiteStar.png</option>
<option value="/images/CyanStar.png" data-image="/images/CyanStar.png">CyanStar.png</option>
</select>
</div>
<div tabindex="0" class="dd ddcommon borderRadius" id="msdrpdd22_msdd" style="width: 170px;">
<div class="ddTitle borderRadiusTp"><span class="divider"></span><span class="ddArrow arrowoff"></span><span class="ddTitleText " id="msdrpdd22_title"><img class="fnone" src=""><span class="ddlabel">BrownStar.png</span><span class="description" style="display: none;"></span></span>
</div>
<input class="text shadow borderRadius" id="msdrpdd22_titleText" style="display: none;" type="text" autocomplete="off">
<div class="ddChild ddchild_ border shadow" id="msdrpdd22_child" style="top: -213px; height: 213px; display: none; visibility: visible; position: absolute; z-index: 1;">
<ul>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BlueStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BlackStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">RedStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">YellowStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_ selected"><img class="fnone" src=""><span class="ddlabel">BrownStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">OrangeStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">GreenStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">PurpleStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">WhiteStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">CyanStar.png</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</td>
<td>
<a class="scoreScalesTable-addRow" href="javascript:;"><img alt="Add Row" src=""></a>
<a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src=""></a>
</td>
</tr>
<tr class="inputform" id="scoreScalesTable-inputRow2">
<td class="ajaxReq">
<input name="Ranking Scale" type="text" placeholder="Enter Ranking Scale" value="">
</td>
<td class="ajaxReq">
<input name="Min Range" type="text" placeholder="Enter Minimum Range" value="">
</td>
<td class="ajaxReq">
<input name="Max Range" type="text" placeholder="Enter Maximum Range" value="">
</td>
<td class="ajaxReq">
<div class="ddOutOfVision" id="msdrpdd23_msddHolder" style="height: 0px; overflow: hidden; position: absolute;">
<select name="Icon" tabindex="-1" id="msdrpdd23">
<option value="/images/BlueStar.png" data-image="/images/BlueStar.png">BlueStar.png</option>
<option value="/images/BlackStar.png" data-image="/images/BlackStar.png">BlackStar.png</option>
<option value="/images/RedStar.png" data-image="/images/RedStar.png">RedStar.png</option>
<option value="/images/YellowStar.png" data-image="/images/YellowStar.png">YellowStar.png</option>
<option value="/images/BrownStar.png" data-image="/images/BrownStar.png">BrownStar.png</option>
<option value="/images/OrangeStar.png" data-image="/images/OrangeStar.png">OrangeStar.png</option>
<option value="/images/GreenStar.png" data-image="/images/GreenStar.png">GreenStar.png</option>
<option value="/images/PurpleStar.png" data-image="/images/PurpleStar.png">PurpleStar.png</option>
<option value="/images/WhiteStar.png" data-image="/images/WhiteStar.png">WhiteStar.png</option>
<option value="/images/CyanStar.png" data-image="/images/CyanStar.png">CyanStar.png</option>
</select>
</div>
<div tabindex="0" class="dd ddcommon borderRadius" id="msdrpdd23_msdd" style="width: 170px;">
<div class="ddTitle borderRadiusTp"><span class="divider"></span><span class="ddArrow arrowoff"></span><span class="ddTitleText " id="msdrpdd23_title"><img class="fnone" src=""><span class="ddlabel">YellowStar.png</span><span class="description" style="display: none;"></span></span>
</div>
<input class="text shadow borderRadius" id="msdrpdd23_titleText" style="display: none;" type="text" autocomplete="off">
<div class="ddChild ddchild_ border shadow" id="msdrpdd23_child" style="top: -213px; height: 213px; display: none; visibility: visible; position: absolute; z-index: 1;">
<ul>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BlueStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BlackStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">RedStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_ selected"><img class="fnone" src=""><span class="ddlabel">YellowStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">BrownStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">OrangeStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">GreenStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">PurpleStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">WhiteStar.png</span>
<div class="clear"></div>
</li>
<li class="enabled _msddli_"><img class="fnone" src=""><span class="ddlabel">CyanStar.png</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</td>
<td>
<a class="scoreScalesTable-addRow" href="javascript:;"><img alt="Add Row" src=""></a>
<a class="scoreScalesTable-deleteRow" href="javascript:;"><img alt="Delete Row" src=""></a>
</td>
</tr>
</tbody>
<button>Validate</button>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？