Javascript 将属性添加到<；输入>；在jQuery中，每个循环只在第一次通过时进行？

我有一个从SQL表打印“库存”的网页，并且可以通过在项目所在列中输入要删除的金额来删除库存

注意：SQL表中有行“item”和“amount”（inventory），我将amount列添加到打印的HTML表中，以便从库存中删除项目

我希望能够标记每个输入标记，使属性“name”与项目名称相等

例：

第一行-

第二行-

我使用jqueryeach循环打印每一列，并使用attr（）添加属性，但主要问题是它为每一列添加属性，但它会覆盖每一列的name属性

例：

第一次通过：

第二遍：

我所尝试的：

我试图通过添加一个if语句来解决这个问题，如果输入标记没有name属性，则只向输入添加name属性。我的想法是，在第一次传递期间，输入标记没有name属性，因此它将添加一个，然后在下一次传递期间，if条件将为false，并且不会修改输入标记

您将从代码中的注释中看到我尝试过的其他内容，但这些内容似乎都没有给出我需要的结果

以下是我用来打印HTML表的jQuery代码：

function DISPLAY_INVENTORY(JSON_DATA) {
    var COL_NAMES = ['Item', 'Inventory', 'Amount'];

    var data = jQuery.parseJSON(JSON_DATA);
    var $TABLE_OBJ = $('<table class="table table-striped" >');
    $TABLE_OBJ.attr('id', 'student_table');
    $list.append($TABLE_OBJ);

    // $(output).append($TABLE_OBJ);

    //Print a table header
    var $ROW_OBJ = $('<tr>');
    var $THEAD = $('<thead class="thead-light">');
    $THEAD.append($ROW_OBJ);
    $TABLE_OBJ.append($THEAD);

    for (var j = 0; j < COL_NAMES.length; j++) {
      var $TB_HEADER = $('<th>');
      $TB_HEADER.html(COL_NAMES[j]);
      $ROW_OBJ.append($TB_HEADER);
    }

    $TBODY = $('<tbody>');

    //Print rows
    for (var i = 0; i < data.length; i++) {
      if (i == data.length - 1) {
        $TABLE_OBJ.append($TBODY);
      }

      $ROW_OBJ = $('<tr>');
      $TBODY.append($ROW_OBJ);

      //Print columns
      $.each(data[i], function(key, value) {
        // if (i % 2 == 0) {
        //   var ITEM_NAME = value;
        // }

        $COL_OBJ = $('<td>');
        $INP_OBJ = $('<input class="text-center form-control" type="text" size="3">');
        if (!$INP_OBJ.attr('name')) {
          $INP_OBJ.attr('name', value);

          // $INP_OBJ.attr('id', ITEM_NAME);
        }

        // $INP_OBJ.attr('name', ITEM_NAME);
        // $INP_OBJ.attr('id', ITEM_NAME);
        $COL_OBJ.html(value);
        $ROW_OBJ.append($COL_OBJ);
      });

      $ROW_OBJ.append($INP_OBJ);
    }
  }

---

如果有人能帮助我，或者用逻辑为我指出正确的方向，我将不胜感激！谢谢。

用最少的代码调整来实现这一点的方法是使用一个变量，让我们称它为

rowItemName

，并且仅当

$中的
键
时才更新它的值。each（）

循环等于“item”。然后，您可以在设置输入名称时使用该变量：

$list=$（“#list”）；
函数显示\u清单（JSON\u数据）{
var COL_name=[“项目”、“库存”、“金额”]；
var data=jQuery.parseJSON（JSON_数据）；
变量$TABLE_OBJ=$（''）；
$TABLE_OBJ.attr（'id'，'student_TABLE'）；
$list.append（$TABLE_OBJ）；
//$（输出）。追加（$表_OBJ）；
//打印表格标题
变量$ROW_OBJ=$（''）；
变量$THEAD=$（''）；
$THEAD.append（$ROW_OBJ）；
$TABLE_OBJ.append（$THEAD）；
对于（var j=0；j

---

处理元素上的数据属性的一种常见方法是将

数据-

前置到属性。通过这种方式，您可以将多个属性附加到元素，而不会覆盖它们。例如，您可以编写：

$.each(data, function(key, value) {
  $INP_OBJ = $('<input class="text-center form-control" type="text" size="3">');
  $INP_OBJ.attr('data-item', value.item);
  $INP_OBJ.attr('data-amount', value.amount);
}

---

您的JSON数据是什么样子的？请使用演示问题的示例更新您的问题，最好是使用堆栈片段（

[]

工具栏按钮；）运行的问题。您正在嵌套循环中创建

输入

（

$。每个
循环嵌套在
for
循环中），但您显示的图片中只有一个
输入
。我看不出所显示的代码是如何产生您所显示的图片的。@ConstantinGroß使用PHP从SQL表中编码的JSON数据添加了编辑功能，这是一个很好的解决方案！我用我的项目名称var在某种程度上实现了这一点，但我可以看到哪里不起作用。谢谢你的帮助，我很想看看我的代码如何改进。
$.each(data, function(key, value) {
  $INP_OBJ = $('<input class="text-center form-control" type="text" size="3">');
  $INP_OBJ.attr('data-item', value.item);
  $INP_OBJ.attr('data-amount', value.amount);
}

// get amount
var amount = $INP_OBJ.attr('data-amount');