Question

我有一个经过某种计算的表，我可以提交两次并在输入数据后刷新以获取第一行数据的结果，其余行没有结果。现在，我要在输入数据后自动更新。有可能这样做吗？还是可以一次更新所有行？有人可以帮忙吗？

index.php

<script>
        window.onload = function() {

            $(".cal_amount").change(function() {
                var auto_array = {};

                //Step 1- On change use The closest() method to get the all input elements value of selected element row.
                form_data = $(this).closest('tr').find('input, select');

                //Step 2- On change Use map to store input elements value with name as key in the array.
                var myArray = $.map(form_data, function(element) {
                        auto_array[element.name] = element.value;
                        //return {name: element.name, value: element.value};
                });

    console.log(myArray);
    var pprice = $(this).closest('tr').find('.pprice');
    var price = $(this).closest('tr').find('.price');
    var total_cost = $(this).closest('tr').find('.total_cost');
    var pprice_total = $(this).closest('tr').find('.pprice_total');
    var supplement_rate = $(this).closest('tr').find('.supplement_rate');


    pprice_val = Math.round(auto_array['cost'] * auto_array['profit_rate'] * auto_array['currency_rate'] * auto_array['vat'] / auto_array['eurbuy']);
    price_val = Math.round(auto_array['cost'] * auto_array['profit_rate'] * auto_array['currency_rate'] * auto_array['vat'] / auto_array['eurbuy']) * auto_array['no_of_day'] * auto_array['qua'];
    total_cost_val = Math.round(auto_array['cost'] * auto_array['qua'] * auto_array['no_of_day'] * auto_array['vat'] * auto_array['currency_rate'] / auto_array['eurbuy']);
    pprice_total_val = Math.round(auto_array['cost'] * auto_array['vat'] * auto_array['profit_rate'] * auto_array['currency_rate'] *  auto_array['qua'] /  auto_array['eurbuy']);
    supplement_rate_val = Math.round(auto_array['supplement'] * auto_array['profit_rate'] * auto_array['no_of_day'] * auto_array['currency_rate'] / auto_array['eurbuy']);


    if(!isNaN(pprice_val) && pprice_val != 'Infinity') {
        pprice.val(pprice_val);
    }
    if(!isNaN(price_val) && price_val != 'Infinity') {
        price.val(price_val);
    }
    if(!isNaN(total_cost_val) && total_cost_val != 'Infinity') {
        total_cost.val(total_cost_val);
    }

    if(!isNaN(pprice_total_val) && pprice_total_val != 'Infinity') {
        pprice_total.val(pprice_total_val);
    }

    if(!isNaN(supplement_rate_val) && supplement_rate_val != 'Infinity') {
        supplement_rate.val(supplement_rate_val);
    }



      form_data = $(this).closest('tr').find('input,select').serialize();
            $.ajax({
                    data: {
                        action: 'update_price',
                        form_data: form_data,
                    },
                    url: 'updates_ok.php',
                    type: 'post',
                    beforeSend: function() {

                    },
                    success: function(data) {
                        if(data == 1){
                        alert('update sucessful')}
                    }
                });
        });


        };

        </script>

<script>
        window.onload = function() {

            $(".day_record").change(function() {
                var auto_array = {};

                //Step 1- On change use The closest() method to get the all input elements value of selected element row.
                form_data = $(this).closest('tr').find('input, select');

                //Step 2- On change Use map to store input elements value with name as key in the array.
                var myArray = $.map(form_data, function(element) {
                        auto_array[element.name] = element.value;
                        //return {name: element.name, value: element.value};
                });

    console.log(myArray);
    var pprice = $(this).closest('tr').find('.pprice');
    var price = $(this).closest('tr').find('.price');
    var total_cost = $(this).closest('tr').find('.total_cost');
    var pprice_total = $(this).closest('tr').find('.pprice_total');
    var supplement_rate = $(this).closest('tr').find('.supplement_rate');


    pprice_val = Math.round(auto_array['cost'] * auto_array['profit_rate'] * auto_array['currency_rate'] * auto_array['vat'] / auto_array['eurbuy']);
    price_val = Math.round(auto_array['cost'] * auto_array['profit_rate'] * auto_array['currency_rate'] * auto_array['vat'] / auto_array['eurbuy']) * auto_array['no_of_day'] * auto_array['qua'];
    total_cost_val = Math.round(auto_array['cost'] * auto_array['qua'] * auto_array['no_of_day'] * auto_array['vat'] * auto_array['currency_rate'] / auto_array['eurbuy']);
    pprice_total_val = Math.round(auto_array['cost'] * auto_array['vat'] * auto_array['profit_rate'] * auto_array['currency_rate'] *  auto_array['qua'] /  auto_array['eurbuy']);
    supplement_rate_val = Math.round(auto_array['supplement'] * auto_array['profit_rate'] * auto_array['no_of_day'] * auto_array['currency_rate'] / auto_array['eurbuy']);


    if(!isNaN(pprice_val) && pprice_val != 'Infinity') {
        pprice.val(pprice_val);
    }
    if(!isNaN(price_val) && price_val != 'Infinity') {
        price.val(price_val);
    }
    if(!isNaN(total_cost_val) && total_cost_val != 'Infinity') {
        total_cost.val(total_cost_val);
    }

    if(!isNaN(pprice_total_val) && pprice_total_val != 'Infinity') {
        pprice_total.val(pprice_total_val);
    }

    if(!isNaN(supplement_rate_val) && supplement_rate_val != 'Infinity') {
        supplement_rate.val(supplement_rate_val);
    }



      form_data = $(this).closest('tr').find('input,select').serialize();
            $.ajax({
                    data: {
                        action: 'update_data',
                        form_data: form_data,
                    },
                    url: 'updates_ok.php',
                    type: 'post',
                    beforeSend: function() {

                    },
                    success: function(data) {
                        if(data == 1){
                        alert('update sucessful');}
                    }
                });
        });


        };

        </script>

update.php

<?php

if($_POST['action'] == 'update_price'){
//parse the serialize data
parse_str($_POST['form_data'], $my_form_data);

/*echo "<pre>";
print_r($my_form_data);*/


header("Content-Type: text/html; charset=utf-8");
include("connMysql.php");
$seldb = @mysql_select_db("phpmember");
if (!$seldb) die("cannot connect to the database！");

$id = $my_form_data['id']; 
$gp_name = $my_form_data['gp_name']; 
$price = $my_form_data['price'];
$cost = $my_form_data['cost']; 
$no_of_day = $my_form_data['no_of_day']; 
$total_cost = $my_form_data['total_cost']; 
$profit_rate = $my_form_data['profit_rate']; 
$currency_rate = $my_form_data['currency_rate']; 
$eurbuy = $my_form_data['eurbuy']; 
$pprice = $my_form_data['pprice'];
$qua = $my_form_data['qua']; 
$supplement = $my_form_data['supplement']; 
$supplement_rate = $my_form_data['supplement_rate']; 
$pprice_total = $my_form_data['pprice_total']; 
$vat = $my_form_data['vat'];    
$type = $my_form_data['type'];  
$supplier = $my_form_data['typeahead']; 


$sql= $query = $finalquery = $sqlresult = '';

if($cost){
$sql.="cost='$cost',";
}

if($profit_rate){
$sql.="profit_rate='$profit_rate',";
}

if($currency_rate){
$sql.="currency_rate='$currency_rate',";
}   

if($price){
$sql.="price='$price',";
}
if($pprice){
$sql.="pprice='$pprice',";
}

if($eurbuy){
$sql.="eurbuy='$eurbuy',";
}

if($no_of_day){
$sql.="no_of_day='$no_of_day',";
}

if($total_cost){
$sql.="total_cost='$total_cost',";
}

if($qua){
$sql.="qua='$qua',";
}

if($supplement){
$sql.="supplement='$supplement',";
}

if($supplement_rate){
$sql.="supplement_rate='$supplement_rate',";
}   

if($pprice_total){
$sql.="pprice_total='$pprice_total',";
}

if($vat){
$sql.="vat='$vat',";
}       


if($type){
$sql.="type='$type',";
}

if($supplier){
$sql.="supplier='$supplier',";
}       


$finalquery = rtrim($sql,',');
$query="UPDATE `gp_info` SET $finalquery where id=$id";

$sqlresult=mysql_query($query);
if($sqlresult){
$reback=1;
}else{
$reback=0;
}
echo $reback;
}

if($_POST['action'] == 'update_data'){
//parse the serialize data
parse_str($_POST['form_data'], $my_form_data);

/*echo "<pre>";
print_r($my_form_data);*/

$gp_name = $my_form_data['gp_name']; 
$date = $my_form_data['date']; 
$day = $my_form_data['day']; 
$day_week = $my_form_data['day_week'];  
$country = $my_form_data['country'];    
$city = $my_form_data['city']; 
$pax = $my_form_data['pax'];    
$profit_rate = $my_form_data['profit_rate']; 

$sql= $query = $finalquery = $sqlresult = '';


if($date){
$sql.="date='$date',";
}   

if($day){
$sql.="day='$day',";
}

if($day_week){
$sql.="day_week='$day_week',";
}       

if($country){
$sql.="country='$country',";
}

if($city){
$sql.="city='$city',";
}       

if($pax){
$sql.="pax='$pax',";
}

if($profit_rate){
$sql.="profit_rate='$profit_rate',";
}   

$finalquery = rtrim($sql,',');
$query="UPDATE `gp_info` SET $finalquery where gp_name='$gp_name' AND         date='$date' AND day='$day'";
$sqlresult=mysql_query($query);
if($sqlresult){
$reback=1;
}else{
    $reback=0;
}
echo $reback;
}
?>

我已经尝试在Internet上进行搜索，但是找不到适合我情况的相关信息，希望有人可以帮助我。

Answer 1

第1步- 进行模糊/更改时，请使用mostest（）方法获取所选元素行的所有输入元素值。 https://api.jquery.com/closest/

第2步-使用映射将名称为键的输入元素值存储在数组中。 http://api.jquery.com/jQuery.map/

步骤3 -从数组中获取所需的值并进行计算。

第4步--如果计算出的值不是NaN和Infinity，则将该值添加到相应的字段中。

第5步-在update.php文件中，在输入字段模糊/更改时，更新表中不为空的列。

update.php文件。

    <?php

if($_POST['action'] == 'update_price'){
//parse the serialize data
parse_str($_POST['form_data'], $my_form_data);

/*echo "<pre>";
print_r($my_form_data);*/


header("Content-Type: text/html; charset=utf-8");
include("connMysql.php");
$seldb = @mysql_select_db("phpmember");
if (!$seldb) die("cannot connect to the database！");

$id = $my_form_data['id']; 
$gp_name = $my_form_data['gp_name']; 
$cost = $my_form_data['cost']; 
$profit_rate = $my_form_data['profit_rate']; 
$currency_rate = $my_form_data['currency_rate']; 
$eurbuy = $my_form_data['eurbuy']; 
$pprice = $my_form_data['pprice']; 

$sql= $query = $finalquery = $sqlresult = '';

if($cost){
    $sql.="cost='$cost',";
}

if($profit_rate){
    $sql.="profit_rate='$profit_rate',";
}

if($currency_rate){
    $sql.="currency_rate='$currency_rate',";
}

if($pprice){
    $sql.="pprice='$pprice',";
}

if($eurbuy){
$sql.="eurbuy='$eurbuy',";
}

$finalquery = rtrim($sql,',');
$query="UPDATE `gp_info` SET $finalquery where id=$id";

$sqlresult=mysql_query($query);
if($sqlresult){
    $reback=1;
}else{
    $reback=0;
}
echo $reback;
}

?>

HTML代码。

<script>
            window.onload = function() {

                $(".cal_amount").change(function() {
                    var auto_array = {};

                    //Step 1- On change use The closest() method to get the all input elements value of selected element row.
                    form_data = $(this).closest('tr').find('input, select');

                    //Step 2- On change Use map to store input elements value with name as key in the array.
                    var myArray = $.map(form_data, function(element) {
                            auto_array[element.name] = element.value;
                            //return {name: element.name, value: element.value};
                    });


                console.log(myArray);
                var pprice = $(this).closest('tr').find('.pprice');
                var price = $(this).closest('tr').find('.price');
                var total_cost = $(this).closest('tr').find('.total_cost');
                var pprice_total = $(this).closest('tr').find('.pprice_total');
                var supplement_vat = $(this).closest('tr').find('.supplement_vat');

                //Step 3-  Get the required value from the array and calculate.
                pprice_val = auto_array['cost'] * auto_array['profit_rate'] * auto_array['currency_rate'] / auto_array['eurbuy'];
                price_val = auto_array['cost'] * auto_array['profit_rate'] * auto_array['qua'] * auto_array['no_of_day'] * auto_array['currency_rate'] / auto_array['eurbuy'];
                total_cost_val = auto_array['cost'] * auto_array['qua'] * auto_array['no_of_day'] * auto_array['vat'] * auto_array['currency_rate'] / auto_array['eurbuy'];
                pprice_total_val = auto_array['cost'] * auto_array['vat'] * auto_array['profit_rate'] * auto_array['currency_rate'] *  auto_array['qua'] /  auto_array['eurbuy'];
                supplement_vat_val = auto_array['supplement_rate'] * auto_array['profit_rate'] * auto_array['no_of_day'] * auto_array['currency_rate'] / auto_array['eurbuy'];

                //Step 4 - If the calculated value is not NaN and Infinity, add that value in the corresponding field.
                if(!isNaN(pprice_val) && pprice_val != 'Infinity') {
                    pprice.val(pprice_val);
                }
                if(!isNaN(price_val) && price_val != 'Infinity') {
                    price.val(price_val);
                }
                if(!isNaN(total_cost_val) && total_cost_val != 'Infinity') {
                    total_cost.val(total_cost_val);
                }

                if(!isNaN(pprice_total_val) && pprice_total_val != 'Infinity') {
                    pprice_total.val(pprice_total_val);
                }

                if(!isNaN(supplement_vat_val) && supplement_vat_val != 'Infinity') {
                    supplement_vat.val(supplement_vat_val);
                }



                form_data = $(this).closest('tr').find('input, select').serialize();
                $.ajax({
                        data: {
                            action: 'update_price',
                            form_data: form_data,
                        },
                        url: 'ajax.php',
                        type: 'post',
                        beforeSend: function() {

                        },
                        success: function(data) {
                            if(data == 1){
                                alert('update sucessful');
                            }
                        }
                    });
            });


            };

            </script>


           <?php foreach($queryRecords as $res) :?>
            <tr>
            <input name="id" type="hidden" class="id" value="10">
            <input name="gp_name" type="hidden" class="gp_name">
            <td><input name="no_of_day" type="text" class="cal_amount no_of_day"></td>
            <td><input name="qua" type="text" class="cal_amount qua"></td>
            <td><input name="cost" type="text" class="cal_amount cost"></td>
            <td><input name="profit_rate" type="text" class="cal_amount profit_rate"></td>

           <td>
    <select name="currency_rate" class="cal_amount currency_rate">
                <option selected value=""><?php echo $res["currency_rate"];?></option>
                <option value="<?php echo $nok;?>">[NOK] <?php echo $nok;?></option>
                <option value="<?php echo $dkk;?>">[DKK] <?php echo $dkk;?></option>
                <option value="<?php echo $isk;?>">[ISK] <?php echo $isk;?> 
    </option>
            </select>
        </td>

            <td><input name="eurbuy" type="text" class="cal_amount eurbuy"></td>
            <td><input name="pprice" type="text" class="cal_amount pprice"></td>
            <td><input name="price" type="text" class="cal_amount price"></td>

            <!-- add supplement_rate in form -->
            <td><input name="supplement_rate" type="text" class="cal_amount supplement_rate"/></td>


            <td class="editable-col" col-index='17'>test</td>
            <td><input name="supplement_vat" type="text" class="cal_amount supplement_vat"></td>

            </tr>
            <?php endforeach;?>
                            </tbody>
                            </table>

Answer 2

您应该使用PUT或POST而不是GET来更新数据。

PUT vs. POST in REST

要发布数据，下面的代码会将数据发布到定义的url并显示带有服务器响应的警报。

const http = new XMLHttpRequest();
const url = 'update.php';
const params = "id="+id+"&cost="+cost+"&profit_rate="+profit_rate+"&pprice="+pprice+"&currency_rate="+currency_rate+"&eurbuy="+eurbuy;
http.open('POST', url, true);
// Set header of the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {//Call a function when the state changes.
    // state 4 = ready, 200 status code = Success
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

有关http状态代码https://developer.mozilla.org/fr/docs/Web/HTTP/Status

的更多信息

在您的update.php中，使用$ _POST或$ _PUT而不是$ _GET检索数据。

Answer 3

是的，如果您使用JavaScript构建表而不是使用PHP从后端呈现表，这将很容易在

xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
    // build the row html like this 
    row = ''
    row += "<td><input name="cost" type="text" id="cost" value="+ cost+"></td>"
    // do the same for each column  
    // here get the DOM element of the table body and append the new row to it
    $('#_editable_table').append(row)
    //by inserting the form new rows to it using javascript 
  }
}

您正在使用GET而不是POST创建数据
您在index.php中使用JQUERY，但使用了底层JavaScript API 在index.js中发送ajax请求

我认为您正在学习ajax和php的起步阶段，我认为您需要进行有组织的课程，因为这里有很多过时的代码，例如mysql_query已过时，我可以建议一些不错的免费文章和youtube频道，以了解更多信息（如果您喜欢

如何更新数据库中的所有行并显示更新的数据而无需刷新？

3 个答案: