如何更新TD文本框附近的值？

Posted 2023-05-08

【中文标题】如何更新TD文本框附近的值？

【英文标题】：How to update near by TD text box value?

【发布时间】：2020-11-20 23:29:36

【问题描述】：

我正在开发购物车应用程序。在那里，我需要根据用户以前存储为本地 JSON 的订单来更新我的产品屏幕。我正在从服务器返回的 JSON 构建我的产品屏幕。

现在我想自动更新从服务器返回的每个产品的数量，并与之前订单的本地 JSON 进行比较。

例如产品屏幕有项目“SNICKERS”，之前的订单也有相同数量的项目，我需要在表格中“SNICKERS”行 TD 的文本框中填写这些数量值。请参考我附上的图片。

同样，如果之前的订单商品和下订单屏幕商品匹配，我需要更新所有数量值。我正在匹配产品代码，我已经完成了，但我不知道如何更新文本框中的数量值。

本地 JSON：

Object order_id: "9ec3bd80-91fc-0138-c8e0-0cc47ac946e0", product_code: "1000", quantity: 1, …

来自服务器的 JSON

Object macs_menu_id: "1047-2000000365", header_text: null, total_price: "1.68", …
4:Object macs_menu_id: "1047-2000000365", header_text: null, total_price: "1.04", …
header_text:null
header_text:null
indigent_kit:0
macs_menu_id:"1047-2000000365"
menu_prod_cat:"CNDY"
product_code:"1000"
product_desc:"SNICKERS - K"
quan_limit:0
sort_order:910
total_price:"1.68"

我比较两个 json 产品代码的代码如下

for (const x in prev_orders) 
              for (const y in response.payload.filter(d => d.product_code != null && d.macs_menu_id === this.InmateMacMenu).sort((a, b) => a.sort_order - b.sort_order)) 
                if (prev_orders[x].product_code === response.payload[y].product_code) 
                  if ($('.mat-elevation-z8 td:contains("' + prev_orders[x].product_code + '")')) 
                    // if product code matched
                    console.log('product code matched ' + response.payload[y].product_code);                
                    $('.mat-elevation-z8 td:contains("' + prev_orders[x].product_code + '")').closest('td').find('input').val(prev_orders[x].quantity);
                  
                 else 
                  console.log('not matched');
                
              
            

我在控制台中收到产品代码匹配消息。现在我需要更新文本框中的数量。谁能帮我做到这一点？谢谢

下订单屏幕

控制台消息

还有我的 html 代码

    <table id="products" mat-table [dataSource]="dataSource" class="mat-elevation-z8">
              <ng-container matColumnDef="menu_prod_cat">
                  <th mat-header-cell *matHeaderCellDef style="width: 35px;"> Category </th>
                  <td mat-cell *matCellDef="let data; let i = index" [attr.rowspan]="getRowSpan('menu_prod_cat', i)" [style.display]="getRowSpan('menu_prod_cat', i) ? '' : 'none'"> data.menu_prod_cat </td>
              </ng-container>
              <ng-container matColumnDef="product_code">
                  <th mat-header-cell *matHeaderCellDef> Code </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="'highlight': selectedRowIndex == data.product_code"> data.product_code </td>
              </ng-container>
              <ng-container matColumnDef="product_desc">
                  <th mat-header-cell *matHeaderCellDef> Description </th>
                  <td mat-cell *matCellDef="let data" [ngClass]="'highlight': selectedRowIndex == data.product_code" (click)="get_image_binary(data)"> data.product_desc  </td>
              </ng-container>
              <ng-container matColumnDef="total_price">
                  <th mat-header-cell *matHeaderCellDef>Price </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="'highlight': selectedRowIndex == data.product_code">
                      data.total_price | currency </td>
              </ng-container>
              <ng-container matColumnDef="quan_limit">
                  <th mat-header-cell *matHeaderCellDef style="width: 20px;">Quantity Limit </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="'highlight': selectedRowIndex == data.product_code">
                      data.quan_limit  </td>
              </ng-container>
              <ng-container matColumnDef="Quantity">
                  <th mat-header-cell *matHeaderCellDef style="width: 35px;"> Quantity </th>
                  <td mat-cell *matCellDef="let data; let i = index" (click)="get_image_binary(data)" [ngClass]="'highlight': selectedRowIndex == data.product_code">
                    <!-- <ng-numeric-input [layout]="'tel'" [class]="'form-control'"  maxlength=data.quan_limit  [id]="'txtqtyi'" [placeholder]="'0'"  [(ngModel)]="data.quantity" (keyup)="quantityModelChange($event,data)" [entertext]="'Next'"></ng-numeric-input> -->
                     <input type="number" id=txtqtyi pattern="[0-9]*" inputmode="numeric" min="1" max=data.quan_limit [(ngModel)]="data.quantity" (keyup)="quantityModelChange($event,data)" class="Col-tdinput">
                      <!-- <input type="number" min="1" max=data.quan_limit (ngModel)="data.quantity" class="Col-tdinput" (keyup)="quantityKeypress($event,data)" pattern="[0-9]*">
                      (ngModelChange)="quantityModelChange($event,data)"
                      -->
                  </td>
              </ng-container>
              <ng-container matColumnDef="Total">
                  <th mat-header-cell *matHeaderCellDef> Total </th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)" [ngClass]="'highlight': selectedRowIndex == data.product_code">
                      <p *ngIf="data.quantity > 0">data.total_price * data.quantity | currency</p>
                  </td>
              </ng-container>
              <ng-container matColumnDef="Action">
                  <th mat-header-cell *matHeaderCellDef></th>
                  <td mat-cell *matCellDef="let data" (click)="get_image_binary(data)">
                      <button class="Col-Cartbtn" (click)="IncermentProduct(data)">+</button>
                      <button class="Col-Cartbtn" [disabled]="data.quantity==0" (click)="DecrementProduct(data)">-</button>
                  </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
          </table>

【问题讨论】：

能分享一下html代码吗？

一定要检查我的问题，我会在那里添加html代码

你想要这个在 Angular 还是 jQuery 中？

您确定要使用 jQuery 吗？好像你的项目是基于 AngularJS

angular 或 jQuery 什么都可以，如果你们提供我的解决方案

【参考方案1】：

嗨，我自己找到了答案。它很简单，我只是将本地 json 数量值分配给服务器 json 数量。

因为我使用 data.quantity 属性绑定了我的文本框，所以当我比较产品代码时，我会分配值。检查我的附加代码。谢谢你们的cmets

for (const x in prev_orders) 
          // tslint:disable-next-line:max-line-length
          for (const y in response.payload.filter(d => d.product_code != null && d.macs_menu_id === this.InmateMacMenu).sort((a, b) => a.sort_order - b.sort_order)) 
            if (prev_orders[x].product_code === response.payload[y].product_code) 
              // tslint:disable-next-line:only-arrow-functions
              $('tr').each(function() 
                if ($('td:contains("' + prev_orders[x].product_code + '")')) 
                  // if product code matched
                  response.payload[y].quantity = prev_orders[x].quantity;
                  self.addProductToCart(response.payload[y], response.payload[y].quantity);
                
              );
             else 
              console.log('not matched');