如何使用 jQuery 获取动态 table 的输入字段值
How to use jQuery to get Input Field Value of dynamic table
我目前正在使用 Meteor/Blaze 框架 构建一个 table。 table 中的行将根据所选供应商而变化。我已将 class={{_id}}
添加到该字段,并将 q.{{_id}}
、 lot.{{_id}}
和 exp.{{_id}}
添加到数量、批次和过期日期 INPUT .
我正在尝试编写一个提交事件来获取这些值并将其传递给 Mongo 数据库。请建议一种循环遍历这些行以获取值的好方法。
网站图片
部分代码
接收表单模板
<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){
????
})
}
})
第 4 行在 items 之前缺少一个 var,第 6、7 行也是如此。
之后我想你可以在它们上循环。(但它们将来自数据库)。
但是如果你想获取输入值,为什么要在 MongoDB 中请求数据?
此外,我更希望获得 DB 值作为承诺。
var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});
并以这种方式取回物品:
items.then(function(item){console.log(item)})
我目前正在使用 Meteor/Blaze 框架 构建一个 table。 table 中的行将根据所选供应商而变化。我已将 class={{_id}}
添加到该字段,并将 q.{{_id}}
、 lot.{{_id}}
和 exp.{{_id}}
添加到数量、批次和过期日期 INPUT .
我正在尝试编写一个提交事件来获取这些值并将其传递给 Mongo 数据库。请建议一种循环遍历这些行以获取值的好方法。
网站图片
部分代码
接收表单模板
<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){
????
})
}
})
第 4 行在 items 之前缺少一个 var,第 6、7 行也是如此。
之后我想你可以在它们上循环。(但它们将来自数据库)。
但是如果你想获取输入值,为什么要在 MongoDB 中请求数据? 此外,我更希望获得 DB 值作为承诺。
var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});
并以这种方式取回物品:
items.then(function(item){console.log(item)})