자바 스크립트에서 HTML 요소의 값 설정

saim2025

장바구니에있는 항목을 추적하기 위해 세션 변수를 사용하고 있습니다. 루프를 사용하여 카트의 내용을 표시하는 테이블을 생성합니다. 테이블의 코드는 다음과 같습니다.

<?php
  $count=0;
  $grandTotal=0;
  foreach($_SESSION['cart'] AS $product) {
    $table=$product['table'];
    $id=$product['id'];
    $Name=$product['name'];
    $qty=$product['quantity'];
    $price=$product['price'];
    $total=$qty*$price;
    $grandTotal +=$total;
?>

<tr>
    <td class="cart_product">
        <img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150">
    </td>
    <td class="cart_description">
        <h4><a href=""><?php echo $Name?></a></h4>
        <p><?php echo "Web ID: ".$id?></p>
    </td>
    <td class="cart_price">
        <p><?php echo $price?></p>
    </td>
    <td class="cart_quantity">
        <div class="cart_quantity_button">
            <a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a>
            <input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2">
            <!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>-->
            <a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decreament" > - </a>
        </div>
    </td>
    <td class="cart_total">
        <p class="cart_total_price"><?php echo $total ?></p>
    </td>
    <td class="cart_delete">
        <a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a>
    </td>
</tr>

<?php
    }
    $tax=0.15*$grandTotal;
?>

태그 내의 +-버튼에 문제가 a있습니다. 라는 입력 필드의 값을 늘리거나 줄이고 싶습니다 quantity. 그러나 루프에서 테이블을 생성하고 있기 때문에 각 필드의 ID를 모릅니다. 다음과 같이하고 싶습니다.

<script>
    $(document).ready(function () {
        $("#increment").click(function () {
            var oldval=document.getElementById("qty").value;
            var newval=parseInt(oldval);
            document.getElementById("qty").value=newval++;
        });
    });
</script>

그러나이 방법은 항상 테이블의 첫 번째 수량 필드를 증가시킵니다. 테이블에있는 다른 수량 필드의 ID는 어떻게 얻습니까?

XYZ

루프 내에서 ID를 사용하지 말고 클래스를 사용하십시오> smaple 데모를 위해 스 니펫을 확인하십시오.

$(document).ready(function () {
        $(".increment").click(function () {
            var oldval = $(this).prev('.qty').val();
            
            var newval = parseInt(oldval)+ 1;
            
            $(this).prev('.qty').val(newval);
        });
        $(".decrement").click(function () {
            var oldval = $(this).next('.qty').val();
            
            var newval = parseInt(oldval) - 1;
            
            $(this).next('.qty').val(newval);
        });
        
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>    <tr>
              <td>sl No</td>
              <td>name</td>
              <td>Dept</td>
              <td>dummy</td>
              <td>dummy</td>
              <td>dummy</td>
          </tr>

          <tr>
              <td>1</td>
              <td>name</td>
              <td>
                   

              </td>
              <td>name</td>
              <td>name</td>
              <td> </td>
          </tr>


          <tr>
              <td>2</td>
              <td>name</td>
              <td>Dept</td>
              <td>name</td>
              <td> <button class="decrement"> - </button> 
                  <input type="text" class="qty" value="1"/>
                  <button class="increment">+ </button>
                  </td>
              <td>name</td>
          </tr>

          <tr>
              <td>3</td>
              <td>name</td>
              <td>name</td>
              <td>name</td>
              <td>name</td>
              <td>name</td>
          </tr>


      </table>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

자바 스크립트를 사용하여 PHP 변수로 HTML 날짜 요소의 값 설정

분류에서Dev

자바 스크립트의 HTML 요소에서 값 가져 오기

분류에서Dev

자바 스크립트로 입력 HTML에서 최소값을 설정하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트에서 동적으로 요소의 높이 설정

분류에서Dev

iframe의 부모에서 자바 스크립트를 사용하여 양식의 요소 값을 어떻게 설정합니까?

분류에서Dev

자바 스크립트 클래스의 값 설정

분류에서Dev

자바 스크립트로 CSS @Media 최소 너비 값 설정

분류에서Dev

자바 스크립트의 onbeforeprint에서 특정 요소 제외

분류에서Dev

함수 내에서 자바 스크립트 설정 최고 값

분류에서Dev

자바 스크립트에서 전역 배열 값 설정

분류에서Dev

자바 스크립트에서 배열 값 설정

분류에서Dev

자바 스크립트 개체의 속성 값 설정

분류에서Dev

html5 동영상에서 자바 스크립트 설정 / 소스 src = ""교체

분류에서Dev

자바 스크립트에서 양식의 입력 값을 어떻게 설정할 수 있습니까?

분류에서Dev

합계가있는 HTML 텍스트 입력에 동적 자바 스크립트 값 설정

분류에서Dev

자바 스크립트의 테이블에서 특정 값 계산

분류에서Dev

자바 스크립트의 for 루프에서 배열의 문자열 요소의 길이를 변수로 설정

분류에서Dev

자바 스크립트에서 HTML 양식 요소 출력

분류에서Dev

html onclick에서 자바 스크립트 오류 '정의되지 않은 기능'

분류에서Dev

자바 스크립트를 사용하여 HTML 링크의 ID에 값 할당

분류에서Dev

다른 요소의 innerhtml에 요소 속성 할당. 자바 스크립트 / HTML

분류에서Dev

자바 스크립트를 사용하여 메소드에서 하나의 인수에만 값을 설정하는 방법은 무엇입니까?

분류에서Dev

자바 스크립트의 배열에서 특정 요소 삭제

분류에서Dev

자바 스크립트에서 ID없이 특정 요소의 CSS 변경

분류에서Dev

자바 스크립트를 사용하여 값이있는 HTML 요소 제거

분류에서Dev

자바 스크립트를 사용하여 rems에서 요소의 높이와 너비 설정

분류에서Dev

자바 스크립트에서 값을 __proto__` 및`prototype으로 설정

분류에서Dev

자바 스크립트 : HTMLDivElement에 값을 설정하는 방법?

분류에서Dev

C # Jint 자바 스크립트 변수에 값 설정

Related 관련 기사

  1. 1

    자바 스크립트를 사용하여 PHP 변수로 HTML 날짜 요소의 값 설정

  2. 2

    자바 스크립트의 HTML 요소에서 값 가져 오기

  3. 3

    자바 스크립트로 입력 HTML에서 최소값을 설정하는 방법은 무엇입니까?

  4. 4

    자바 스크립트에서 동적으로 요소의 높이 설정

  5. 5

    iframe의 부모에서 자바 스크립트를 사용하여 양식의 요소 값을 어떻게 설정합니까?

  6. 6

    자바 스크립트 클래스의 값 설정

  7. 7

    자바 스크립트로 CSS @Media 최소 너비 값 설정

  8. 8

    자바 스크립트의 onbeforeprint에서 특정 요소 제외

  9. 9

    함수 내에서 자바 스크립트 설정 최고 값

  10. 10

    자바 스크립트에서 전역 배열 값 설정

  11. 11

    자바 스크립트에서 배열 값 설정

  12. 12

    자바 스크립트 개체의 속성 값 설정

  13. 13

    html5 동영상에서 자바 스크립트 설정 / 소스 src = ""교체

  14. 14

    자바 스크립트에서 양식의 입력 값을 어떻게 설정할 수 있습니까?

  15. 15

    합계가있는 HTML 텍스트 입력에 동적 자바 스크립트 값 설정

  16. 16

    자바 스크립트의 테이블에서 특정 값 계산

  17. 17

    자바 스크립트의 for 루프에서 배열의 문자열 요소의 길이를 변수로 설정

  18. 18

    자바 스크립트에서 HTML 양식 요소 출력

  19. 19

    html onclick에서 자바 스크립트 오류 '정의되지 않은 기능'

  20. 20

    자바 스크립트를 사용하여 HTML 링크의 ID에 값 할당

  21. 21

    다른 요소의 innerhtml에 요소 속성 할당. 자바 스크립트 / HTML

  22. 22

    자바 스크립트를 사용하여 메소드에서 하나의 인수에만 값을 설정하는 방법은 무엇입니까?

  23. 23

    자바 스크립트의 배열에서 특정 요소 삭제

  24. 24

    자바 스크립트에서 ID없이 특정 요소의 CSS 변경

  25. 25

    자바 스크립트를 사용하여 값이있는 HTML 요소 제거

  26. 26

    자바 스크립트를 사용하여 rems에서 요소의 높이와 너비 설정

  27. 27

    자바 스크립트에서 값을 __proto__` 및`prototype으로 설정

  28. 28

    자바 스크립트 : HTMLDivElement에 값을 설정하는 방법?

  29. 29

    C # Jint 자바 스크립트 변수에 값 설정

뜨겁다태그

보관