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

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 = '';
        }
    }
}