Learning jQuery

Do you want the ability to be able to dynamically edit and manage your tables? With jQuery, it's pretty easy to get data and change table elements dynamically using only a few lines of code. The snippets below will show you how to add a new row to your table, how to retrieve all values in a row from a click event, and how to count the number of rows that a table has by using simple and lightweight plain jQuery code.

Counting Table Rows

If you find yourself wanting to know how many rows are in your table, you can use the following snippet to let jQuery do all the calculations for you:

$("#my-table").after(function () {
 console.log($('tr', this).length + " rows.");
});

The code above logs to the console how many rows are in your table with the ID of "my-table", and it only takes two lines of jQuery to do it!

Get Row Values from Click Event

What if you want to be able to click on a table row and have all the data within the cells of that row be logged to the console? Achieving this is actually pretty straightforward. Check out the code snippet below to see how it's done using jQuery:

$("#my-table tbody").on("click", "tr", function() {
    var rowdata = $(this).closest('tr').find('td').map(function() {
        return $(this).text();
    }).get().join();
    console.log(rowdata);
});

In only 5 lines of jQuery, you can log all the data of a table row to your console just by clicking on it. As you can see, the trigger is a click event, and then we use other jQuery methods like find, map, and join events to gather all the data before logging it to the console.

Add Row on Click Event

This code will add a new row below any row that you click on using jQuery. Be sure to customize the row variable so that the amount of cells the new row has matches the amount of your table. Check out the code snippet below.

$(function() {
    $("#my-table tbody").on("click", "tr", function(e) {
        if (e.target.type != "text") {
            var row = $("<tr><td><input /></td><td>-</td><td>-" +
                "</td><td>-</td><td>-</td></tr>");
            $(this).after(row);
        }
    });
});