Question

请帮我解决这个问题。我想进行计算（选择的值可以被1000整除）和多个Amount，并且应该存储在第5列中。即Product1 =（100/1000）* 100 = 10

这是我的代码：

<table border="1">
<tbody>
    <tr>
        <td width="334">S.No.</td>
        <td width="334">Product Name</td>
        <td width="334">Amount</td>
        <td width="334">Grams/Kg</td>
        <td width="334">Final Amount</td>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>Product1</td>
        <td>100</td>
        <td>
            <select id="grams">
                <option value=""></option>
                <option value="100">100g</option>
                <option value="250">250g</option>
                <option value="500">500g</option>
            </select>
        </td>
        <td>I want to do calculation (selectedvalue / 1000) * Amount, that amount want to reflect here</td>
    </tr>
    <tr align="center">
        <td>2</td>
        <td>Product2</td>
        <td>200</td>
        <td>
            <select id="grams">
                <option value=""></option>
                <option value="100">100g</option>
                <option value="250">250g</option>
                <option value="500">500g</option>
            </select>
        </td>
        <td>I want to do calculation (selectvalue / 1000) * Amount, that amount want to reflect here</td>
    </tr>
</tbody>

Answer 1

这可能有助于您了解如何格式化表格以获取值

$(function(){
  $('select').change(function(){
        var td_id = 'row'+$(this).attr('id');
        var val = $(this).val();
        var amount = $('.'+td_id+'-amount').html();
        $('#'+td_id).html(val/1000*amount);
  });
});

在示例中，您必须添加一些额外的ids和classes。见Fiddle

（我以为你想要超过2行。在你的情况下，其他答案可能更容易使用）

Answer 2

首先，您不能拥有两个具有相同ID的元素。 ID需要独一无二。因此，您需要更改第二个选择框的ID。

然后我在计算将去的td上放了一个id，在td上放了一个包含金额的id。

<table border="1">
<tbody>
<tr>
    <td width="334">S.No.</td>
    <td width="334">Product Name</td>
    <td width="334">Amount</td>
    <td width="334">Grams/Kg</td>
    <td width="334">Final Amount</td>
</tr>
<tr align="center">
    <td>1</td>
    <td>Product1</td>
    <td id="amtFirst">100</td>
    <td>
        <select id="grams">
            <option value=""></option>
            <option value="100">100g</option>
            <option value="250">250g</option>
            <option value="500">500g</option>
        </select>
    </td>
    <td id="firstCalculation"></td>
</tr>
<tr align="center">
    <td>2</td>
    <td>Product2</td>
    <td id="amtSecond">200</td>
    <td>
        <select id="secondGrams">
            <option value=""></option>
            <option value="100">100g</option>
            <option value="250">250g</option>
            <option value="500">500g</option>
        </select>
    </td>
    <td id="secondCalculation"></td>
</tr>
</tbody>

然后你需要使用jquery：

//handles the first select box
$('table').on('change','#grams',function(){
    var selection = $(this).val();
    var amount = $('#amtFirst').html();

    selection = (selection/1000)*amount;
    $('#firstCalculation').html(selection);
});

//handles the second select box
$('table').on('change','#secondGrams',function(){
    var selection = $(this).val();
    var amount = $('#amtSecond').html();

    selection = (selection/1000)*amount;
    $('#secondCalculation').html(selection);
});

我想在列表之间进行计算，值应该存储在Final Amount列中

2 个答案: