Skip to main content Link Menu Expand (external link) Document Search Copy Copied

jQuery Example

<!DOCTYPE html>
<html>
<head>
<title>JQuery Example</title>
<style>
    .hover {
        cursor: pointer;
        text-decoration: underline;
        color: blue;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" integrity="sha512-+k1pnlgt4F1H8L7t3z95o3/KO+o78INEcXTbnoJQ/F2VqDVhWoaiVml/OEHv9HsVgxUaVW+IbiZPUJQfF/YxZw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
    $("ul li").on("mouseover", function() {
        $(this).addClass("hover");
    });
    $("ul li").on("mouseout", function() {
        $(this).removeClass("hover");
    });


    $("ul li").each(function(index, element) {

        $(this).on("click", function() {

            var numCols = $("#theTable td").length;

            if (numCols == 1) {
                // add another column
                $("#theTable tr").append("<td><ol></ol></td>");
            }

            $(this).remove();

            $("ol").append(element);

            var oldList = $("ul li").length;
            if (oldList  == 0 ) {
                $("ul").remove();
                $("#theTable tr td:eq(0)").remove();
            }

        });
    });
});

</script>
</head>
<body>
<table id="theTable" class="tableClass">
	<caption>Rank fun things to do in the spring at UVA</caption>
	<tr>
	<td>
	<ul>
		<li>Walk in the rain</li>
		<li>Playing frisbee on the Lawn</li>
		<li>View a solar eclipse (with appropriate glasses)</li>
		<li>Hiking the Appalachian Trail</li>
		<li>Rock Climbing</li>
		<li>Writing HTML/PHP/JS games in CS 4640</li>
		<li>Playing Tears of the Kingdom on Switch</li>
    </ul>
    </td>
    </tr>
</table>
</body>
</html>