Insert a new row into a table using tablesorter jQuery

Is it possible to add a row to a table built with the jQuery library "Tablesorter" by simply clicking on a button? I have tried this approach, but unfortunately, the new row does not inherit the CSS properties of Tablesorter. As a result, I am unable to select the row and the styling for "odd" and "even" rows does not apply.

$("#ajouterCodePiece").click(function(){
    $('#tablesorter-demo-gauche tr:last').after('<tr'><td>'+$('#codepiece option:selected').text()+'</td><td>'+$('#mode option:selected').text()+'</td></tr>');
});

Could someone guide me on how I can ensure that the new row added maintains the CSS and jQuery functionality of Tablesorter? Your help is greatly appreciated! Thank you.

jquerycssrowtablesorter

Answer №1

Tablesorter utilizes a cache to store all table content, so whenever you need to inform tablesorter about any changes, simply trigger an update:

$('table').trigger('update');

Check out this revised demo

$("#ajouterCodePiece").click(function () {
    $('#tablesorter-demo-gauche tr:last').after('<tr><td>' + $('#codepiece option:selected').text() + '</td><td>' + $('#mode option:selected').text() + '</td></tr>');
    $('#tablesorter-demo-gauche').trigger('update');
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Set a consistent pixel measurement for all images

I am working on a project where I have an image of a card that needs to be repeated 30 times. Each time the card is repeated, I want it to overlap with the previous card in a specific position, resembling a deck of cards. The issue I am facing is that whe ...

htmlcssvue.js

Experiencing unexpected outcomes via AJAX requests

Linked to: Query Database with Javascript and PHP This inquiry is connected to my previous question. I made adjustments to the PHP script based on one of the responses I received; however, when attempting to utilize $.getJSON, I encountered difficulties. ...

phpjavascriptjqueryajaxdatabase

Utilize jQueryUI to seamlessly integrate email functionality into CakePHP

I am looking to automate email notifications to both administrators and users upon completion of a jQuery UI form submission. The form, which is located in the view.ctp file, looks like this: <div id="dialog-form" title="Create new user"> < ...

jqueryemailcakephp-2.0

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

Label it as submit ID rather than value or label

Check out this awesome plugin called https://github.com/aehlke/tag-it. It's really cool! Here is the issue I'm facing: <input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true"> Tags:<br ...

javascriptjquerytag-it

Challenges with utilizing multiple backgrounds in CSS

<!DOCTYPE html> <html lang="en"> <head> <meta name="description" content=""> <meta name="author" content=""> <title>Main Website</title> <link href="css/main.css" rel="stylesheet"> </head> ...

htmlcss

Guide on integrating a jQuery confirmation popup in CodeIgniter

Currently, I am working on a project independently and have chosen CodeIgniter as my framework. I am relatively new to PHP and CodeIgniter. I managed to create a confirm box in jQuery, but it displays as an HTML alert. Can someone guide me on how to improv ...

phpjquerycodeigniter

Implementing a jQuery for loop to iteratively print my function with increasing values

I'm currently facing a perplexing issue, but the solution should be straightforward. My mind is completely stuck and I can't figure out where I'm going wrong. Simply put, I want to repeat my function three times as illustrated below: If my ...

jquerywordpress

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Wondering how to accomplish this: I've designed an HTML5 homepage and I'm looking to display a message to visitors, such as "Dear visitor, I am currently on vacation from....", in the form of a memo or sticky note positioned in the top right cor ...

javascriptjquerycsshtml

How to make a checkbox list appear bold when checked in AngularJS?

<div class='someClass'> <label ng-repeat="item in itemList"> <input type='checkbox' checklist-model='itemCheckList' checklist-value='item.name'> <span class=& ...

htmlcssangularjs

Encountered an issue while attempting to retrieve the access token from Azure using JavaScript, as the response data could

Seeking an Access token for my registered application on Azure, I decided to write some code to interact with the REST API. Here is the code snippet: <html> <head> <title>Test</title> <script src="https://ajax.google ...

javascripthtmljqueryazurepowerbi-embedded

Refreshing an ajaxForm post content reload using ajax (version jQuery 1.4.2)

Why is this an issue when using jQuery 1.4.2 instead of 1.3.2? Here is the function in question: function prepare_logo_upload() { $("#logo-upload-form").ajaxForm({ //alert(responseText); success: ...

jqueryajaxbindingdynamic-rebinding

Issues with jQuery fundamentals

For a while now, I've been grappling with jQuery. It's undeniably powerful and offers a plethora of fantastic capabilities. However, my struggle lies in the fact that I tend to incorporate multiple jQuery features simultaneously. For example, on ...

javascriptjqueryjquery-events

The entire framework remains concealed as the anchor component becomes immeasurable

Within a fixed-width paragraph, I have an anchor tag. The CSS for the p tag includes the properties text-overflow: ellipsis and overflow:hidden. However, when the anchor tag's content overflows (e.g., it contains a long string), the right outline is n ...

htmlcss

What is the best way to add padding to each line within a block of text containing multiple lines

My <span> tag has a background color and left and right padding applied to it. However, the padding is only visible at the beginning and end of the <span>, not on each line when the text wraps onto multiple lines. Is there a way to add padding ...

htmlcss

"Implementing a .gif Preloader Before Executing Animation with jQuery

I am currently working on an animation project using Jquery. The project consists of various images in .png format and div tags, with some being small file sizes while others are as large as 5mb. Is there a way to incorporate a pre-loading (.gif) animatio ...

jqueryajax

Using Wordpress's built-in feature for displaying images in the admin panel can enhance the user experience and make

I'm currently in the process of developing a unique Wordpress plugin for one of my customers and I really want to incorporate a modal popup feature on the admin page. After experimenting with ThickBox, LightBox, and Fancybox, none of them seem to do t ...

jqueryjquery-pluginswordpress

modify rectangular section in drupal rather than numerical block

Currently, I am attempting to modify blocks within my Drupal 7.x website using the Zen base theme. While I have been successful in adjusting the CSS styles of the blocks based on their numbers in the block.css file, I find this method quite confusing. Is ...

cssdrupal-7drupal-theming

Ensure that the Div element is able to wrap lines in the same way that the Span element

Is there a method to ensure that a div element wraps the lines similar to how a span does? JSFiddle for testing In this example, I utilized the span tag to create an appearance as if the text was highlighted by a yellow highlighter pen. Everything functi ...

htmlcss

The integration of CSS into Laravel was unsuccessful

Below is the content of my index file located in views.admin: <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet&qu ...

csslaravel