OE Javascript/jQuery Exercise #1

by sapoye

HTML

<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div class="container">
     <h3>jQuery Exercise #1</h3>

    <p><strong>Request</strong>: The lab would like a way to add additional rows to the results table below. Right now, there are 2 rows by default. They would like you to add a button they can click on to adds rows (one at a time).</p>
    <p><strong>Approach</strong>: You can build a version within jsfiddle. First create an account. Then "Fork" this fiddle to make your own version. From there you can edit the html, css and javascript and then "Run" to see the results. Use the "Update" button to make different versions. You can use the "Base" button make the one you're work on the main version.</p>
    <p>Try experimenting. You will need to use jQuery (a javascript library) to build a function that will update the table. I included a few bits of jQuery as a reminder of how it works.</p>
    <p><strong>References</strong>:</p>
    <ul>
        <li><a href="http://api.jquery.com/">jQuery documentation</a>
        </li>
        <li><a href="http://www.codecademy.com/">Codecacademy - nice, interactive Javascript and jQuery tutorials.</a></li>
    </ul>
    <hr />
    <!-- Exercise html begins here -->
    <div class="row">
        <div class="span7">
             <h4>Results Entry</h4>

            <table id="resultsTable" class="table table-striped table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Date</th>
                        <th>Test</th>
                        <th>Result</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="row1">
                        <td>1</td>
                        <td>
                            <input class="input-medium" type="date" />
                        </td>
 ...

CSS

/** Any CSS styles go here. Most of the page is already styles via the linked Bootstrap css file **/

.container {
    padding: 20px;
    font-size: 12px;
}

JavaScript

/* jquery function almost always are wrapped in $(document).ready -- they are triggered after DOM loads */
$(document).ready(function () {


    // Example of a jquery function. Here we trigger a "save" that could be sent to server when you click on a certain button
    $("#addLine").on("click", function () {

        // Here's how we could count the number of rows in our table -- this could be useful when adding new rows
        var rowCount = $("#resultsTable tbody tr").length;

        // You can trigger something to appear in the console:
        console.log("There are " + rowCount + " rows in the table.");

        // You can set an alert which appears in a pop-up
        //alert("There are " + rowCount + " rows in the table.");       
        
        ++rowCount;
        // *** A Hint -- there are jquery functions that allow you to clone DOM elements ***
        $('#resultsTable tbody').append(' <tr id="row'+rowCount+'"><td> ' + rowCount + '</td><td> <input class="input-medium" type="date" />  </td> <td> <input class="input-medium" type="text" /> </td>  <td> <input class="input-medium" type="text" />      </td> </tr>');

    });

});