Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Question

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Two tables are involved in this scenario - one that receives dynamically added rows, and another that stores the data to be included.

The illustration above displays these tables. Upon clicking the Edit button, the information from the selected row in Table 1 is transferred to the fields directly below it (Table 2), while the edited row in Table 1 is highlighted with CSS.

var row = $(a).parent().parent();
row.children('td').css('background-color', '#FFFFCC');

If I am able to determine the index of the row being edited in Table 1, how can I change its background back to white when the user clicks the 'Cancel' button?

javascript jquery css asp.net

Answer 1

Answer №1

Have you considered simply attaching an event to the 'onclick' function for the cancel link?

Here is an example:

$('.edit').on('click', function(event){
     var row = $(this).parent().parent();
     row.children('td').css('background-color', '#FFFFCC');
     //---Add event listener for cancel button.
     $('.cancel').once('click', function(event){
            row.children('td').css('background-color', '#FFFFFF'); //---Previous color     
     });

});

I have not tested this code, but I hope it provides a helpful solution or alternative for you.

Answer 2

Have you considered simply attaching an event to the 'onclick' function for the cancel link?

Here is an example:

$('.edit').on('click', function(event){
     var row = $(this).parent().parent();
     row.children('td').css('background-color', '#FFFFCC');
     //---Add event listener for cancel button.
     $('.cancel').once('click', function(event){
            row.children('td').css('background-color', '#FFFFFF'); //---Previous color     
     });

});

I have not tested this code, but I hope it provides a helpful solution or alternative for you.

Answer 3

Answer №2

When arranging rows in a table, the index refers to the position of the row and tbl represents the table being referenced.

let index = 1;
tbl = $("table")
$("#cancel").click(function(){
    let rows = $('tr', tbl);
    rows.eq(index).css("background-color", "white");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border=1 style="background-color:yellow">
  <tr><td>a</td><td>b</td></tr>
  <tr><td>c</td><td>d</td></tr>
</table>

<input type="button" id="cancel" value="cancel" />

Answer 4

When arranging rows in a table, the index refers to the position of the row and tbl represents the table being referenced.

let index = 1;
tbl = $("table")
$("#cancel").click(function(){
    let rows = $('tr', tbl);
    rows.eq(index).css("background-color", "white");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border=1 style="background-color:yellow">
  <tr><td>a</td><td>b</td></tr>
  <tr><td>c</td><td>d</td></tr>
</table>

<input type="button" id="cancel" value="cancel" />

Update Table Row Background Color in Separate Table by Clicking Button Using JQuery

Answer №1

Answer №2

Similar questions

I was caught off guard by the unusual way an event was used when I passed another parameter alongside it

Establishing a Next.js API endpoint at the root level

Enhancing webpack configuration with chainWebpack to customize infrastructure logging settings

scalable and circular picture displayed within a bootstrap-5 card

ASP.NET Data Access Layer utilizes the Repository Pattern along with a Service Layer for efficient

Tips for capturing the current terminal content upon keypress detection?

Issues with iFrame Alignment

Issues encountered when trying to use default color classes in Tailwind CSS

Is there a way to monitor and trigger a function in jQuery when a loaded PHP file is modified?

Show various columns in Select2

Show a specific div using jQuery fadeIn() when the user reaches the top of an HTML section

Connecting Next.js to a Database: A Step-by-Step Guide

Tips for vertically aligning <p> and <div> elements without using the table-cell property

Creating a PNG image on a canvas, converting it to a data URL, and then transmitting it using an XMLHttpRequest in NodeJS/Express

Ways to create a unique animation for reducing the width of a div in a specific direction?

I encountered an issue while attempting to connect to my MySQL database using my Express API endpoint: error message "connect ECONNREFUSED 127.0

What would be more efficient: inputting all items in a form at once or adding them one by one consecutively

Assistance required in adjusting the clickable area of the link

The conclusion of Ajax's response signals the beginning of Jqmobi

Response is sent by Sequelize Foreach loop before data is updated