"Step-by-step guide on adding and deleting a div element with a double click

$(".sd").dblclick(function() {
  $(this).parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="750" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" bgcolor="#333" class="st">Size Chart</td>
  </tr>
  <tr>
    <td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>
    <td width="100" bgcolor="#FCF2E8" class="se">UK sizes</td>
    <td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>
  </tr>
  <tr class="row-edit">
    <td height="20" bgcolor="#FEFDF8" class="sd">17</td>
    <td height="20" bgcolor="#FEFDF8" class="sd">27</td>
    <td height="20" bgcolor="#FEFDF8" class="sd">25</td>
  </tr>
</table>

Currently, a double click on the sd class removes the entire row. I would like to enhance this functionality so that a double click on the se class adds a new row.

javascriptjqueryhtmlcss

Answer №1

To eliminate the .sd row:

$('body').on('dblclick', '.sd', function() {
  $(this).parent().remove();
});

To replicate the last .se row:

$('body').on('dblclick', '.se', function () {
  const $table = $(this).parents('table').first();
  let $row = $table.find('tr:has(.sd)').last();
  if ($row.size() == 0) {
    $row = $([ '<tr class="row-edit">'
             , '<td height="20" bgcolor="#FEFDF8" class="sd">17</td>'
             , '<td height="20" bgcolor="#FEFDF8" class="sd">27</td>'
             , '<td height="20" bgcolor="#FEFDF8" class="sd">25</td>'
             , '</tr>'
             ].join('')
            );
  }
  $table.append($row.clone(true));
});


$('body').on('dblclick', '.sd', function() {
  $(this).parent().remove();
});

$('body').on('dblclick', '.se', function () {
  const $table = $(this).parents('table').first();
  let $row = $table.find('tr:has(.sd)').last();
  if ($row.size() == 0) {
    $row = $([ '<tr class="row-edit">'
             , '<td height="20" bgcolor="#FEFDF8" class="sd">17</td>'
             , '<td height="20" bgcolor="#FEFDF8" class="sd">27</td>'
             , '<td height="20" bgcolor="#FEFDF8" class="sd">25</td>'
             , '</tr>'
             ].join('')
            );
  }
  $table.append($row.clone(true));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table width="750" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" bgcolor="#333" class="st">Size Chart</td>
  </tr>
  <tr>
    <td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>
    <td width="100" bgcolor="#FCF2E8" class="se">UK sizes</td>
    <td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>
  </tr>
  <tr class="row-edit">
    <td height="20" bgcolor="#FEFDF8" class="sd">17</td>
    <td height="20" bgcolor="#FEFDF8" class="sd">27</td>
    <td height="20" bgcolor="#FEFDF8" class="sd">25</td>
  </tr>
</table>

Answer №2

Here is the solution that works:

$(document).on("dblclick", ".sd", function() {
  $(this).parent().remove();
});
$(document).on("dblclick", ".se", function() {
  $(this).parent().parent().append(
    '<tr class="row-edit"><td height="20" bgcolor="#FEFDF8" class="sd">17</td>td height="20" bgcolor="#FEFDF8" class="sd">27</td><td height="20" bgcolor="#FEFDF8" class="sd">25</td></tr>')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="750" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="3" bgcolor="#333" class="st">Size Chart</td>
  </tr>
  <tr>

    <td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>
    <td width="100" bgcolor="#FCF2E8" class="se">UK sizes</td>
    <td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>
  </tr>
  <tr class="row-edit">
    <td height="20" bgcolor="#FEFDF8" class="sd">17</td>
    <td height="20" bgcolor="#FEFDF8" class="sd">27</td>
    <td height="20" bgcolor="#FEFDF8" class="sd">25</td>
  </tr>
</table>

Answer №3

Try using the code .parent().parent().append()

$( ".sd" ).dblclick(function() {$( this ).parent().remove();});
$( ".se" ).dblclick(function() {$( this ).parent().parent().append(
            '<tr>'
            +'<td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>'
            +'<td width="100" bgcolor="#FCF2E8" class="se">15</td>'
            +'<td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>'
            +'</tr>')
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="750" border="0" cellpadding="0" cellspacing="0">
                       <tr><td colspan="3"  bgcolor="#333" class="st">Size Chart</td></tr>
                        <tr>

                        <td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>
                        <td width="100" bgcolor="#FCF2E8" class="se">UK sizes</td>
                        <td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>
                        </tr>
                        <tr class="row-edit">
                        <td height="20" bgcolor="#FEFDF8" class="sd">17</td>
                        <td height="20" bgcolor="#FEFDF8" class="sd">27</td>
                        <td height="20" bgcolor="#FEFDF8" class="sd">25</td>
                        </tr> </table>

Answer №4

  • click twice on .sd -> remove row
  • click twice on .se -> insert new row

A newly created row has been assigned the class .sd, allowing you to delete it as well.

$(".sd").dblclick(function () {
  $(this).parent().remove();
});

$(".se").dblclick(function() {
  let table = document.getElementById('myTable');
  
  tr = document.createElement("tr");
  tr.setAttribute("class", "row-edit");

  td = document.createElement("td")
  td.appendChild(document.createTextNode("5"));
  td.setAttribute("class", "sd");
  tr.appendChild(td);

  td = document.createElement("td")
  td.appendChild(document.createTextNode("123"));
  td.setAttribute("class", "sd");
  tr.appendChild(td);

  td = document.createElement("td")
  td.appendChild(document.createTextNode("555"));
  td.setAttribute("class", "sd");
  tr.appendChild(td);

  table.appendChild(tr);
});

Remember to include an id for your table.

<table id="myTable" width="750" border="0" cellpadding="0" cellspacing="0">
...
</table>

Answer №5

Does this meet your needs?

Code Snippet:

<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
   <td colspan="3"  bgcolor="#333" class="st">Size Chart</td>
</tr>
<tr>
  <td width="116" bgcolor="#FCF2E8" class="se">US Sizes</td>
  <td width="100" bgcolor="#FCF2E8" class="se">UK sizes</td>
  <td width="100" bgcolor="#FCF2E8" class="se">Foot Length (cm)</td>
</tr>
<tr class="row-edit">
  <td height="20" bgcolor="#FEFDF8" class="sd">17</td>
  <td height="20" bgcolor="#FEFDF8" class="sd">27</td>
  <td height="20" bgcolor="#FEFDF8" class="sd">25</td>
</tr>
<tr class="row-add" style="display:none">
  <td height="20" bgcolor="#FEFDF8" class="add">20</td>
  <td height="20" bgcolor="#FEFDF8" class="add">28</td>
  <td height="20" bgcolor="#FEFDF8" class="add">32</td>
</tr>
</table>

JQuery Functionality:

$( ".sd" ).dblclick(function() {$(".row-add").show();});

By double clicking on an element with the "sd" class, a new row is added dynamically.

Check out the live demo: JSFiddle Example

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

What is stopping this paragraph from being vertically centered with just one line?

After following instructions from another user, I successfully centered text vertically. However, I encountered difficulties when trying to center the entire content vertically. My attempt to enclose the text in its own div did not yield the desired result ...

csshtml

How to submit a form using jQuery/AJAX/PHP without refreshing the page, but struggling to extract the form values for email submission

I need help with creating a form that submits a tracking number using jquery and php without refreshing the page. I have managed to send an email upon form submission, but I can't figure out how to include the form information in the email body ($emai ...

phpjqueryajaxforms

Firefoxi is the only browser that exhibits strange padding and margin behavior

Check out this webpage at: www.bit.ly/1b4dUqs Most browsers display the page correctly, but there seems to be an issue with Firefox's (latest version) handling of margin-top/padding-top styles. If anyone has a solution for this problem, please share ...

cssfirefoxmarginpadding

Dynamic Creation of a jQuery Selector

Dear, I'm facing an issue while trying to load data dynamically into a table using JSON format. The data is coming from a PHP file. However, despite my attempts, the table remains empty and no data is being displayed. function fetchTableData() { ...

javascriptjqueryjson

Defining the active element in the menu using JavaScript

I need help with my navigation menu: <ul> <li id="active"><a href="/">Home</a></li> <li><a href="/about/">About Us</a></li> <li><a href="/services/">Our Services</a>< ...

javascripthtmlcss

Is your prop callback failing to return a value?

I am currently utilizing a Material UI Table component in my ReactJS project and I would like to update a state variable whenever a row is selected or deselected. The Table component has an onRowSelection prop that gets triggered each time a row is is sele ...

javascriptreactjsmaterial-ui

What is the best way to set values for the outcomes of a jQuery/AJAX post?

When sending data to a php page using jquery, I aim to receive the response from the page and store it in php variables on the original page without displaying results in the HTML or appending a DIV. Here's an example of how this can be achieved: Sam ...

javascriptphpjqueryajax

Discovering parent elements far up the DOM hierarchy using jQuery

I'm a bit confused about how to locate an element that is a parent element further up the tree. $('.btn-action').hover( function(){ $(this).find('.product-card').addClass('animated bounce'); }, function(){ ...

javascriptjqueryfindparent

Retrieve the original state of a ReactJs button from the database

I am completely new to ReactJs and I have a question regarding how to set the initial state of a button component based on data from an SQL database. I am successfully retrieving the data using PHP and JSON, but I am struggling with setting the state corre ...

javascriptreactjs

tips for remaining in modal window post form submission

I have a form within a modal window. I am using ajax to load content in the same modal window, but the issue is that it redirects to the main page after submitting the form. How can I ensure that the modal window stays open even after the form submission? ...

javascripthtmlajax

Leverage the power of JavaScript validation combined with jQuery

Hello, I'm relatively new to the world of Javascript and jQuery. My goal is to create a suggestion box that opens when a user clicks on a specific button or div element. This box should only be visible to logged-in users. I have some knowledge on how ...

javascriptc#jqueryhtmlasp.net

Iterating through a JavaScript object

Just starting out with JavaScript and trying to figure out how to iterate through a JSON result that has been converted into a JavaScript object. const url = 'https://api.mybitx.com/api/1/tickers?pair=XBTMYR'; fetch(url) .then(res => re ...

javascript

Guide to adding an icon within an HTML `<input>` element

Is anyone able to help me successfully place my icon font inside the search input field? I've tried adjusting the margin and padding, but nothing seems to be working! If you have any insights or suggestions, please let me know. Your help is greatly a ...

htmlcss

What could be the reason my view is not updating with the use of a js.erb file in Rails 4?

I found a helpful guide on this blog to implement a toggle feature for an attribute in my database. While the toggling functionality is working fine, I'm struggling to update my view to reflect the changes. This is my first time using js.erb files so ...

jqueryruby-on-railsajaxruby-on-rails-4

What are the steps for conducting a component test with material ui?

My current component is built using . import React from 'react'; import { AppBar, Toolbar } from 'material-ui'; import { Typography } from 'material-ui'; import { MuiThemeProvider, createMuiTheme } from 'material-ui/sty ...

javascriptreactjsmaterial-uijestjsenzyme

Executing JavaScript functions when a browser tab is closed

When a user closes the browser tab, I want to call a specific JavaScript function. However, I only want this to occur when the user is actually closing the browser, not during page refreshes, link navigation, form submissions, or pressing the back button. ...

javascriptjquery

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?

I attempted to replicate the math used for the previous image cuts and added my own image, but it appears blank. Can you identify where the issue lies? #paymentForm { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webk ...

htmlcss

What is the best way to ensure the footer remains in an automatic position relative to the component's height?

I am struggling to position the footer component correctly at the end of my router-outlet. After trying various CSS properties, I managed to make the footer stay at the bottom but it acts like a fixed footer. However, I want the footer to adjust its positi ...

htmlcssangularangular-material

Retrieving data from a JSON file at 10-minute intervals with Ajax and visualizing it on Google's globe API

After downloading Armsglobe, a globe API provided by Google to draw lines in countries using their names, I noticed that the original code does not fetch JSON data periodically. I attempted to use a simple setTimeout() function in dataloading.js to address ...

javascriptjsonajaxgoogle-api

`Inquiry into AJAX form submission problem`

Here is the HTML markup and JS code for my signup page. I encountered an issue where, if I leave all text inputs blank and click submit for the first time, it validates and shows an error message. However, when I click submit a second time, it directly sen ...

javascriptajaxjquerypost