用 jQuery编写的可编辑的表格

1、     思路

首先实现隔行换色的效果

当点击想要修改的列时,创建文本框

当点击 enter时提交数据,当点击esc返回的键时,取消输入的内容

2.代码解析

Html代码 :

    <body>

    <div>

        <h1>

           显示员工界面

        </h1>

       <table>

           <thead>

              <tr>

                  <td><input type="checkbox"> </td>

                  <td>序号 </td>

                  <td>姓名</td>

                  <td>性别</td>

                  <td>年龄</td>

                  <td>出生日期</td>

                  <td>薪资</td>

                  <td>部门</td>

              </tr>

           </thead>

           <tbody>

              <tr>

                  <td><input type="checkbox"> </td>

                  <td >1</td>

                  <td>老王</td>

                  <td>女</td>

                  <td>23</td>

                  <td>5435343</td>

                  <td>10000</td>

                  <td>河软</td>

              </tr>

              <tr>

                  <td><input type="checkbox"> </td>

                  <td>1</td>

                  <td>老王</td>

                  <td>女</td>

                  <td>23</td>

                  <td>5435343</td>

                  <td>10000</td>

                  <td>河软</td>

              </tr>

              <tr>

                  <td><input type="checkbox"> </td>

                  <td>1</td>

                  <td>老王</td>

                  <td>女</td>

                  <td>23</td>

                  <td>5435343</td>

                  <td>10000</td>

                  <td>河软</td>

              </tr>

           </tbody>

       </table>

    </div>

</body>

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

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