Python之路【第十三篇】jQuery案例-Form表单&插件及扩展

jQuery案例-Form表单

学完这个form表单的案例，如果有人说这个表单（功能）还不够NB（此文不包含样式，样式是CSS比较简单可以根据需求自己添加），那么找武Sir他帮你搞定。

一步一步来

注意事项（目录结构）：

在写前端html代码的时候要注意（任何代码都一样），一定要规划好目录结构方便其他的人来看你的代码！

Python之路【第十三篇】jQuery案例-Form表单&插件及扩展

如果还有其他的html页面可以在加一个html存储的文件夹。

1、首先看下HTML主体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
     <style>
        .edit-mode{
            background-color: #b3b3b3;
            padding: 8px;
            text-decoration: none;
            color: white;
        }
        .editing{
            background-color: #f0ad4e;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />
        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />
        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />
        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"
           onclick="EditMode(this, '#tb1');">进入编辑模式</a>
    </div>

    <table style="margin-top: 20px;" border="1">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
                <th>业务</th>
                <th class="tb1">状态</th>
            </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">111 </td>
                <td>v11</td>
                <td edit="true" edit-type="select" global-key="BUSINESS"  select-val="2" >二手车</td>
                <td edit="true" edit-type="select" global-key="STATUS"  select-val="1" >在线</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" global-key="BUSINESS"  select-val="3">大保健</td>
                <td edit="true" edit-type="select" global-key="STATUS"  select-val="1">在线</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3" >大保健</td>
                <td edit="true" edit-type="select" global-key="STATUS" select-val="2">下线</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/Form_menu.js"></script>
</body>
</html>

html主体