jQuery实现小米购物车功能案例

效果图：

修改：在购物车显示数量一栏没有文本居中（只需添加两步）：

step1：在新增的div中的input增加一个类

"<input type='text' size='3' readonly value='1' class='inputTextCenter'/> "+

step2：在CSS样式为类添加样式

.inputTextCenter{
    text-align: center;
}

即可input文本居中。

源码：（细节讲解都在里面）直接贴出html/css和JavaScript代码块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery实现小米购物车案例</title>
    <script src="jquery-3.3.1.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        h1{
            text-align: center;
            color: #FF6700;
        }
        table{
            margin: 0 auto;
            width: 80%;
            border: 2px solid whitesmoke;
            /*设置表格的合并为单线*/
            border-collapse: collapse;
        }
        table th, table td{
            border: 2px solid whitesmoke;
            padding: 5px;
            text-align: center;
        }
        table th{
            background-color: #FF6700;
            color: #FFFFFF;
        }
        /*总计的样式*/
        table tfoot tr td:first-child {
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="Img_MI/mi.png" alt="">
</div>
<h1>小米商城购物车</h1>>
<table>
    <!--用长表格实现布局-->
    <thead>
    <tr>
        <th>商品</th>
        <th>单价（元）</th>
        <th>数量</th>
        <th>金额（元）</th>
        <th>删除</th>
    </tr>
    &l