ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

鼠标点击选中着色,包含这个标签下的所有子标签

2020-04-15 16:01:18  阅读:188  来源: 互联网

标签:info project 鼠标 标签 着色 &# id cloud


1.html代码

<table class="layui-table" id="on_color">
<thead>
  <tr>
    <th>
      <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
    </th>
    <th>ID</th>
    <th>项目名称</th>
    <th>项目云id【项目在不同账号下,默认最多3个】</th>
    <th>关联云账号</th>
    <th>工作室</th>
    <th>创建时间</th>
    <th>修改时间</th>
    <th>操作</th>
 </tr>
</thead> <tbody> {% for project_info in project_list %} <tr> <td> <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{{ project_info.id }}'><i class="layui-icon">&#xe605;</i></div> </td> <td>{{ project_info.id }}</td> <td>{{ project_info.name }}</td> <td>{{ project_info.cloud_project_id }}</td> <td>{{ project_info.cloud_account_id1 }}</td> <td>{{ project_info.describe|slice:"50" }}</td> <td>{{ project_info.create_time|date:"Y-m-d H:i:s" }}</td> <td>{{ project_info.update_time|date:"Y-m-d H:i:s" }}</td> <td> <a title="编辑" onclick="x_admin_show('编辑','xxx-{{ project_info.id }}',1000,700)" href="javascript:;"> <i class="layui-icon">&#xe642;</i> </a> <a title="删除" onclick="member_del(this,'{{ project_info.id }}')" href="javascript:;"> <i class="layui-icon">&#xe640;</i> </a> </td> </tr> {% endfor %} </tbody> </table>

2.javascript代码

//选中着色,包含这个标签下的所有子标签
var trs = document.getElementById('on_color').getElementsByTagName('tr');
window.onload = function(){
    for( var i=0; i<trs.length; i++ ){
        trs[i].onmousedown = function(){
            tronmousedown(this);
        }
    }
};
function tronmousedown(obj){
    for( var o=0; o<trs.length; o++ ){
        if( trs[o] == obj ){
            trs[o].style.backgroundColor = 'rgb(174, 212, 234)';
        }
        else{
            trs[o].style.backgroundColor = '';
        }
    }
}

 

标签:info,project,鼠标,标签,着色,&#,id,cloud
来源: https://www.cnblogs.com/chenjw-note/p/12705899.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有