Question

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

链接到屏幕截图

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

这是我的php表代码：

国家，地区，位置和地名的值存储在下拉列表中。

<?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

我假设有一个Done按钮，当用户准备扫描表进行更改并更新数据库时，将按下该按钮。

读取并存储表的当前值（在用户进行任何更改之前）
单击“完成”按钮时，逐行扫描表并将存储的值与当前值进行比较
找到更改后，将数据发送到一个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

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

1 个答案: