Team Wins Losses Win Percentage
Lakers 43 39 0.524
Warriors 44 38 0.537
Bucks 58 24 0.707
Nets 45 37 0.549
Kings 48 34 0.585 
%%html

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 80%;
  margin: 20px auto;
}

th, td {
  border: 1px solid #ddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

th {
  background-color: #4CAF50;
  color: white;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Team</th>
    <th>Wins</th>
    <th>Losses</th>
    <th>Win Percentage</th>
  </tr>
  <tr>
    <td>Lakers</td>
    <td>50</td>
    <td>32</td>
    <td>0.610</td>
  </tr>
  <tr>
    <td>Warriors</td>
    <td>55</td>
    <td>27</td>
    <td>0.671</td>
  </tr>
  <tr>
    <td>Bucks</td>
    <td>58</td>
    <td>24</td>
    <td>0.707</td>
  </tr>
  <tr>
    <td>Nets</td>
    <td>54</td>
    <td>28</td>
    <td>0.659</td>
  </tr>
  <tr>
    <td>Clippers</td>
    <td>48</td>
    <td>34</td>
    <td>0.585</td>
  </tr>
</table>

</body>
</html>

<!DOCTYPE html>

Team Wins Losses Win Percentage
Lakers 50 32 0.610
Warriors 55 27 0.671
Bucks 58 24 0.707
Nets 54 28 0.659
Clippers 48 34 0.585 
%%HTML

<!DOCTYPE html>
<html>
<head>
    <title>NBA Teams Table</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        table {
            border-collapse: collapse;
            width: 60%;
            margin: 20px auto;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            color: red; /* Red text color */
        }

        th {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #f5f5f5;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h2>NBA Teams Table</h2>
    <table id="nbaTable">
        <thead>
            <tr>
                <th>Team</th>
                <th>Wins</th>
                <th>Losses</th>
                <th>Win Percentage</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lakers</td>
                <td>50</td>
                <td>32</td>
                <td>0.610</td>
                <td><button class="deleteRow">Delete</button></td>
            </tr>
            <!-- Add more rows here -->
        </tbody>
    </table>

    <button id="addRow">Add Row</button>
    <p>Average Win Percentage: <span id="averageWinPercentage">0.0</span></p>

    <script>
        $(document).ready(function() {
            // Function to calculate and update the average win percentage
            function updateAverageWinPercentage() {
                var totalWinPercentage = 0;
                var rowCount = 0;

                $("#nbaTable tbody tr").each(function() {
                    var winPercentage = parseFloat($(this).find("td:eq(3)").text());
                    if (!isNaN(winPercentage)) {
                        totalWinPercentage += winPercentage;
                        rowCount++;
                    }
                });

                var averageWinPercentage = rowCount > 0 ? (totalWinPercentage / rowCount).toFixed(3) : 0.0;
                $("#averageWinPercentage").text(averageWinPercentage);
            }

            // Add Row button click event
            $("#addRow").click(function() {
                var newRow = $("<tr>");
                var cols = "";

                cols += '<td>New Team</td>';
                cols += '<td>0</td>';
                cols += '<td>0</td>';
                cols += '<td>0.000</td>';
                cols += '<td><button class="deleteRow">Delete</button></td>';

                newRow.append(cols);
                $("#nbaTable tbody").append(newRow);
                updateAverageWinPercentage();
            });

            // Delete Row button click event
            $("#nbaTable").on("click", ".deleteRow", function() {
                $(this).closest("tr").remove();
                updateAverageWinPercentage();
            });

            // Highlight row on click
            $("#nbaTable tbody tr").click(function() {
                $(this).toggleClass("highlight");
            });

            // Initial average win percentage calculation
            updateAverageWinPercentage();
        });
    </script>
</body>
</html>

<!DOCTYPE html>

NBA Teams Table

NBA Teams Table

Team Wins Losses Win Percentage Action
Lakers 50 32 0.610

Average Win Percentage: 0.0