JQuery获取Html表上的元素名称

我有一张桌子。 保留产品名称、数量和价格是很重要的

当我想更改金额2-3-4或其他数字时，只需更改第一行

如何更改所有行的结果

<table>
  <tr>
    <td>Product Name 1 </td>
    <td><input type="text" id = "amount" value="1"></td>
    <td id="price">55</td>
    <td id="result"><!-- Here is 55*1 (amount) --></td></tr>
    <tr><td>Product Name 2 </td>
    <td><input type="text" id = "amount" value="1"></td>
    <td id="price">65</td>
    <td id="result"><!-- Here is 65*1 (amount) --></td></tr>
    <tr><td>Product Name 3 </td>
    <td><input type="text" id = "amount" value="1"></td>
    <td id="price">23</td>
    <td id="result"><!-- Here is 23*1 (amount) --></td>
  </tr>
</table>

<script>
    $('#amount').keyup(function () { 
        var amount= $("#amount").val();
        var price = $(this).closest('tr').children('td.price').text();
        var result = amount * price;
        $("#result").html(result).show();
    });
</script>

产品名称1
55
产品名称2
65
产品名称3
23
$（'#amount'）.keyup（函数（）{
var金额=$（“#金额”）.val（）；
var price=$（this.closest（'tr'）.children（'td.price'）.text（）；
var结果=金额*价格；
$（“#result”）.html（result.show（）；
});

ID必须是唯一的。您可以改用类

HTML

---

ID必须是唯一的。您可以改用类

HTML

尝试使用类（ID必须是唯一的，如注释中所述）：

New fiddle

尝试使用类（ID必须是唯一的，如注释中所述）：

---

新小提琴

Shh。。Id应该是唯一的。。！Id应该是唯一的、必需的，并且必须是重复的Id，

miktar

undefinedI'm try Id=“price[]”和Id=“amount[]”。有一个很好的例子。。但是我拿不到美元；重复id的问题在于页面从顶部搜索。如果有多个元素具有相同的id，浏览器将从顶部开始搜索，找到与id匹配的第一个元素并停止搜索。因此，要么使用不同的id，要么在不同的上下文中使用相同的id。。Id应该是唯一的。。！Id应该是唯一的、必需的，并且必须是重复的Id，

miktar

undefinedI'm try Id=“price[]”和Id=“amount[]”。有一个很好的例子。。但是我拿不到美元；重复id的问题在于页面从顶部搜索。如果有多个元素具有相同的id，浏览器将从顶部开始搜索，找到与id匹配的第一个元素并停止搜索。因此，要么使用不同的id，要么使用相同的id，但在不同的上下文中我有一个问题：）我如何更改它？：）我有一个问题：）我怎样才能改变它？：）非常感谢。完成了。我有一个问题：）我怎样才能改变它？：）非常感谢。完成了。我有一个问题：）我怎样才能改变它？：）

<table>
    <tr>
        <td>Product Name 1</td>
        <td>
            <input type="text" class="amount" value="1" />
        </td>
        <td class="price">55</td>
        <td class="result">
            <!-- Here is 55*1 (amount) -->
        </td>
    </tr>
    <tr>
        <td>Product Name 2</td>
        <td>
            <input type="text" class="amount" value="1" />
        </td>
        <td class="price">65</td>
        <td class="result">
            <!-- Here is 65*1 (amount) -->
        </td>
    </tr>
    <tr>
        <td>Product Name 3</td>
        <td>
            <input type="text" class="amount" value="1" />
        </td>
        <td class="price">23</td>
        <td class="result">
            <!-- Here is 23*1 (amount) -->
        </td>
    </tr>
</table>

$('input.amount').keyup(function () {
    var amount = +$(this).val();  //Here use '+' to convert to number
    var price = +$(this).closest('tr').find('td.price').text();
    var result = amount * price; //Here miktar is undefined 
    $(this).closest('tr').find('td.result').html(result).show();
});

<table>
   <tr>
     <td>Product Name 1 </td>
     <td><input type="text" class = "amount" value="1"></td>
     <td class="price">55</td>
     <td class="result"><!-- Here is 55*1 (amount) --></td>
   </tr>
   <tr>
     <td>Product Name 2 </td>
     <td><input type="text" class = "amount" value="1"></td>
     <td class="price">65</td>
     <td class="result"><!-- Here is 65*1 (amount) --></td>
   </tr>
   <tr>
     <td>Product Name 3 </td>
     <td><input type="text" class = "amount" value="1"></td>
     <td class="price">23</td>
     <td class="result"><!-- Here is 23*1 (amount) --></td>
   </tr>
</table>

<script>
$('.amount').keyup(function () { 
    var amount= $(this).val();
    var price = $(this).closest('tr').children('td.price').text();
    var result = amount * price;
    $(this).closest('tr').children('td.result').html(result).show();
});
</script>

<table>
   <tr>
     <td>Product Name 1 </td>
     <td><input type="text" class = "amount" value="1"></td>
     <td class="price">55</td>
     <td class="result"><!-- Here is 55*1 (amount) --></td>
   </tr>
   <tr>
     <td>Product Name 2 </td>
     <td><input type="text" class = "amount" value="1"></td>
     <td class="price">65</td>
     <td class="result"><!-- Here is 65*1 (amount) --></td>
   </tr>
   <tr>
     <td>Product Name 3 </td>
     <td><input type="text" class = "amount" value="1"></td>
     <td class="price">23</td>
     <td class="result"><!-- Here is 23*1 (amount) --></td>
   </tr>
   <tr>
     <td colspan="3">Total</td>
     <td id="total"><!-- Total --></td>
   </tr>
</table>

$('.amount').keyup(function () { 
    var amount= $(this).val();
    var price = $(this).closest('tr').children('td.price').text();
    var result = amount * price;
    $(this).closest('tr').children('td.result').text(result).show();
    var total = 0;
    $(".result").each(function() {
        var val = parseFloat($(this).text());
        if (!isNaN(val)) {
            total += val;
        }
    });
    $("#total").text(total === 0 ? "" : total);
});