jquery表格筛选

最新推荐文章于 2024-12-11 16:48:38 发布

最新推荐文章于 2024-12-11 16:48:38 发布 · 140 阅读

文章标签：

#jQuery #HTML #ViewUI

jquery 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个基于jQuery的工序筛选功能实现。通过下拉选择特定工序，可以动态显示对应的订单详情，包括订单号、订单内容、物料名称等信息。此功能提高了工作效率并方便了对不同工序的管理。

$(function(){
    $("#wc").change(function(){
        $("#jd tbody tr")
            .hide()
	   .filter(":contains('"+( $(this).val() )+"')")
	   .show();
    }).change();
})

<font size="2" color="#0000FF">工序筛选：</font>
<select id="wc">
<option value="">全部</option>
<option>剪折冲</option>
<option>喷塑</option>
<option>下料</option>
<option>抛光</option>
<option>冲折</option>
<option>打弯</option>
</select>

<table id="jd" class="datalist" width="100%">
<thead>
  <tr>
    <td width="5%" align="center" background="images/list.jpg"><font color="#004D73">订单号</font></td>
    <td width="18%" align="center" background="images/list.jpg"><font color="#004D73">订单内容</font></td>
    <td width="12%"  align="center" background="images/list.jpg"><font color="#004D73">物料名称</font></td>
    <td width="4%"  align="center" background="images/list.jpg"><font color="#004D73">单位</font></td>
    <td width="6%"  align="center" background="images/list.jpg"><font color="#004D73">工序</font></td>
    <td width="4%" align="center"  background="images/list.jpg"><font color="#004D73">加工数</font></td>
    <td width="10%" align="center"  background="images/list.jpg"><font color="#004D73">要求完工日期</font></td>
    <td width="10%" align="center"  background="images/list.jpg"><font color="#004D73">实际开始日期</font></td>
    <td width="10%" align="center"  background="images/list.jpg"><font color="#004D73">实际完工日期</font></td>
    <td width="20%" align="center"  background="images/list.jpg"><font color="#004D73">完成情况描述</font></td>
  </tr>
</thead>  
<tbody>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >上摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >冲折</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >下摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >冲折</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >圆管摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >打弯</td>
    <td width="4%" align="center" >6</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >托盘    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >滑道连接板    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >导向轮底板    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >6</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >安装垫板    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >剪折冲</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >立柱    </td>
    <td width="4%" align="center" >根</td>
    <td width="6%" align="center" >抛光</td>
    <td width="4%" align="center" >6</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >托盘    </td>
    <td width="4%" align="center" >块</td>
    <td width="6%" align="center" >喷塑</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >滑道    </td>
    <td width="4%" align="center" >根</td>
    <td width="6%" align="center" >喷塑</td>
    <td width="4%" align="center" >3</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
  <tr onmousemove="this.bgColor='#FFFF99';" onmouseout="this.bgColor='#ffffff';">
    <td width="5%" align="center" >82683</td>
    <td width="18%" align="left" >漳州金龙客车有限公司<br>双内摆门泵总成-6745J13C中门</td>
    <td width="12%" align="left" >上摆臂    </td>
    <td width="4%" align="center" >只</td>
    <td width="6%" align="center" >喷塑</td>
    <td width="4%" align="center" >12</td>
    <td width="10%" align="center" >2009年8月18日20时</td>
    <td width="10%" align="center" ></td>
    <td width="10%" align="center" ></td>
    <td width="15%" align="left" ></td>
  </tr>
</tbody>
</table>