Javascript 是否自动更改2个相关输入字段？

我想修改网站中的现有表单。相关表格允许我在我的管理面板上为我的一些文章在有限的时间内介绍折扣价格（见图）。该表的数据通过mysql数据库填充。我正在使用开源电子商务软件Opencart

直到现在，我只能在“prijs”栏中介绍不含税的价格。现在我又增加了一列“Pricevatinc”。我的目标是，我还能够在“Pricevatinc”一栏中介绍包括税费在内的价格。“prijs”（不含税）和“pricevatinc”（含税）之间的比率仅为1.21

因此，如果我在“Pricevatinc”列中引入100，那么“price”列应立即更改为82.6446。类似地，当我在“prijs”列中引入100时，“pricevantic”列应立即更改为121。 输入所有数据后，我将单击“Bewaren”按钮将所有数据保存到数据库中

我的模板中现有的代码添加到下面，但我没有足够的技能用javascript或其他语言进行必要的修改。如果你能看一下我的代码，并提出必要的修改建议，或者帮我找到正确的方向，我将非常高兴

谢谢， 萨布科

脚本代码：

    case 'specials': ?>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="specials">
        <thead>
            <tr>
                <td class="text-left"><?php echo $entry_customer_group; ?></td>
                <td class="text-right"><?php echo $entry_priority; ?></td>
                <td class="text-right"><?php echo $entry_price; ?></td>
                            <td class="text-right"><?php echo $entry_pricevatinc2; ?></td>
                <td class="text-left"><?php echo $entry_date_start; ?></td>
                <td class="text-left"><?php echo $entry_date_end; ?></td>
                <td width="1"></td>
            </tr>
        </thead>
        <tbody>
            <?php $special_row = 0; ?>
            <?php foreach ($product_specials as $product_special) { ?>
            <tr id="special-row<?php echo $special_row; ?>">
                <td class="text-left"><select name="product_special[<?php echo $special_row; ?>][customer_group_id]" class="form-control">
                        <?php foreach ($customer_groups as $customer_group) { ?>
                        <?php if ($customer_group['customer_group_id'] == $product_special['customer_group_id']) { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>" selected="selected"><?php echo $customer_group['name']; ?></option>
                        <?php } else { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo $customer_group['name']; ?></option>
                        <?php } ?>
                        <?php } ?>
                    </select></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][priority]" value="<?php echo $product_special['priority']; ?>" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][price]" value="<?php echo $product_special['price']; ?>" placeholder="<?php echo $entry_price; ?>" class="form-control" /></td>
                        <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][pricevatinc]" value="<?php echo $product_special['pricevatinc']; ?>" placeholder="<?php echo $entry_pricevatinc2; ?>" class="form-control" /></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_start]" value="<?php echo $product_special['date_start']; ?>" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_end]" value="<?php echo $product_special['date_end']; ?>" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left"><button type="button" onclick="$(this).tooltip('destroy');$('#special-row<?php echo $special_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
            </tr>
            <?php $special_row++; ?>
            <?php } ?>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5"></td>
                <td class="text-left"><button type="button" onclick="addSpecial();" data-toggle="tooltip" title="<?php echo $button_special_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
            </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript"><!--
var special_row = <?php echo $special_row; ?>;
function addSpecial() {
    html  = '<tr id="special-row' + special_row + '">';
    html += '  <td class="text-left"><select name="product_special[' + special_row + '][customer_group_id]" class="form-control">';
    <?php foreach ($customer_groups as $customer_group) { ?>
    html += '      <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo addslashes($customer_group['name']); ?></option>';
    <?php } ?>
    html += '  </select></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][priority]" value="" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][price]" value="" placeholder="<?php echo $entry_price; ?>" class="form-control" /></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][pricevatinc]" value="" placeholder="<?php echo $entry_pricevatinc2; ?>" class="form-control" /></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_start]" value="" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_end]" value="" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left"><button type="button" onclick="$(\'#special-row' + special_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';
    $('#specials tbody').append(html);
    $('#special-row' + special_row + ' .date').datetimepicker({pickTime: false  });
    $('#special-row' + special_row + ' [data-toggle=\'tooltip\']').tooltip({container: 'body'});
    special_row++;
}
$('#specials tbody .date').datetimepicker({pickTime: false});
//--></script>

case'specials'：？>
有一个解决方案：


var率=1.21；
$（document）.on（'keyup'，'.prijs'，function（））{
var val=$（this.val（）；
$（this）.parent（）.find（'.pricevantic'）.val（val*rate）
})
$（document）.on（'keyup'，'pricevantic'，function（）{
var val=$（this.val（）；
$（this.parent（）.find（'.prijs'）.val（val/rate）
})





有一种解决方案：


var率=1.21；
$（document）.on（'keyup'，'.prijs'，function（））{
var val=$（this.val（）；
$（this）.parent（）.find（'.pricevantic'）.val（val*rate）
})
$（document）.on（'keyup'，'pricevantic'，function（）{
var val=$（this.val（）；
$（this.parent（）.find（'.prijs'）.val（val/rate）
})





你能制作一个JSFIDLE并展示这个问题吗Hello Yo，我试图设置一个JSFIDLE，但效果很差（以前没有使用过，我的网站还没有上线，所以我无法设置外部资源）。所以我现在觉得很复杂。无论如何，我将尝试了解它是如何工作的，因为它可能对未来的问题很有趣。Rgeards，sakko你能做一个jsfiddle并展示这个问题吗Hello Yo，我试着设置一个jsfiddle，但是结果很差（以前没有使用过，我的网站还没有上线，所以我无法设置外部资源）。所以我现在觉得很复杂。无论如何，我将尝试了解它是如何工作的，因为它可能对未来的问题很有趣。Rgerards，SaKkoHello Poletaw，谢谢你的代码片段。这似乎正是我想要的。今天晚些时候，我迫不及待地想在我的网站上实现它。我会让你知道它是否有效。非常感谢你的帮助。当做SabKoHello Poletaw，我终于成功了。我的错误是，两个相关的输入被放在两个不同的父级（td标记）中，而它们需要像代码所建议的那样位于同一个“父级”中。谢谢你的贡献！SabKoHi，我很乐意帮助你。您还可以获得“tr”（
$（this）.parents（'tr'）
或
$（this.parent（）.parent（）
）。您好，Poletaw，谢谢您的代码片段。这似乎正是我想要的。今天晚些时候，我迫不及待地想在我的网站上实现它。我会让你知道它是否有效。非常感谢你的帮助。当做SabKoHello Poletaw，我终于成功了。我的错误是，两个相关的输入被放在两个不同的父级（td标记）中，而它们需要像代码所建议的那样位于同一个“父级”中。谢谢你的贡献！SabKoHi，我很乐意帮助你。您还可以获得“tr”（
$（this）.parents（'tr'）
或
$（this.parent（）.parent（）
）。
    case 'specials': ?>
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="specials">
        <thead>
            <tr>
                <td class="text-left"><?php echo $entry_customer_group; ?></td>
                <td class="text-right"><?php echo $entry_priority; ?></td>
                <td class="text-right"><?php echo $entry_price; ?></td>
                <td class="text-right"><?php echo $entry_pricevatinc2; ?></td>
                <td class="text-left"><?php echo $entry_date_start; ?></td>
                <td class="text-left"><?php echo $entry_date_end; ?></td>
                <td width="1"></td>
            </tr>
        </thead>
        <tbody>
            <?php $special_row = 0; ?>
            <?php foreach ($product_specials as $product_special) { ?>
            <tr id="special-row<?php echo $special_row; ?>">
                <td class="text-left"><select name="product_special[<?php echo $special_row; ?>][customer_group_id]" class="form-control">
                        <?php foreach ($customer_groups as $customer_group) { ?>
                        <?php if ($customer_group['customer_group_id'] == $product_special['customer_group_id']) { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>" selected="selected"><?php echo $customer_group['name']; ?></option>
                        <?php } else { ?>
                        <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo $customer_group['name']; ?></option>
                        <?php } ?>
                        <?php } ?>
                    </select></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][priority]" value="<?php echo $product_special['priority']; ?>" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][price]" value="<?php echo $product_special['price']; ?>" placeholder="<?php echo $entry_price; ?>" class="pricevatexc" /></td>
                <td class="text-right"><input type="text" name="product_special[<?php echo $special_row; ?>][pricevatinc]" value="<?php echo $product_special['pricevatinc']; ?>" placeholder="<?php echo $entry_pricevatinc2; ?>" class="pricevatinc" /></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_start]" value="<?php echo $product_special['date_start']; ?>" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left" style="width: 20%;"><div class="input-group date">
                    <input type="text" name="product_special[<?php echo $special_row; ?>][date_end]" value="<?php echo $product_special['date_end']; ?>" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" />
                    <span class="input-group-btn">
                    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                    </span></div></td>
                <td class="text-left"><button type="button" onclick="$(this).tooltip('destroy');$('#special-row<?php echo $special_row; ?>').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
            </tr>
            <?php $special_row++; ?>
            <?php } ?>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6"></td>
                <td class="text-left"><button type="button" onclick="addSpecial();" data-toggle="tooltip" title="<?php echo $button_special_add; ?>" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
            </tr>
        </tfoot>
    </table>
</div>
<script type="text/javascript"><!--
var special_row = <?php echo $special_row; ?>;

function addSpecial() {
    html  = '<tr id="special-row' + special_row + '">';
    html += '  <td class="text-left"><select name="product_special[' + special_row + '][customer_group_id]" class="form-control">';
    <?php foreach ($customer_groups as $customer_group) { ?>
    html += '      <option value="<?php echo $customer_group['customer_group_id']; ?>"><?php echo addslashes($customer_group['name']); ?></option>';
    <?php } ?>
    html += '  </select></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][priority]" value="" placeholder="<?php echo $entry_priority; ?>" class="form-control" /></td>';
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][price]" value="" placeholder="<?php echo $entry_price; ?>" class="form-control pricevatexc" /></td>';
    //Loulie
    html += '  <td class="text-right"><input type="text" name="product_special[' + special_row + '][pricevatinc]" value="" placeholder="<?php echo $entry_pricevatinc2; ?>" class="form-control pricevatinc" /></td>';
    //Einde Loulie
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_start]" value="" placeholder="<?php echo $entry_date_start; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left" style="width: 20%;"><div class="input-group date"><input type="text" name="product_special[' + special_row + '][date_end]" value="" placeholder="<?php echo $entry_date_end; ?>" data-date-format="YYYY-MM-DD" class="form-control" /><span class="input-group-btn"><button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button></span></div></td>';
    html += '  <td class="text-left"><button type="button" onclick="$(\'#special-row' + special_row + '\').remove();" data-toggle="tooltip" title="<?php echo $button_remove; ?>" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';
    html += '</tr>';

    $('#specials tbody').append(html);

    $('#special-row' + special_row + ' .date').datetimepicker({pickTime: false  });

    $('#special-row' + special_row + ' [data-toggle=\'tooltip\']').tooltip({container: 'body'});

    special_row++;
}
$('#specials tbody .date').datetimepicker({pickTime: false});
//--></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript"><!--
var rate = 1.21;
$(document).on('keyup', '.pricevatexc', function(){
    var val = $(this).val();
    $(this).parent().find('.pricevatinc').val(val * rate)
})
$(document).on('keyup', '.pricevatinc', function(){
    var val = $(this).val();
    $(this).parent().find('.pricevatexc').val(val / rate)
})
//--></script>