Bootstrap表格中嵌入表单，用表格做表单提交数据。

实现效果展示：

代码展示：

<form action="none" id="form-tDictCygs-add">
        <table class="table select-table table-striped">
            <tbody style="text-align:right;">
            <tr>
                <td>船运公司编号：</td>
                <td><input id="cygsBh" name="cygsBh" class="form-control" type="text" maxlength="6" required></td>
                <td>船运公司名称：</td>
                <td><input id="cygsMc" name="cygsMc" class="form-control" type="text" maxlength="200" required></td>
                <td>助记码：</td>
                <td><input id="cygsZj" name="cygsZj" class="form-control" type="text" maxlength="20"></td>
            </tr>
            <tr>
                <td>营业执照编号：</td>
                <td><input id="yyzzBh" name="yyzzBh" class="form-control" type="text" maxlength="20"></td>
                <td>法人姓名：</td>
                <td><input id="qyfrXm" name="qyfrXm" class="form-control" type="text" maxlength="60"></td>
                <td>身份证号：</td>
                <td>
                    <div class="input-group">
                        <input id="qyfrSfzh" name="qyfrSfzh" class="form-control" type="text" maxlength="18">
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        <div class="col-sm-12 select-table table-striped">
            <table class="table select-table table-striped">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>证书名称</th>
                    <th width="20%">有效期</th>
                    <th>操作</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>营业执照</td>
                    <td>
                    </td>
                    <td>
                        <a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cygsPhoto('营业执照')"><i class="fa fa-upload"></i>上传</a>
                    </td>
                    <td>

                    </td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>企业法人身份证正面</td>
                    <td>
                    </td>
                    <td>
                        <a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cygsPhoto('企业法人身份证正面')"><i class="fa fa-upload"></i>上传</a>
                    </td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>企业法人身份证反面</td>
                    <td>
                    </td>
                    <td>
                        <a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cygsPhoto('企业法人身份证反面')"><i class="fa fa-upload"></i>上传</a>
                    </td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>水路运输许可证</td>
                    <td>
                        <div class="input-group date">
                            <input id="slysxkzYxq" name="slysxkzYxq" type="text" class="form-control" maxlength="10">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </td>
                    <td>
                        <a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cygsPhoto('水路运输许可证')"><i class="fa fa-upload"></i>上传</a>
                    </td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>符合证明</td>
                    <td>
                        <div class="input-group date">
                            <input id="fhzmYxq" name="fhzmYxq" type="text" class="form-control" maxlength="10">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        </div>
                    </td>
                    <td>
                        <a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="cygsPhoto('符合证明')"><i class="fa fa-upload"></i>上传</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </form>

请大家支持原创，转载请注明出处。https://blog.csdn.net/yongfeng929/article/details/99642692