Experience the thrill of living in jQuery!

Question

Experience the thrill of living in jQuery!

<table style="width: 50%" id="myTable">
 <tbody>
 <tr><td>Row 1</td><td>dd</td><td>red</td><td>dd</td></tr>
 <tr><td>Row 2</td><td>dd</td><td>green</td><td>dd</td></tr>
 <tr><td>Row 3</td><td>dd</td><td>red</td><td>dd</td></tr>
 </tbody>
</table>
<a href="#" name="addRow">Add Row</a>

$(document).ready(function () {        
       $("a[name=addRow]").click(function() {
                $("table#myTable tr:last").after('<tr><td>Row 4</td><td>dd</td><td>red</td><td>dd</td></tr>');
                return false;
        });

    $('#myTable tbody tr td').each(function()
{
    if ($(this).text() == 'red')
    {
        $(this).parent().css('background-color', 'red');
    }
    else if ($(this).text() == 'green')
    {
        $(this).parent().css('background-color', 'green');
    }
});

 });

why does this code not work when adding new rows? I have tried using the live function:

$('#myTable tbody tr td').live('each', function()

but unfortunately, it did not solve the issue.

LIVE: http://jsfiddle.net/pytP2/

javascript jquery html css

Answer 1

Answer №1

This code snippet demonstrates the functionality of adding a new row to a table and applying background colors based on the text content of the cells:

$(document).ready(function () {        

$("a[name=addRow]").click(function() {
    $("table#myTable tr:last").after('<tr><td>Row 4</td><td>dd</td><td>red</td><td>dd</td></tr>');
    initRow($("table#myTable tr:last"));
    return false;
});

$('#myTable tbody tr').each(function()
{
    initRow($(this));
});

function initRow(row)
{
    row.find('td').each(function(){
        var self = $(this);
        var textInTD = $.trim(self.text());
        if (textInTD == 'red')
        {
            row.css('background-color', 'red');
            return false;
        }
        else if (textInTD == 'green')
        {
            row.css('background-color', 'green');
            return false;
        }
    })
}
});

If further explanation is needed, comments can be added to clarify the code.

Answer 2

This code snippet demonstrates the functionality of adding a new row to a table and applying background colors based on the text content of the cells:

$(document).ready(function () {        

$("a[name=addRow]").click(function() {
    $("table#myTable tr:last").after('<tr><td>Row 4</td><td>dd</td><td>red</td><td>dd</td></tr>');
    initRow($("table#myTable tr:last"));
    return false;
});

$('#myTable tbody tr').each(function()
{
    initRow($(this));
});

function initRow(row)
{
    row.find('td').each(function(){
        var self = $(this);
        var textInTD = $.trim(self.text());
        if (textInTD == 'red')
        {
            row.css('background-color', 'red');
            return false;
        }
        else if (textInTD == 'green')
        {
            row.css('background-color', 'green');
            return false;
        }
    })
}
});

If further explanation is needed, comments can be added to clarify the code.

Answer 3

Answer №2

bind will link a handler to a specific event for all current and future instances of the specified elements, which is not what you're trying to achieve here. You actually need to update the styling of new elements added to the table as they are created. Using bind would only be helpful if you wanted to apply a certain action like 'click' to each new row in your table.

To correct your code, make sure to invoke the style update function after adding each new element. You can see a functioning example here - http://jsfiddle.net/ipr101/zDvAQ/1/

Answer 4

bind will link a handler to a specific event for all current and future instances of the specified elements, which is not what you're trying to achieve here. You actually need to update the styling of new elements added to the table as they are created. Using bind would only be helpful if you wanted to apply a certain action like 'click' to each new row in your table.

To correct your code, make sure to invoke the style update function after adding each new element. You can see a functioning example here - http://jsfiddle.net/ipr101/zDvAQ/1/

Answer 5

Answer №3

live requires an event type (e.g. 'click') as its first argument. Visit http://api.jquery.com/live/

Answer 6

live requires an event type (e.g. 'click') as its first argument. Visit http://api.jquery.com/live/

Answer 7

Answer №4

This method may not be effective as the onload code will only trigger once during the initial load...

To ensure the code runs after adding a new row, it is recommended to move the necessary code into a separate function and call it following the addition of the new rows.

For concern over performance issues, especially with large tables, it may be beneficial to pass the newly added row to the function as well.

Answer 8

This method may not be effective as the onload code will only trigger once during the initial load...

To ensure the code runs after adding a new row, it is recommended to move the necessary code into a separate function and call it following the addition of the new rows.

For concern over performance issues, especially with large tables, it may be beneficial to pass the newly added row to the function as well.

Experience the thrill of living in jQuery!

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Preventing Unauthorized Script Usage in Jquery $.post and PHP to Safeguard Main Website

I'm having a strange issue where my code runs perfectly on JSFiddle, but it refuses to work on localhost

Using Angular 2 to bind to a formControl in a Select2 multiple selection scenario

Issue with MUI DataGridPro failing to sort the email field

What causes the div to not adjust to the browser window when the vertical size is decreased?

Using Typescript/JSX to assign a class instance by reference

Changing the hover color of an Angular Material MD Button

Can you tell me the standard font size in Internet Explorer 9?

What is the most efficient method for managing components with dynamic templates and their corresponding data in Vue.js?

What is the best way to stylize a date using Bootstrap-datepicker?

Achieving this result in HTML using a jQuery accordion component

Attaching a button to a keypress event in Vue 3.0

The jQuery datatable is functioning correctly, however the button is rendered but is not

Should the header include individual CSS and JS files, or should all code be contained within a single CSS and JS file?

Ways to verify if one div in jQuery contains identical text to another div

Is there a specific method or function that can effectively translate special characters such as into their corresponding representations?

Incorporate a checkbox that dynamically changes with the input type number

Aligning the start date and end date

Obtain the user's geolocation in React/Redux by utilizing a promise, then send the position to the action creator through dispatch

Turn off the Ripple effect on MUI Button and incorporate a personalized touch