jQuery增加和删除表格项目及实现表格项目排序的(2)

<style type="text/css"> *{ margin:0px; padding:0px;} table{ border-collapse:collapse;} table td{ border:1px solid #036; text-align:center; } thead tr th{ cursor:pointer; background:#066; color:#FFFFFF; } thead tr th:hover{ background:#369;} </style> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th scope="col">名称</th> <th scope="col">价格</th> <th scope="col">地址</th> <th scope="col">备注</th> <th scope="col">时间</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>10.5</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品2</td> <td>11.3</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品3</td> <td>9.8</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品4</td> <td>12.6</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品5</td> <td>13.9</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品6</td> <td>18</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品7</td> <td>21.3</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品8</td> <td>6.5</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td>商品9</td> <td>7.4</td> <td> </td> <td> </td> <td> </td> </tr> </tbody> </table>

效果:

2016530164848909.png (547×303)

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpwjp.html