I want to implement an onclick event for a table row that will change the background color of the row to red when the decline button is pressed

The provided code snippet is not functioning correctly. It involves using JSON to import data for a table displayed in HTML. Each table row contains a modal button that, when clicked, opens a modal view with two additional buttons (approve and disapprove). The desired functionality is such that clicking on approve or disapprove will trigger specific actions on the corresponding row in the table (i.e., either remove it if approved or change background color to red if disapproved).

html{
            font:0.75em/1.5 sans-serif;
            color:#333;
            background-color:#fff;
            padding:1em;
        }
        /* Remaining CSS code */

<!-- JavaScript Code -->


{
  "person": [
   {
       "firstName": " ",
       "lastName": "Kent",
       "job": "Reporter",
       "roll": 20,
       "hours":10
   },
   {
       "firstName": " ",
       "lastName": "Wayne",
       "job": "Playboy",
       "roll": 30,
       "hours":20
   },
    {
    "firstName": " ",
    "lastName": "Scott",
    "job": "PaperMan",
    "roll": 20,
    "hours": 40
        }
   ]
}

~

javascripthtmlcssonclickmodal-dialog

Answer №1

Here is the solution you requested: https://jsfiddle.net/qwyjkcrr/

var people = [];
var data = {}; // JSON data will be retrieved with getJSON

var row = 0;

$.each(data.person, function(i, f) {
  var tblRow = "<tr>" + "<td><button class='button-border toggleModal toggleModalFromTable'><span class='icon'></span> Timesheet Approval</button></td>" + "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "<td>" + f.hours + "</td>" + " </tr>"
  $(tblRow).appendTo("#userdata tbody");
  $('#userdata').on('click', '.toggleModalFromTable',  function (e) {
  row = $(this).closest('tr').index() + 1;
    $('.modal').toggleClass('active');
});
});

$('.approve').click(function(){
 $('.modal').toggleClass('active');
   $('table tbody tr:nth-child(' + row + ')').remove();
});

$('.disapprove').click(function(){
$('.modal').toggleClass('active');
  $('table tbody tr:nth-child(' + row + ')').css({
  'background': 'red'
  });
});
html{
            font:0.75em/1.5 sans-serif;
            color:#333;
            background-color:#fff;
            padding:1em;
        }

        /* Tables */
table{
    width:100%;
            margin-bottom:1em;
            border-collapse: collapse;
border: 1px;
        }
th{
    font-weight:bold;
            background-color:#ddd;
        }
        
td{
    padding:0.5em;
            border:1px solid black;

        }

tr:nth-child(even) {
    background-color: #ddd;

}

a.button {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;

    text-decoration: none;
    color: initial;
}

@font-face {
  font-family: 'ios7-icon';
  src: url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff") format("woff"), url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 50px;
  font-family: 'Helvetica Neue' !important;
  font-weight: 300;
}

.wrapper {
  max-width: 500px;
  margin: 0 auto;
}

h1 {
  font-weight: 100;
  font-size: 45px;
  color: #007aff;
}

h2 {
  font-weight: 500;
  font-size: 21px;
  margin-bottom: 15px;
}

section {
  margin-top: 30px;
}
section p {
  line-height: 1.4;
  margin-bottom: 20px;
}



button {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  border: none;
  outline: none;
  font: inherit;
  cursor: pointer;
  margin: 0;
  padding: 0;
   background: LightBlue; 
  color: #007aff;
  font-weight: 300;
  font-size: 14px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  /* &:nth-child(even){ */
  /* background: white; */
  /* } */
  /*  &:last-child {
      border-color: red;
      margin-bottom: 0;
    }*/
}
button:hover {
  text-decoration: underline;
}
button.button-border {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 12px 8px 12px;
  border: 1px solid #007aff;
}
 button.button-border:hover { 
   background: #007aff; 
   color: #ffffff; 
  text-decoration: none; 
 } 
 button.button-success { 
  /color: #4dd865; */
   border-color: #4dd865; 
 } 
 button.button-success:hover { 
   background: #4dd865; 
 } 
 button.button-error { 
   color: #ff3b30; 
  border-color: #ff3b30; 
 } 
 button.button-error:hover { 
   background: #ff3b30; 
 } 

.modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 430px;
  height: auto;
  margin-left: -200px;
  margin-top: -150px;
  background-color: #ffffff;
  padding: 25px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
}
.modal.active {
  display: block;
}
.modal header {
  position: relative;
}
.modal h2 {
  text-align: center;
}
.modal .close {
  position: absolute;
  top: 3px;
  right: 0;
  margin: 0;
}

.pull-right {
  float: right;
}

.icon {
  display: inline-block;
  font-size: inherit;
  font-family: circle;
  margin-right: 5px;
  color: inherit;
  -webkit-text-rendering: geometricPrecision;
  -moz-text-rendering: geometricPrecision;
  -ms-text-rendering: geometricPrecision;
  -o-text-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="userdata" rules="groups" style="border: 1px solid black;">
        <thead>

                <tr>
                        <th> </th>
                        <th>EmployeeNum</th>
                        <th>EmployeeName</th>
                        <th>ChargeNum</th>
                        <th>Hours</th>
                </tr>

        </thead>

        <tbody>

        </tbody>
</table>

 <div class="modal">

    <header>
     
 <button class="close toggleModal">Close</button>
    </header>

    <section>
      <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>
    </section>

    <button class="button-border button-success toggleModal approve">
      <span class="icon"></span> Approve </button>

    <button class="button-border button-error pull-right toggleModal disapprove">
      <span class="icon"> < </span> Disapprove </button>
                <!-- <script> $(docuemnt).ready(function(){ -->
                        <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->
                        <!-- $("#a").style.color = "red"}); -->
                        <!-- </script> -->

  </div>

Please update the JSON data retrieval using getJSON.

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

Tips for aligning the dot in the middle of a radio input box

I have developed a reusable Radio group component, and I am using styled components to style it. The goal is to position the dot right in the center of the circle, and it is somewhat achieving that in the screenshot below: https://i.sstatic.net/Kistg.png ...

javascripthtmlcssreactjsstyled-components

Showing a div element with the power of JavaScript

I want to enhance the accessibility of my website for users who do not have JavaScript enabled. Content that will be visible if the user has JavaScript enabled. Content visible when JavaScript is disabled. By default, DisableJS is set to Display:none; ...

javascriptjquerycss

Is it possible to adjust the viewport to a size larger than 1024?

This site we're examining is not responsive and has a width of about 1230 pixels. When viewed on mobile devices, some content is cut off from the right side due to compression, resulting in approximately a 10% loss. The issue becomes more noticeable ...

htmlmobilemeta-tagsdevice-width

Sending the format of the display value to an Angular component

Looking for a way to pass display value formatting to an Angular component. Here are a couple of examples: format="'(utc, offset) location (tz)'" === '(UTC -04:00) New York (EDT)' or format="'(tz, offset) location'" === &a ...

javascriptangularjsregexstringformatting

"jQuery UI: Experience the Ease of Drag-and-Drop Tools

I am currently working on developing a unique web editor concept. This involves creating a page with a draggable toolbar containing divs with background images representing HTML elements, along with a drop zone (a large div). Users are able to generate HTM ...

javascriptjquerycssjquery-ui

Immersive Visual Symphony through Dynamic Multi-Layered

My goal is to create captivating animations for my multiple background images. Here's the CSS code I've come up with: .header { background-image: url('/img/cloud2.png'), url('/img/cloud3.png'), url('/img/cloud1.png&apos ...

javascriptjqueryimagecss

Alternative Email for Outlook and Gmail

Hey amazing and intelligent buddies! I've been working on implementing a fallback system for email clients, but despite consulting resources like this HTML Emails: fallback for mso conditional? and other insightful blogs, I still seem to be facing so ...

htmlcssemailoutlookgmail

Why does JavaScript consider [1,2,3] to not be equal to [1,2,3]?

Can someone explain why [1,2,3] is not the same as [1,2,3] and [1,2,3] in JavaScript? I saw this in a YouTube video and it got me curious. Are there any more interesting quirks like this in coding? ...

javascript

Can anyone provide tips for identifying empty spaces within an HTML document using JavaScript?

Is there a way to detect the spaces between all words on an HTML page using JavaScript? For instance: An example sentence is provided below In this sample, there are visible spaces separating "an" and "example" as well as all subsequent words. Any idea ...

javascripthtml

Is it feasible to simultaneously assign an object while destructuring a different one (all while utilizing defaults in the destructuring process)?

My ultimate objective is to effortlessly create a new object by utilizing the spread operator from an object that has been destructured while assigning default values, if they are absent. It seems like achieving this goal might not be as straightforward a ...

javascriptjsonecmascript-next

Unexpected behavior in ReactJS when using Material UI

In my Webpack + ReactJS project, I am working on creating a table using Material UI. I am trying to implement an 'icon menu' feature with a 'menu item' that allows users to delete a specific line along with its associated data. Below i ...

javascriptreactjsmaterial-ui

What is the best way to arrange flex elements in distinct columns for stacking?

Recently, I utilized the flex property along with flex-flow: column nowrap to showcase my elements. Take a quick look at what my elements currently resemble: [this] It's quite apparent that simply stacking both columns on top of each other won't ...

javascripthtmlcssajaxflexbox

Receiving "Illegal Invocation" error when attempting to submit form using ajax

I am attempting to submit a form using ajax, and here is the form code: <form class="form-vertical" method="POST" id="request-form" action="/post_handler?request=add_data" enctype="multipart/form-data"> <div class="form-group"> <label ...

javascriptajaxhtmlajaxform

"Transforming your menu into a fully responsive Bootstrap menu: a step-by

Struggling to implement a responsive and animated Bootstrap 5 menu in this Codepen example. Tinkered with a few things, but it always seems to break one way or another. Check out the example here Looking to swap out the current menu with a Bootstrap menu ...

javascripthtmlcssbootstrap-5

The error message "invalid module name" is preventing Phoenix from creating an HTML template

Encountering issues while trying to run the phx.gen.html templates. Below is the command that I am attempting: mix phx.gen.html Shipments shipmentroutes shipmentroute address:string date:string groups_involved:string An error message is displayed as fol ...

htmlgeneratorphoenix-framework

Concealing a division at the conclusion of a <section>

Is there a way to toggle the visibility of a div based on scrolling? When reaching section 2; The 'banner' div should appear at the start of section 2 and disappear when section 2 ends. But how can I determine when section 2 is finished in this c ...

javascripthtmljquerycss

Node text: three.js and ngraph.tree working together

I am currently working on developing a 3D network (network of people) for a browser using three.js and ngraph. The graph has been successfully created, but the nodes are currently displayed as squares. My goal is to replace these squares with the text "nod ...

javascriptgraphthree.js

Placing a stacked column underneath existing columns with Foundation grid technology

Can Foundation's grid system be used to achieve the following layout? On Large Screens ################ ################ # # # # # # # Col 2 # # # # # # # ...

htmlcsszurb-foundation

"What is the best way to access the value of a useState variable in ReactJS on a global

Below is my reactJS code snippet - useEffect(()=>{ const getinterviewerDetails= async ()=>{ const data1 = await axios.get("http://localhost:8083/api/GetProduct") .then(response => { console.log("role is " ...

javascriptreactjsreact-hooksdom-eventsjavascript-objects

Exploring the capabilities of jest-next-dynamic through dynamic imports in Jest testing

Currently, I am in the process of testing dynamic imports in Next.js version 10.2.3. To achieve this, I decided to utilize the jest-next-dynamic library to prevent any potential errors from occurring. However, during my testing, I encountered a TypeError ...

javascriptreactjsjestjsnext.jsenzyme