javascript - 如何更新动态 PHP 表的每一行

Question

我试图根据该行最后一列中输入的“Amt”来更改每行的数量。这是一个基于区域# 的搜索表。本质上，我希望用户能够输入位置并将批量项目从当前区域移动到输入的新区域。如果 Amt 等于 0，则该行将被跳过并且不会发生更新。否则，它将使用新数据在数据库中创建一个新行。

屏幕截图链接

https://photos.google.com/photo/AF1QipP2HMqNFmv208VOOl2DvppPGiZkv7f_keD_f8tj

这是我的 php 表代码:

国家、地区、位置和地点 ID 的值存储在下拉列表中。

<?php

if (isset($_GET['Placeid'])) {
    $moveplace = $_GET['Placeid'];
    $sql = "SELECT *
        FROM Parts p, Locations l
        WHERE Placeid = '$moveplace' and p.locationid = l.locationid";

    $result = mysqli_query($conn, $sql);
    $queryResult = mysqli_num_rows($result);

    if ($queryResult > 0) {
        $i = 1;
        while ($row = mysqli_fetch_assoc($result)) {
            if ($i % 2 == 0) {
                $bgcolor = "rgba(199, 199, 199, 0.3)";
            } else {
                $bgcolor = "rgba(199, 199, 199, 0.8)";
            }

            echo "<div>
            <input type='hidden' value='".$row['id']."' name='hiddensearchid'>
            <input type='hidden' value='".$row['PartDescription']."' name='movedesc'>
            <input type='hidden' value='".$row['BrandName']."' name='moveBN'>
            <input type='hidden' value='".$row['CategoryName']."' name='moveCN'>
            <input type='hidden' value='".$row['NSN_number']."' name='moveNSN'>
            <input type='hidden' value='".$row['Image']."' name='moveimage'>
                <table class=searcht style='background-color:$bgcolor'>
                    <tbody>
                        <tr>
                            <td value='".$row['PartNum']."' name='movepart'>".$row['PartNum']."</td>
                            <td value='".$row['ModelNum']."' name='movemodelnum'>".$row['ModelNum']."</td>
                            <td>".$row['Country']."</td>
                            <td>".$row['Region']."</td>
                            <td>".$row['Location']."</td>
                            <td>".$row['Placeid']."</td>
                            <td style='width:100px' value='".$row['UnitNum']."' name='moveunitnum'>".$row['UnitNum']."</td>
                            <td style='width:50px;' value='".$row['QTY']."' name='moveqty'>".$row['QTY']."</td>
                            <th style='width:50px; border-right:none;'><input style='width:20px; text-align:center;' value='0' type=text name='moveamt'></th>
                        </tr>
                    </tbody>
                </table>
            </div>";
            $i++;
        }
        echo "<tr><td></td><td><input class='submit' type='submit' value='Confirm' name='submitPlacemove' onclick=\"return confirm ('Are you sure you want to submit?')\"></td></tr></form>";
    }
}

我认为我需要使用某种 JavaScript，但我对它很陌生。如有任何帮助，我们将不胜感激。

Answer 1

我假设有一个完成按钮，用户在准备好扫描表中的更改并更新数据库时将按下该按钮。

1. 读取并存储表的当前值(在任何用户更改之前)

2. 单击“完成”按钮后，逐行扫描表格并将存储的值与当前值进行比较

3. 当发现更改时，将数据发送到 PHP 文件，该文件的作用是使用新数据更新后端表(注意:您需要发送新数据和项目 ID，所以它知道将新数据放在哪里)

这是一个非常粗略的、未经测试的简单示例，代码如下:

var arr_old = [];
var arr_new = [];
$.each( $('table tr'), function(i, v){
  if (i==0) return true; //ignore header row (return true === continue)
  let currval = $(this).find('td:nth-child(3) index').val();
  arr_old.push(currval);
});

$('#btnDone').click(function(){
  $.each( $('table tr'), function(i, v){
    if (i==0) return true; //ignore header row (return true === continue)
    let row_id = $(this).find('td:nth-child(1)').text(); //1 or 2 or ...
    let newval = $(this).find('td:nth-child(3) index').val();
    if ( newval !== arr_old[i+1] ){
        $.ajax({
          type = 'post',
           url = 'path/to/your/php_file.php',
          data = 'item_id=' +row_id+ '&new_val=' +newval
        }).done(function(recd){
          console.log('Updated row ' + recd);
        });
    }
});

table{border-collapse:collapse;}
th,td{border:1px solid #ccc;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<table>
  <tr><th>ID</th><th>Col 1</th><th>Edit Col</th></tr>
  <tr><td>1</td><td>Summat</td><td><input class="bob" type="text" value="car" /></td></tr>
  <tr><td>2</td><td>Other</td><td><input class="bob" type="text" value="bike" /></td></tr>
  <tr><td>3</td><td>Summat</td><td><input class="bob" type="text" value="foot" /></td></tr>
</table>

<button id="btnDone">Done</button>

如果您是 javascript 新手，我建议使用 jQuery these reasons

<小时/>

引用文献:

update list with jquery & ajax

http://learn.jquery.com/about-jquery/how-jquery-works/

SLAKS jQuery Tutorial - Use right-arrow to display next bit of text