JQuery HTML 테이블에서 요소 이름 가져 오기

Question

테이블이 있습니다. 제품 이름, 금액 및 가격을 유지합니다.

금액을 2-3-4 또는 다른 번호로 변경하려는 경우 첫 번째 행만 변경합니다.

어떻게 ID는 서로 달라야합니다 모든 행

<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> 

Answer 1

의 결과를 변경할 수 있습니다. 대신 클래스를 사용할 수 있습니다.

HTML

<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> 

JS 클래스를 사용하는

$('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(); 
}); 

DEMO

Answer 2

시도 (코멘트에 명시된 바와 같이 ID를, 고유해야합니다) :

,531,843,568,038,253,210

바이올린 here

UPDATE :

HTML :

<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); 
}); 

새로운 바이올린 here