jq实现”根据下拉框让不同table显示“

575 阅读1分钟

可以监听下拉选,然后获取到不同值之后使用jquery让对应得table show 或者hiden

样式代码

<style type="text/css">


   #selectBoard{
      width: 100px;
      height: 20px;
      text-align: center;
   }

   #selectBoard ul{

      width: 100px;

      background: white;

      position: absolute;

      text-align: center;

      top: -10px;

      left: -10px;

      border-radius: 5px;

      display: none;

   }

   #selectBoard ul li{

      text-align: center;

      list-style: none;

   }

   #selectBoard ul li:hover{background: dodgerblue;}

   #selectBoard img{

      position: absolute;

      right: 0;

      top: 0;

      width: 30px;

   }

<li>
   <a class="icon" id="selectBoard">
      <ul style="display: none">

         <li><input type="checkbox" value=0 name="displayField"/>编号</li>

         <li><input type="checkbox" value=1 name="displayField" checked="true"/>名称</li>

         <li><input type="checkbox" value=2 name="displayField" checked="true"/>描述</li>

         <li><input type="checkbox" value=3 name="displayField" checked="true"/>创建时间</li>

         <li><input type="checkbox" value=4 name="displayField" checked="true"/>更新时间</li>

         <li><input type="checkbox" value=5 name="displayField" checked="true"/>创建者</li>

         <li><input type="checkbox" value=6 name="displayField" checked="true"/>修改者</li>

      </ul>
       <span>
          字段显示或隐藏
       </span>
   </a>
</li> 
</style>

js代码

<script type="text/javascript">

   $("#selectBoard").click(function(event){
      let boardHeight = $("#selectBoard").prop('scrollHeight');
      let boardWidth = $("#selectBoard").prop('scrollWidth');
      console.log(boardHeight, "==", boardWidth);
      var ev = event || window.event;

      //阻止默认事件及封装

      if (ev.stopPropagation) {

         ev.stopPropagation();

      }else{

         ev.cancelable = true;

      }

      $("#selectBoard ul").css("display","block");

   });
   $(window).click(function(){

      $("#selectBoard ul").css("display","none");

   });
   $(document).ready(function () {

      $("#tab1 tr").find("th:eq(0)").hide();
      $("#tab1 tr").find("td:eq(0)").hide();
         $("input[name='displayField']").change(function (){
            if ($(this).prop("checked")) {
               let val = $(this).val();
               $("#tab1 tr").find("th:eq("+val+")").show(0);
               $("#tab1 tr").find("td:eq("+val+")").show(0);
            }else {
               let val = $(this).val();
               let strth = "th:eq("+val+")";
               let strtd = "td:eq("+val+")";
               $("#tab1 tr").find(strth).hide(0);
               $("#tab1 tr").find(strtd).hide(0);
            }
         })
      })

</script>