2017-07-27 39 views
0

以下代码用于在单击复选框时突出显示表格记录。当第一个复选框点击以红色突出显示的表格记录时,并且当第二个复选框被点击时,表格记录应该以黄色突出显示,并且当第三个复选框被点击时,表格记录应该以绿色突出显示。尽管我已经使用了3种颜色当我点击它们时突出记录单击复选框时,使用3种不同的颜色突出显示表格记录

<style> 
    .cb3 {background-color:yellow;} 
    .cb2 {background-color:green;} 
    .cb1 {background-color:red;} 
    </style> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script> 
    Array.prototype.remove = function() { 
     var what, a = arguments, L = a.length, ax; 
     while (L && this.length) { 
      what = a[--L]; 
      while ((ax = this.indexOf(what)) !== -1) { 
       this.splice(ax, 1); 
      } 
     } 
     return this; 
    }; 

    var checked = []; 

    $(document).ready(function() { 
     if (localStorage.getItem("checked") == null) 
      localStorage.setItem("checked", checked); 

     $("#Table input").click(function() { 
      if ($(this).is(":checked")) { 
       $(this).parent().parent().addClass("highlight"); 
       checked.push($(this).attr("id")); 
      } else { 
       $(this).parent().parent().removeClass("highlight"); 
       checked.remove($(this).attr("id")); 
      } 
      localStorage.setItem("checked", JSON.stringify(checked)); 
     }); 

     var saved = JSON.parse(localStorage.getItem("checked")); 
     for (var i = 0;i < saved.length; i++) { 
      var itemAtIndex = $("#" + saved[i] + ""); 
      itemAtIndex.click(); 
      itemAtIndex.parent().parent().addClass("highlight"); 
     } 
    }); 
    </script> 
    <body> 
    <div class="col-lg-10"> 

    <table id="Table" border="1"><tr> 
     <td><input type="checkbox" name="cb1" id="cb1" value="y" /></td> 
     <td>Click me</td> 
    </tr><tr> 
     <td><input type="checkbox" name="cb2" id="cb2" value="y" /></td> 
     <td>Click me</td> 
    </tr><tr> 
     <td><input type="checkbox" name="cb3" id="cb3" value="y" /></td> 
     <td>Click me</td> 
    </tr></ 

<table> 
</div> 
+0

您没有说明是什么问题。 – Rob

+0

如果所有检查都应该显示所有三种颜色的单元格?如果一个复选框具有“资历”,或者一次只能检查一个复选框?尽管如此,正如Rob指出的那样,你没有告诉我们你卡在哪里(或他的,或者为什么),这就使得这个问题不清楚你问什么。请[编辑]您的问题以包含更多详细信息,以便我们能够理解您的问题。 –

+0

Mr.Thomas我编辑了我在