鼠标点击选中着色,包含这个标签下的所有子标签
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"></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"></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"></i> </a> <a title="删除" onclick="member_del(this,'{{ project_info.id }}')" href="javascript:;"> <i class="layui-icon"></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 = ''; } } }
一些事情一直在干,说不定以后就结果了呢
本文来自博客园,作者:chenjianwen,转载请注明原文链接:https://www.cnblogs.com/chenjw-note/p/12705899.html