python Django学习笔记 2020-11-3（html中table表格使用，添加滑动条和固定表头，javascrip实现下拉复选框）

最新推荐文章于 2024-04-28 14:57:52 发布

我肚子好饿

最新推荐文章于 2024-04-28 14:57:52 发布

阅读量1.5k

点赞数

分类专栏： python web

本文链接：https://blog.csdn.net/qq_36780295/article/details/109454195

版权

python 同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

web

12 篇文章 0 订阅

订阅专栏

html中table表格的使用

<div>
    <table class="table" style="border:0px solid black;">
        <!--字段-->
        <thead>
            <tr>
                <th style="width:90px;">项目名称</th>
                <th style="width:170px;">提交时间</th>
                <th style="width:90px;">负责人</th>
                <th style="width:240px;">参与人</th>
                <th style="width:90px;">提交人</th>
                <th>提交进度</th>
                <th>备注</th>
            </tr>
        </thead>
        <!--字段-->
        
        <!--数据-->
        <tbody>
            <tr>
                <td>jcy项目1</td>
                <td>2020.1.29 18：21：12</td>
                <td>jay</td>
                <td>jcy1号</td>
                <td>jcy2号</td>
                <td>完成</td>
                <td>无</td>
            </tr>
            <tr>
                <td>jcy项目2</td>
                <td>2020.1.29 18：21：12</td>
                <td>jay</td>
                <td>jcy1号</td>
                <td>jcy2号</td>
                <td>完成</td>
                <td>无</td>
            </tr>
        </tbody>
        <!--数据-->
    </table>
</div>

在这里插入图片描述
添加滑动条
当数据足够多的时候，高度会超出范围，通过设置滑动条解决。
在table的外层使用一个div标签，限定他的大小，并添加属性overflow:scroll;

固定表头
添加滑动条以后，里面的所有东西都会下滑，想要把表头固定，通过在网上查到的方法，将表头和数据分离，做到两个div标签中。示例：

<div style="width:100%;height:58px">
    <table class="table table-bordered" style="border:0px solid black;margin-top:80px;">
        <thead>
            <tr>
                <th style="width:95px;">项目名称</th>
                <th style="width:180px;">提交时间</th>
                <th style="width:90px;">负责人</th>
                <th style="width:200px;">参与人</th>
                <th style="width:90px;">提交人</th>
                <th style="width:320px;">提交进度 </th>
                <th>备注</th>
            </tr>
         </thead>
    </table>
</div>

<div  id="div_table" style="width:100%;border:0px solid black;height:710px;margin-top:-20px">
    <table class="table table-bordered" style="border:0px solid black;margin-top:-17px">
         <thead>
             <tr>
                 <th style="width:95px;"></th>
                 <th style="width:180px;"></th>
                 <th style="width:90px;"></th>
                 <th style="width:200px;"></th>
                 <th style="width:90px;"></th>
                 <th style="width:320px;"></th>
                 <th></th>
             </tr>
         </thead>
         <tbody>
             <tr>
                  <td>jcy项目1</td>
                  <td>2020.1.29 18：21：12</td>
                  <td>jay</td>
                  <td>jcy1号</td>
                  <td>jcy2号</td>
                  <td>完成</td>
                  <td>无</td>
              </tr>
          </tbody>
    </table>
</div>

css背景图片移动

background:url(/static/icon/xialatiao.png) no-repeat 167px 12px;

前一个参数表示向右移动167像素，后一个表示向下移动12像素。要向左向上移动时，把两个参数改为负数就可以了。

javascrip实现下拉复选框

代码来自：https://blog.csdn.net/qq_31635733/article/details/82500451

由于原代码中去除check，删除选中元素时是删除第一个元素，所以我在原代码的基础上修改了一下，在js中增加了个定位，以此来修正这个问题。其他地方也做了一些细微的修改，还有增加了我自己对代码的理解写的注释，由于没有详细学过javascrip，所以有错的地方希望能指出。代码直接保存到html文件中就能直接打开了。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{padding: 0;margin: 0; box-sizing:border-box}
label{ cursor:pointer;line-height:15px; }
.label-check{ background:url(/static/icon/check.png) no-repeat center; }         //checkbox未选中素材，使用图片素材路径改一下            
.check-checked{ background:url(/static/icon/checked.png) no-repeat center }         //checkbox选中素材，使用图片素材路径改一下  
.label-check input{ opacity:0; filter:alpha(opacity=0);}
.title{
  width: 300px;
  height: 30px;
  line-height:30px;
  border: 1px solid #dcdcdc;
  border-radius: 5px;
  padding:0px 40px 0px 10px;
  background:#fff;
  background:url(/static/icon/xialatiao.png) no-repeat 167px 12px;                              
  position:absolute;
  top:0px;
  left:0px;
}
.input-define{ width:250px; height:22px; line-height:22px; border:none; outline:none;}
#selectbox{
  width: 300px;
  height: 30px;
  line-height:30px;
  position: relative;
  margin:0px auto;
}
#selectbox ul {
  width: 300px;
  background: #fff;
  position: absolute;
  top: 40px;
  left: 0px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  display: none;
}
#selectbox ul li {
  list-style: none;
  height:25px;
  line-height:25px;
  padding:0px 10px;
}
#selectbox ul li:hover{ background:#f3f3f3; }
#data { display:none; }
</style>
</head>
<body>
<div id="selectbox">
    <div class="title">
       <input type="text" class="input-define" id="input-define"  placeholder="select"/>
    </div>
    <ul>
        <li>
            <label  class="label-check">
               <input type="checkbox" id="checkbox-01" name="checkbox"  value="NO.1"/>
            </label>
            NO.1
        </li>
        <li>
            <label  class="label-check">
                <input type="checkbox" id="checkbox-02" name="checkbox"  value="NO.2"/>
            </label>
            NO.2
        </li>
        <li>
            <label  class="label-check">
               <input type="checkbox" id="checkbox-03" name="checkbox"  value="NO.3"/>
            </label>
            NO.3
        </li>
        <li>
            <label  class="label-check">
                <input type="checkbox" id="checkbox-04" name="checkbox"  value="NO.4"/>
            </label>
            NO.4
        </li>
        <li>
            <label  class="label-check">
               <input type="checkbox" id="checkbox-05" name="checkbox"  value="NO.5"/>
            </label>
            NO.5
        </li>
        <li>
            <label  class="label-check">
                <input type="checkbox" id="checkbox-06" name="checkbox"  value="NO.6"/>
            </label>
            NO.6
        </li>
    </ul>
    <span id="data"></span>
</div>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
//定义一个空数组去接收value值
var arr = [];
var put1=document.getElementById("input-define");       //获取input-define的文本内容
var div1=document.getElementById("data");


//仿select的点击事件
$("#selectbox").click(function(event){
  var ev = event || window.event;     //如果存在event,那么var e=event;而如果不存在event，那么var e=window.event.实现浏览器的兼容
  //阻止默认事件及封装
  if (ev.stopPropagation) {
     ev.stopPropagation();         //停止默认事件
   }else{
   ev.cancelable = true;       //ev.cancelable此属性返回一个布尔值，表明该事件默认行为是否可以被取消。
  }

  $("#selectbox ul").css("display","block");    //初始状态，ul下拉显示
 });

 $(window).click(function(){
   $("#selectbox ul").css("display","none");    //在window区域点击时，ul下拉不显示
 });

 $("input").change(function(){         //input状态发生改变时（此处为checkbox），则执行下列程序
    if ($(this).prop("checked")) {    //点击且点击对象的状态为checked
      arr.push($(this).val()+",");     //末尾添加元素，并使用逗号连接选中的checkbox的值
      console.log(arr);                 //在控制台输出arr
    }else{
      //arr.shift($(this).val()+",");    //点击且未被选中，将第一个元素删除
      arr.splice(IndexOf(arr,$(this).val()+","),1);  //splice(x,y)从第x下标元素开始，删除y个元素
    }

 $("#data").html(arr);
	put1.value=div1.innerText;     //put1的值指向div1标签的文本值
 });


 //点击时切换复选框的图标
 $(function(){
     $('.label-check').click(function(){ setupCheck(); });
     });                            //点击label-check时执行以下事件setupCheck()
 function setupCheck(){
     if($('.label-check input').length) {
     $('.label-check').each(function(){ $(this).removeClass('check-checked'); });        //移除.label-check的选中样式
     $('.label-check input:checked').each(function(){ $(this).parent('label').addClass('check-checked'); });
     }                              //选中复选选项时给其父元素.label-check增加选中样式
 }

 function IndexOf(arr, item) {       //查找元素位置
    if (Array.prototype.indexOf) {
    return arr.indexOf(item);
  } else {
    for (var i = 0; i < arr.length; i++) {
      if (arr[i] === item) {
        return i;
      }
    }
  }
  return -1;
 }

</script>
 </body>
</html>

素材：
check:
在这里插入图片描述
checked:

倒三角：

在自己的代码中：
稍作修改，通过数据库查询结果来传递这个下拉的参数：

views.py中：

input_names = models.User.objects.all()

html中：

                        <div id="selectbox" style="float:left;width:21%;">
                            <label style="float:left;margin-top:9px;margin-left:8px">选择参与人：</label>
                            <div class="title" style="width:65%;margin-left: 93px;">
                               <input type="text" class="input-define" id="input-define"  placeholder="请选择" style="width:100%;"/>
                            </div>
                            <ul>
                                <li>
                                    <label  class="label-check" >
                                       <input type="checkbox"  name="checkbox"  value="全部">
                                    </label>
                                    全部
                                </li>
                                {% for name in input_names %}
                                <li>
                                    <label  class="label-check" >
                                       <input type="checkbox"  name="checkbox"  value={{name.input_name}}>
                                    </label>
                                    {{name.input_name}}
                                </li>
                                {% endfor %}
                            </ul>
                            <span id="data"></span>
                        </div>

运行结果：
在这里插入图片描述

我肚子好饿

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
python Django学习笔记 2020-11-3（html中table表格使用，添加滑动条和固定表头，javascrip实现下拉复选框）

html中table表格的使用<div> <table class="table" style="border:0px solid black;">  <thead> <tr> <th style="width:90px;">项目名称</th> <th style="wid
复制链接

扫一扫

专栏目录