在HTML中传递模版变量的值给Javascript

Question

我在用flask+mysql构建一个库管软件。其中在更改字段的页面，我想通过js实现为待编辑的数据自动填充原始数据，代码如下。

显示原始数据的HTML代码：

{% for item in commodity %}
  <tr class="align-middle">
    <td>{{ item[0] }}</td>
    <td>{{ item[1] }}</td>
    <td>{{ item[3] }}</td>
    <td>{{ item[4] }}</td>
    <td>{{ item[5] }}</td>
    <td>{{ item[2] }}</td>
    <td>
      <div data-bs-toggle="modal" data-bs-target="#alt_modal">
        <button class="btn-outline-info btn btn-sm" type="button" onclick="setValues({{ item }})">编辑</button>
      </div>
      <div data-bs-toggle="modal" data-bs-target="#stock_in_modal">
        <button class="btn-outline-info btn btn-sm" type="button">入库</button>
      </div>
    </td>
  </tr>
{% endfor %}

编辑字段页面的HTML代码：

<form method="post" class="needs-validation" novalidate>
  <div class="modal fade" id="alt_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          ...
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="alt_com_name" class="form-label">商品名称</label>
            <input type="text" class="form-control" id="alt_com_name" name="alt_com_name" required>
          </div>
          <div class="mb-3">
            <label for="alt_com_id" class="form-label">商品编号</label>
            <input type="text" class="form-control" id="alt_com_id" value="{{ r_num }}" name="alt_com_id" disabled readonly>
          </div>
          <div class="mb-3">
            <label for="alt_com_cate" class="form-label">商品类别</label>
            <select class="form-select" name="alt_com_cate" id="alt_com_cate" required>
              ...
            </select>
          </div>
          <div class="mb-3">
            <label for="alt_com_unit" class="form-label">单位</label>
            <select class="form-select" name="alt_com_unit" id="alt_com_unit" required>
            </select>
          </div>
          <div class="mb-3">
            <label for="alt_com_spec" class="form-label">规格</label>
            <input type="text" class="form-control" id="alt_com_spec" name="alt_com_spec" required>
          </div>
          <div class="mb-3">
            <label for="alt_com_desc" class="form-label">描述</label>
            <input type="text" class="form-control" id="alt_com_desc" name="alt_com_desc" required>
          </div>
        </div>
        <div class="modal-footer">
          ...
        </div>
      </div>
    </div>
  </div>
</form>

JS中的setValues函数:

function setValues(item){
  let id = item[0]
  let name = item[1]
  let cate = item[3]
  let unit = item[4]
  let spec = item[5]
  let desc = item[2]
  document.getElementById("alt_com_id").value = id
  document.getElementById("alt_com_name").value = name
  document.getElementById("alt_com_cate").value = cate
  document.getElementById("alt_com_unit").value = unit
  document.getElementById("alt_com_spec").value = spec
  document.getElementById("alt_com_desc").value = desc
    */
}

我通过chrome的开发者页面查看到在HTML中setValues的参数是setValues((2, name, cate, unit, spec, desc))，但在js中实际传进来的参数只有desc一个，这是为什么呢？我应该怎么更改才能达到我预想的效果呢？

Answer 1

你好，在吗，我给你解决