将HTML动态表值添加到Single INSERT语句中

时间:2013-10-24 16:24:08

标签: php jquery mysql arrays

这是我的主页面,它在表格中添加动态行(jQuery正在执行此操作),因为我要添加'n'行数,如何为所有动态行数执行SQL insert语句(4不同的文本域。)

在Simple中,我有 - (1,2,3,x,y,z)元素作为Insert语句值,其中x,y,z可以是任意数量的行(但每次x,y,z都会是相同数量的元素),以及1,2,3我需要添加这个x,y,z数组。插入语句中的FOR循环是我从google n stackOverflow获得的但是你如何循环4个不同的文本字段以及1,2,3(预定义元素)

更简单 -

(value1,value2,value3,x,y,z);
(value1,value2,value3,a,b,c);
(value1,value2,value3,e,f,g);
(value1,value2,value3,q,w,e);
(value1,value2,value3,a,s,d);

如何在MySQL单个INSERT语句中插入以上内容?

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script src="jquery.json-2.4.min.js"></script>
        <script>
        $(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row

                var prot1= master.find(".prototype").clone();
                prot1.attr("class", "")
                prot1.find(".id").attr("value", id);

                master.find("tbody").append(prot1);
                alert(id);
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();

            });

            //Submit button clicked
            $('#button').click(function() {    
                //$("table tr").has("th").remove();
            var data = {
                value : []
            }
            $("table tbody tr").each(function() {

            data.value.push($('.id', this).val());
            data.value.push($('.WID', this).val());
            data.value.push($('.ac', this).val());
            data.value.push($('.tm', this).val());
            data.value.push($('.cutt', this).val());

        });

            console.log(data);
            var id = data.value.join(','); alert(id);

            var myarr1={final:data};

            var myarr2=JSON.stringify(myarr1);
            var myarr3="receivearray.php?url=" + encodeURIComponent(myarr2);

            $('#myFrame1').attr("src", myarr3);
        }); 

        });


        </script>
        <style>
            .dynatable {
                border: solid 1px #000; 
                border-collapse: collapse;
            }
            .dynatable th,
            .dynatable td {
                border: solid 1px #000; 
                padding: 2px 10px;
                width: 170px;
                text-align: center;
            }
            .dynatable .prototype {

            }
        </style>
    </head>
    <body>


            <table id="MyTable" class="dynatable">
            <thead>
                <tr>
                    <th>WID</th>
                    <th>InchargeName</th>
                    <th>Action</th>
                    <th>Time</th>
                    <th><button class="add">Add</button></th>
                </tr>
            </thead>
            <tbody>
                <tr class="prototype" id="pro">
                    <td><input type="text"  name="id[]" value=""  class="id" /></td>
                    <td><input type="text"  name="name[]" value="" class="WID"/></td>
                    <td><input type="text"  name="col4[]" value=""   class="ac" /></td>
                    <td><input type="text"  name="col3[]" value=""  class="tm"/></td>


                    <td><button class="remove">Remove</button>
                </tr>
        </table>


        <input type="button" id="button" value="submit"/>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

这会将所有数据发送到一个( ajax )http请求中:

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script src="jquery.json-2.4.min.js"></script>
    <script>
        $(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

                // Get a new row based on the prototype row

                var prot1= master.find(".prototype").clone();
                prot1.attr("class", "")
                prot1.find(".id").attr("value", id);

                master.find("tbody").append(prot1);
                alert(id);
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();

            });

            //Submit button clicked
            $('#button').click(function() {
                //$("table tr").has("th").remove();
                var data = {
                    final:{
                        value : []
                    }
                }
                $("table tbody tr").each(function() {
                    // create an array of objects
                    data.final.value.push({
                        id: $('.id', this).val(),
                        wid: $('.WID', this).val(),
                        ac: $('.ac', this).val(),
                        tm: $('.tm', this).val(),
                        cutt: $('.cutt', this).val()
                    });
                });

                console.log(eval(data));

                $.ajax({
                    async: false,
                    url: 'receivearray.php',
                    dataType: 'json',
                    data: data,
                    type: 'get'
                });

                $('#myFrame1').attr("src", myarr3);
            });

        });


    </script>
    <style>
        .dynatable {
            border: solid 1px #000;
            border-collapse: collapse;
        }
        .dynatable th,
        .dynatable td {
            border: solid 1px #000;
            padding: 2px 10px;
            width: 170px;
            text-align: center;
        }
        .dynatable .prototype {

        }
    </style>
</head>
<body>


<table id="MyTable" class="dynatable">
    <thead>
    <tr>
        <th>WID</th>
        <th>InchargeName</th>
        <th>Action</th>
        <th>Time</th>
        <th><button class="add">Add</button></th>
    </tr>
    </thead>
    <tbody>
    <tr class="prototype" id="pro">
        <td><input type="text"  name="id[]" value=""  class="id" /></td>
        <td><input type="text"  name="name[]" value="" class="WID"/></td>
        <td><input type="text"  name="col4[]" value=""   class="ac" /></td>
        <td><input type="text"  name="col3[]" value=""  class="tm"/></td>


        <td><button class="remove">Remove</button>
    </tr>
</table>


<input type="button" id="button" value="submit"/>
</body>
</html>

这里 receivearray.php

<?php
file_put_contents('/tmp/temp.txt',var_export($_REQUEST['final'],true));