장바구니 레이아웃의 JavaScript 개발

먼저 어떤 기능을 만들어야 하는지 이해해야 합니다

간단한 장바구니를 만들려면 테이블에 단가와 수량의 가감이 있고 그 다음에는 총 가격이 나옵니다. 덧셈 또는 뺄셈을 클릭하면 총 가격이 변경됩니다

다음 HTML 레이아웃 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        table{width:350px;border:1px solid #eee;text-align:center;}
        .tr2{height:50px;}
        input{width:30px;height:20px;text-align: center;}
        a{text-decoration:none}
    </style>
</head>
<body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tr>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>总价</th>
            </tr>

            <tr class="tr2">
                <td>手表</td>
                <td id="td">1999</td>
                <td>
                    <a href="#" id="a1" class="tp1">-</a>
                    <input type="text" value="1" id="id">
                    <a href="#" id="a2" class="tp2">+</a>
                </td>
                <td id="td2">1999</td>
            </tr>
        </table>
</body>
</html>

위 코드를 사용하면 텍스트 양쪽에 더하기 및 빼기 기호가 있는 것을 볼 수 있습니다. 상자를 클릭한 다음 id='td'인 셀을 보면 1999가 있습니다. 이것이 기본값입니다. 단가

id="td2" 셀은 총 가격
을 저장하는 데 사용됩니다.

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> table{width:350px;border:1px solid #eee;text-align:center;} .tr2{height:50px;} input{width:30px;height:20px;text-align: center;} a{text-decoration:none} </style> </head> <body> <table cellspacing="0" cellpadding="0" border="1"> <tr> <th>名称</th> <th>单价</th> <th>数量</th> <th>总价</th> </tr> <tr class="tr2"> <td>手表</td> <td id="td">1999</td> <td> <a href="#" id="a1" class="tp1">-</a> <input type="text" value="1" id="id"> <a href="#" id="a2" class="tp2">+</a> </td> <td id="td2">1999</td> </tr> </table> </body> </html>

제출하다 코드 재설정

자동운전