【发布时间】：2021-03-13 09:59:24
【问题描述】：
我想要我将单击其复选框的同一行的数据。我的表格行在 for 循环中 我想在最后显示总价，但它显示所有框。 我在视图中按名称取值，但这里我的表单组件处于 for 循环中，所以如果数据不存在，它不应该出现。
这是我的 index.html：
{% for j in package %}
<tr class="valid-container">
<td style="cursor:pointer;">
<input type="checkbox" name="c1" > {{ j.visa_type }}
</td>
<td height="52">
<select class="custom-select processing_type" name="processing_type" data-id="{{ j.id }}" required>
<option value="{{ j.price }}" selected>Normal</option>
<option value="{{ j.express_price }}">Express</option>
</select>
</td>
<td height="52">
<select class="custom-select no_of_person" name="no_of_person" data-id="{{ j.id }}" required>
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</td>
<td width="190" height="60">
<div class="input-group date" data-date-format="dd.mm.yyyy">
<div class="input-group mb-2">
<input type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
<div class="input-group-text"><i class="ti-calendar"></i></div>
<div class="input-group-addon">
</div>
<div class="input-group-prepend">
</div>
</div>
</div>
</td>
<td>{{ j.currency_type }} <output name="result" class="package_price">{{ j.price }}</output>.00</td>
</tr>
{% endfor %}
这是我的 package.js：
$('.valid-container').ready(function() {
var date = $(this).find('#date').attr('required',true);
$('select').on('change', function() {
var id = $(this).data("id");
var total = $('select[name=processing_type]').val() * $('select[name=no_of_person]').val();
var price = $(this).find('.package_price').text();
});
});
【问题讨论】：
-
您不应该在循环的 html 模板中使用静态
id，因为id不再是唯一的，这可能/确实会弄乱选择器。 -
嗨，您的代码中的
package_price在哪里？另外，你需要在哪里获得最后的总数td？ -
好的，我会删除它，但如果你有解决方案，请告诉我，因为我从昨天开始就被困在里面了
-
哦，对不起，我必须编辑问题等待
-
@swati 看到我在最后一个问题中添加了 package_price 类，请帮助我
标签： javascript python jquery django django-templates