JQUERY WITH HTML

Posted on Updated on

Image result for JQUERY WITH HTMLJQUERY WITH HTML

Here are some convenient code pieces that will be valuable while working with HTML Tables:

1 – Highlight a cell/row based on a value

Give us a chance to perceive how to highlight a few cells or columns in a HTML Table and get the client’s consideration. Make a HTML record called “MiscTableFunctions.html” and include the accompanying markup:

<tableid=”someTable”>

    <thead>

        <tr>

            <thclass=”empid”>EmpId</th>

            <thclass=”fname”>First Name</th>

            <thclass=”lname”>Last Name</th>

            <thclass=”email”>Email</th>

            <thclass=”age”>Age</th>

        </ tr>

    </ thead>

    <tbody>

        <tr>

            <tdclass=”empid”>E342</td>

            <tdclass=”fname”>Bill</td>

            <tdclass=”lname”>Evans</td>

            <tdclass=”email”>Bill@devcurry.com</td>

            <tdclass=”age”>35</td>

        </ tr>

     …

    </ tbody>

</ table>

We will be use the following css for highlighting the cells/rows:

.highlite{

font-weight: bold;

color: #0a9600!important;

}

Now write some code that highlights a cell if the employee’s age is > 50.

$(function() {

$(“#someTable td.age”).filter(function() {

returnparseInt($(this).text(), 10) > 50;

}).addClass(‘highlite’);

});

The selector $(“#someTable td.age”) chooses all td’s with the class age.Using .channel() we diminish the arrangement of coordinated age cells to those cells that have an esteem more noteworthy than 50. We are utilizing parseInt() first to change over the content in every age cell, to a number, and afterward contrasting with check whether the content is more noteworthy than 50. The class “highlite” highlights all age cells which has an esteem > 50, by changing the shade of the coordinating cell, to strong green.

In the event that you watch, the parseInt work has two contentions: a required numeric string, and a discretionary radix (base). The radix is the number’s base, as in base-8 (octal), base-10 (decimal) and base-16 (hexadecimal). On the off chance that the radix is not gave, it’s thought to be 10, for decimal. In spite of the fact that the second contention is discretionary, it’s viewed as a decent practice to dependably give it unequivocally.

Spare and peruse the document in your program and the Age cell in the third line gets highlighted.

In the event that you need to highlight the whole column rather than only a cell, utilize parent()

$(“#someTable tbodytrtd.age”).filter(function () {

return $(this).text() > 50;

}).parent().addClass(‘highlite’);

parent() gets the parent of every age cell in the present arrangement of coordinated components. Since the parent of the cell is a column, the whole line gets highlighted.

2 – Count Number of Rows in a Table

An ordinary way to deal with this prerequisite is to circle through the lines utilizing each() and afterward check it. I am rather utilizing .after() which will give back all DOM components inside the table. Rather than utilizing find(‘tr’).length() capacity to check the quantity of columns, I am utilizing jQuery’s setting parameter $(‘tr’, this) which gives better execution. this here alludes to the table. On the off chance that you are utilizing Chrome, open the JavaScript comfort utilizing Ctrl + Shift + J (Cmd+Opt+J on Mac) and view the page.

$(“#someTable”).after(function() {

    console.log($(‘tr’, this).length + ” rows.”);

});

You should ask why we are getting the consider 6 lines, when the table contains just 5 lines. We get 6 pushes as the <thead> additionally has a <tr>. To get the right tally, essentially change the selector from $(“#someTable”) to $(“#someTable tbody”) which will now choose just columns inside the tbody.

Add a New Row Below the Selected Row by Clicking on It

If your table emulates a spreadsheet, you may want to give your users the option to add new rows to the table at runtime. Here’s how to do so:

$(function() {

    $(“#someTable tbody”).on(“click”, “tr”, function(e) {

        if(e.target.type != “text”) {

            varrow = $(“<tr><td><input /></td><td>-</td><td>-“+

                        “</td><td>-</td><td>-</td></tr>”);

            $(this).after(row);

        }

    });

});

In spite of the fact that we can wire up the code to execute on a catch click, I am giving the clients a chance to make new columns by tapping on any line in the table. On snap, we are getting a reference to the clicked column and after that utilizing after() to embed the new line, after the line that was clicked. Since one of the cells contains an information box, we don’t need new columns to be made when the client begins writing in the textbox. So we are barring it utilizing (e.target.type != “content”). Here’s the yield subsequent to tapping on Row 1 and 4.

4 – Click on a Row and Retrieve Values of all Cells in that Row

From the clicked tr component, we explore up to the column through nearest(), and afterward discover the cell (td) utilizing find(). The guide() technique is helpful in getting the estimation of a gathering of td’s. Since the arrival esteem is a jQuery protest (which contains a cluster) we utilize get() on the outcome to work with the exhibit.

join() is not a jQuery work but rather a standard Array.join(separator) JavaScript work that changes over an exhibit to a string, putting the separator between every component. In the event that the separator is overlooked, as a matter of course the exhibit components are isolated with a comma, as for our situation.

Spare and peruse the record in a program. Open the program support window and tap on any column to see the estimations of the considerable number of cells in that line.

5 – Click on a Cell to display its Column Header

We begin by getting the zero-based position of the clicked “td” component in the idx variable. At that point explore up to the tbody by means of nearest(), get the promptly going before kin and discover() the th. kin of the clicked “td” component. At that point channel those kin for “th” components and utilize eq() providing it a list to coordinate the ‘th’, with that of the cell that was clicked. The last stride is to recover the content of that component utilizing content(). Watch how we have tied various jQuery capacities to accomplish our prerequisite.

$(‘#someTable tbody’).on(‘click’, ‘td’, function() {

    varidx = $(this).index();

    varthd = $(this).closest(‘tbody’)

                        .prev().find(‘th’)

                        .eq(idx).text();

    console.log(thd);

});

*****************************************************************************************************

For more details and queries please feel free to email, visit or call us. Wishing you the very best for all your future endeavors.
Helpline: 9814666333, 8699444666
Email: info@technocampus.co.in

Please fill the form and we shall contact you soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s