table

一、label聚焦

<label> 标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

<dl>
    <dd>
        时间类型：<label >
        <input type="radio" name="taskTime" value="1"  >
        <span>开始时间</span>
        </label>
    </dd>
    <dd>
        <input type="radio" name="taskTime" value="2" >
        <span>开发时间</span>

    </dd>
    <dd>

        <input type="radio" name="taskTime" value="3" >
        <span>测试时间</span>

    </dd>
    <dd>
        <label >
        <input type="radio" name="taskTime" value="4" >
        <span>发布时间</span>
        </label>
    </dd>

    <dd>
            <label > &nbsp;&nbsp;&nbsp;进度：</label>
            <select name=""   ng-model="task_statu" >
                <option value="" >请选择进度</option>
                <option value="10">未开始</option>
                <option value="20">开发中</option>
                <option value="30">待测试</option>
                <option value="40">测试中</option>
                <option value="50">待发布</option>
                <option value="60">已发布</option>
                <option value="70">已完成无需发布</option>
            </select>

    </dd>
</dl>

 

<dl>
    <dd>
        时间筛选：<label >
        <input type="radio" name="state" value="1" ng-click="thisWeek()">本周</label>
    </dd>
    <dd>
        <label >
        <input type="radio" name="state" value="2" ng-click="thisMonth()" >
        本月
        </label>
    </dd>
    <dd>
        <label >
        <input type="radio" name="state" value="" ng-click="ckNull()" ng-checked="alls">
        <span>清空</span>
        </label>
    </dd>
    <dd>
        <p class="timeSel">
            <input type="text" autocomplete="off" id="J-x3" value="" name="time_start" onchange="changeTime()"  placeholder="请选择"/><i class="icon iconfont icon-riqi1 iconfontss"></i>
            <span> 至 </span>
            <input type="text" autocomplete="off" id="J-xl4" value=""  name="time_end" onchange="changeTime()" placeholder="请选择"/><i class="icon iconfont icon-riqi1 iconfontss"></i>
        </p>
    </dd>
    <dd>
        <div class="sogin">
            <label >搜索：</label>
            <input type="text" value="" autocomplete="off" placeholder="搜索..."  ng-model="taskSearch">
            &nbsp;&nbsp;&nbsp;<button ng-click="search()" >查找</button>
            <button ng-click="getGroupTaskData()" >导出</button>
            <button ng-click="editTotalTask($event)">新建任务</button>
        </div>
    </dd>
</dl>

 

可以看出，label的作用是聚焦，只要鼠标点击元素区域，即可选中目标，而不需要精准的点击选择按钮。

 

二、table表格

table标签：定义一个表格

简单表格由table元素以及一个或多个tr（行标签）、th（表头单元格标签）、td（普通单元格标签）。

复杂的表格还包括caption（表格标题）、col(定义列)、colgroup(对表格中的列进行组合)、thead（组合表头的内容）tbody(组合表格的主题内容)、tfoot(组合表格的脚注内容)。

<table width="100%" class="table">  
<thead>  
    <tr>  
        <th>编号</th>  
        <th>优先级</th>
        <th>审批时间</th>
        <th>需求人</th>
        <th>审批编号</th>
        <th>类型</th>
        <th>任务名称</th>
        <th>进度</th>
        <th>耗时(天)</th>
        <th>计划开始时间</th>
        <th>计划完成时间</th>
        <th>实际开始时间</th>
        <th>实际完成时间</th>
        <th>发布时间</th>
        <th>备注</th>
        <th>参与人</th>
        <th>操作</th>
    </tr>  
</thead>  
<tr ng-hide="teamsTaskList=='' || blsit " ng-repeat="teams in teamsTaskList" >
     <td>{{teams.num}}</td>  
     <td>{{teams.priority}}
     </td>
     <td>{{teams.time_receive}}</td>
     <td>{{teams.applicant}}</td>
     <td>
          {{teams.approve_no}}
     </td>
     <td>{{teams.task_type}}</td>
     <td title="{{teams.task_name}}">{{teams.task_name | cut:true:10:'...'}}</td>
     <td>{{teams.task_process}}</td>
     <td>{{teams.consume_days}}</td>
     <td>{{teams.time_start_schedule}}</td>
     <td>{{teams.time_end_schedule}}</td>

     <td>
         <span ng-show="teams.time_start=='' && teams.time_start_schedule!='' && teams.time_end_schedule!='' && teams.is_plan!=1 " 
         class="notStart"  ng-click="beginTime(teams.mytask_id,teams.handle_type)" >开始</span>
         <span ng-show="teams.time_start!=''  && teams.time_start_schedule!='' && teams.time_end_schedule!=''">
             {{teams.time_start}}
         </span>
     </td>
     <td>
         <span ng-show="teams.time_end==''&& teams.time_start!=''&& teams.time_start_schedule!='' && teams.time_end_schedule!='' && teams.is_plan!=1 " 
         class="notStart" ng-click="end(teams.mytask_id,teams.time_end_schedule,teams.handle_type)" >结束</span>
         <span ng-show="teams.time_end!=''&& teams.time_start!=''&& teams.time_start_schedule!='' && teams.time_end_schedule!=''">
             {{teams.time_end}}
         </span>
     </td>
      <td>
          <span ng-show="teams.time_release!='' && teams.time_end_schedule!='' ">{{teams.time_release}}</span>
         <span ng-show="teams.can_release==0 && teams.time_release=='' && teams.time_end_schedule!='' ">计划{{teams.time_end_schedule}}</span>
         <!-- <span ng-show="teams.can_release==1" 
          class="notStart" ng-click="releaseTask(teams.id,teams.handle_type)" >发布</span> -->
     </td>
     <td title="{{teams.remark}}">{{teams.remark | cut:true:8:'...'}}</td>
     <td>
         <p ng-repeat="(k,v) in teams.developer track by $index">
             <span ng-show="k<2" >{{v.name}}<font ng-show="k<1&& !$last">、</font><font ng-show="k==1">...</font></span>
         </p>
     </td>
     <td>
        <span>
        <span  class="span"  ng-show="teams.is_plan!=undefined && teams.is_plan==0 " >计划</span>
         <a  ng-show="teams.is_plan!=undefined && teams.is_plan==1" href="./index.php?loadmodel=myMissionPlan&xid={{teams.id}}&auth_type=4">计划</a>
        </span>
         <a  href="./index.php?loadmodel=taskDetails&xid={{teams.id}}&auth_type=4">详情</a>
         <!-- <a href="javascript:;" ng-click="removeMyAk(teams.id,teams.is_plan)" >删除</a> -->
     </td> 
</tr>  
 <tr ng-show="teamsTaskList==''||teamsTaskList==undefined">
    <td colspan="17">暂无任务</td>
</tr>
</table>