jquery 商品对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品对比</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .product {
            margin: 10px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .comparison-table {
            border-collapse: collapse;
            width: 100%;
        }
        .comparison-table th, .comparison-table td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        .comparison-table th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <div class="product" data-id="1">
        <h3>商品A</h3>
        <p>价格: $100</p>
        <p>规格: 10GB</p>
        <button class="compare-btn">对比</button>
    </div>
    <div class="product" data-id="2">
        <h3>商品B</h3>
        <p>价格: $150</p>
        <p>规格: 20GB</p>
        <button class="compare-btn">对比</button>
    </div>

    <table class="comparison-table" id="comparison-table">
        <thead>
            <tr>
                <th>商品</th>
                <th>价格</th>
                <th>规格</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
        $(document).ready(function() {
            $('.compare-btn').click(function() {
                var productId = $(this).closest('.product').data('id');
                var productName = $(this).closest('.product').find('h3').text();
                var productPrice = $(this).closest('.product').find('p:contains("价格")').text().replace(/[^0-9.]/g, '');
                var productSpec = $(this).closest('.product').find('p:contains("规格")').text().replace(/[^0-9a-zA-Z]/g, '');

                var tableRow = '<tr><td>' + productName + '</td><td>' + productPrice + '</td><td>' + productSpec + '</td></tr>';
                $('#comparison-table tbody').append(tableRow);
            });
        });
    </script>
</body>
</html>