Question

我有一张桌子，其中有两列。 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>

Answer 1

我完全评论了代码，«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");
  }
});

CodePen

<小时/> 问题解答：

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;设置的原因，以确保我们不会突出显示前一行，而是强调后一行。

Answer 2

要检查两个范围是否重叠，您只需要查看其中一个范围是否包含任何其他范围的端点。我这样做是通过查看端点是否超过其他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;

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);

＆＃13;

<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>

＆＃13;

Here it is on jsFiddle

使用JQuery在表列中查找重复和检查值范围

2 个答案: