XuLingLing

动态生成表格,批量添加再使用ajax提交后台

电脑版发表于:2019/1/14 11:51

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="~/assets/js/jquery-1.10.2.min.js"></script>


    <link href="~/layui/css/layui.css" rel="stylesheet" />

    <script src="~/layui/layui.js"></script>


    <style>


        .usertable {

            margin-top: 10px;

            border: solid #addc90;

            width: 670px;

            border-width: 1px 0px 0px 1px; /*顺时针方向上右下左*/

        }


            .usertable td {

                text-align: center;

                border: solid #addc90;

                border-width: 0px 1px 1px 0px; /*顺时针方向上右下左*/

            }


        .theader {

            background-color: #addc90;

            color: #eeeeee;

        }


        .usertable tr a {

            color: blue;

            text-decoration: none;

        }

    </style>

    <script>

        $(function () {

            $(".usertable tr").find("a:first").click(function () {

                $(this).parent().parent().remove();

            })



            //添加

            $("#add").click(function () {



             

                var needhtml = $("<tr name=\"cEM_plandata\"></tr>");

                needhtml.append("<td><input tyte=\"checkbox\" id=\"headerchecked\"></td>");   

                

                needhtml.append("<td><input tyte=\"text\" name=\"Ename\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"Etype\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"Emodel\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"quantity\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"qunit\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"price\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"money\" ></td>");

                needhtml.append("<td><input tyte=\"text\" name=\"oneremark\" id=\"oneremark\"></td>");


                $(".usertable").append(needhtml);

               

            })

           

            $("#submit").click(function () {

                

                var cEM_plandata = $("tr[name='cEM_plandata']");

                 

                var myarray = new Array();

                for (var i = 0; i < cEM_plandata.length; i++) {

                    var jsonObj = {

                         "Ename": $(" input[ name='Ename' ]").eq(i).val(), "Etype": $(" input[ name='Etype' ]").eq(i).val(), "Emodel": $(" input[ name='Emodel' ]").eq(i).val(),

                        "quantity": $(" input[ name='quantity' ]").eq(i).val(),

                        "qunit": $(" input[ name='qunit' ]").eq(i).val(), "price": $(" input[ name='price' ]").eq(i).val(), "money": $(" input[ name='money' ]").eq(i).val(), "oneremark": $(" input[ name='oneremark' ]").eq(i).val()

                    }

                    

                    myarray.push(jsonObj);

                    console.log(jsonObj);

                }

                

               

               

            })

        })


    </script>

</head>

<body>

   

    <form id="form1" runat="server"  method="post">

        <input type="button" id="add" value="批量添加" />

        <input type="submit" id="submit" value="提交" />

        <div>


            <table class="usertable">


                <tr class="theader">

                  <th>

                        <input type="checkbox" id="headerchecked" />

                    </th>

                    <th>序号</th>

                 

                    <th>设备名称</th>

                    <th>设备类型</th>

                    <th>设备型号</th>

                    <th>设备数量</th>

                    <th>数量单位</th>

                    <th>计划单价</th>

                    <th>计划金额</th>

                    <th>备注</th>


                </tr>



            </table>


        </div>

    </form>

</body>

</html>


关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢