【问题标题】:How to use jQuery to get Input Field Value of dynamic table如何使用jQuery获取动态表的输入字段值
【发布时间】:2018-02-21 21:22:22
【问题描述】:

我目前正在使用 Meteor/Blaze 框架 来构建表格。表格中的行将根据所选供应商而改变。我已将class={{_id}} 添加到字段中,并将q.{{_id}}lot.{{_id}}exp.{{_id}} 添加到数量、批次和到期日期INPUT

我正在尝试编写一个提交事件来获取这些值并将其传递给 Mongo 数据库。请提出一种遍历这些行以获取值的好方法。

网站图片

部分代码

receiveForm 模板

<template name="receiveForm">
...
<select data-placeholder="Select an option" class="sel2js form-control select select-primary" id="supplier_sel" name="supplier">
      {{#each suppliers}}
        {{> sel_supplier}}
      {{/each}}
    </select>
  </div>
  <!-- Receive Lot Table -->
  <table class="table table-bordered table-hover">
    <thead>
      <tr>
        <th>Product Name</th>
        <th>Current Quantity</th>
        <th>Unit of Measurement</th>
        <th>Receive Quantity</th>
        <th>Lot No</th>
        <th>Exp Date (DD/MM/YYYY)</th>
      </tr>
    </thead>
    <tbody>
      {{#each items}}
        {{> receiveRow2}}
      {{/each}}
    </tbody>
</table>
<div class="text-center">
  <button type="submit" class="btn btn-embossed btn-primary btn-wide" id="submitNewReceive" value="Submit">Submit</button>
  <button type="reset" class="btn btn-embossed btn-warning btn-wide" value="Reset">Reset</button>
</div>
</form>

receiveRow2 模板

<template name="receiveRow2">
  <tr id="{{_id}}">
    <td class="pn">{{name}}</td>
    <td class="pq">{{totalQuantity}}</td>
    <td>{{uomid.name}} ({{uomid.unit}} {{uomid.unitname}}/{{uomid.name}})</td>
    <td><input type="text" class="form-control" name="q.{{_id}}" placeholder="Quantity" /></td>
    <td><input type="text" class="form-control" name="lot.{{_id}}" placeholder="Lot No XX/YYYY" /></td>
    <td>
      <div class="input-group datetimepicker text-primary">
        <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        <input class="set-due-date form-control" name="exp.{{_id}}" type="text" placeholder="วัน/เดือน/ปี"/>
        <hr />
      </div>
    </td>
  </tr>
</template>

JS

Template.receiveForm.events({
  'submit form': function(event, template){
    var supplierSelected = Template.instance().supplierSelected;
    items = Products.find({suppliers: supplierSelected.get()});
    event.preventDefault();
    docdate = event.target.docdate.value;
    supplier = event.target.supplier_sel.value;
    console.log("---event---");
    console.log(docdate)
    console.log(supplier)
    items.forEach(function(item){
      ????
    })
  }
})

【问题讨论】:

    标签: javascript jquery meteor meteor-blaze


    【解决方案1】:

    在第 4 行中,它在项目之前缺少一个 var,在第 6、7 行中也是如此。

    之后我认为您可以循环使用它们。(但它们将来自数据库)。

    但是,如果您想获取输入值,为什么要在 MongoDB 中获取数据? 此外,我更愿意将 DB 值作为承诺。

    var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});
    

    并以这种方式取回物品:

    items.then(function(item){console.log(item)})
    

    【讨论】:

    • 我试图从数据库中获取 ID,因此我可以尝试找到一种方法来获取输入 name=q.ID, lot.ID 值。
    • 你想用数据库存储的值填充这些值吗?
    • 现在我正在尝试找到一种获取输入字段值的方法,以便将其填充到数据库中。
    • 我想,如果你抓住了 tbody all tr​​ 元素,你就可以得到它。如果您对这些元素进行循环处理,您可以获得所有信息,数据库更新需要什么如果您在每行中识别所有输入字段,例如额外的类、接收数量、批号、到期日期:@ 987654323@ for(var i = 0; i &lt; trs.length; i++){ var trID = foo //get all trs ID var input1Val = bar //get the input fields value ` var input2Val = foobar ` meteor.update(id, input1, input2 input3) } 你可以逐行更新你的流星集合
    猜你喜欢
    • 2015-02-12
    • 1970-01-01
    • 2015-05-03
    • 2010-09-15
    • 2020-04-06
    • 1970-01-01
    • 2022-11-25
    • 2021-05-11
    • 1970-01-01
    相关资源
    最近更新 更多