"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

Sorting alphabetically, either by JAVA, JavaScript, or Idoc script

Currently, I have a task at hand that requires sorting items within categories alphabetically, with the exception of Examples. Special characters and numbers should be prioritized over letters in the sorting order. I've encountered an issue where mos ...

javajavascriptsortingalphabeticalidoc

Unable to import necessary modules within my React TypeScript project

I am currently building a React/Express application with TypeScript. While I'm not very familiar with it, I've decided to use it to expand my knowledge. However, I've encountered an issue when trying to import one component into another comp ...

javascriptnode.jsreactjstypescriptnode-modules

Using JavaScript to Filter Through Numerous Values Based on Different Attributes

My goal is to efficiently filter multiple attributes with multiple values 'arr' represents a list of all products, and 'f_...' indicates the attribute such as color or type. 'namet' denotes the selected attribute by the user ...

javascriptarraysjsonfilterattributes

The extjs datecolumn is displaying dates with a one-day discrepancy

My Ext.grid has a datecolumn, but I'm experiencing an issue where the dates displayed are off by one day. The problem seems to be related to timezones, as when data is added to the store it shows up differently later on. For example, 2013-03-31 becom ...

javascriptdategridextjs4.1utc

Is there a distinction in invoking a service through reference or directly in Dependency Injection?

QUERY: Are there any discernible differences between the two instances of utilizing a factory service? Instance 1: angular.module('ramenBattleNetworkApp') .controller('MainCtrl', function ($scope, Helpers) { var testArray = [1 ...

javascriptangularjsdependency-injectionfactorycontrollers

Assigning a value to a variable from a method in Vue: a step-by-step guide

I'm having trouble assigning values from a method to variables in HTML. Here's what I have in my code: <b-card-text>X position {{xpos}}</b-card-text> <b-card-text>Y position {{ypos}}</b-card-text> I would like to assign v ...

javascriptvue.js

Guide to building an Angular circular progress indicator using Scalable Vector Graphics (SVG)

I have designed an angular circular progress bar, but I am facing an issue with making the percentage value dynamic. I have managed to retrieve the dynamic value from an API, but I am unsure of how to implement it in creating a circular progress bar using ...

cssangularsvg

Converting Markdown to HTML using AngularJS

I'm utilizing the Contentful API to retrieve content. It comes in the form of a JSON object to my Node server, which then forwards it to my Angular frontend. This JSON object contains raw markdown text that has not been processed yet. For instance, t ...

javascripthtmljsonangularjsmarkdown

Guide on dynamically updating a div in PHP with a mix of text output and images at regular intervals

My current project involves creating a browser-based card game primarily using PHP, with potentially incorporating other languages to help me enhance and test my PHP skills. However, I've encountered difficulties while attempting to implement various ...

javascriptphpjqueryajaxpage-refresh

Sign up for an observable only when a specific variable has been modified

I am facing an issue where I need to restrict the usage of rxjs's subscribe method to only certain property changes. I attempted to achieve this using distinctUntilChanged, but it seems like there is something missing in my implementation. The specif ...

javascriptangularjsrxjs

What is the best way to display the legend on my PieChart?

I am attempting to display the names of colors in my PieChart as a legend. Here is the JSON data: { "choice": "20-29 yrs. old", "count": 4 }, { "choice": "30-39 yrs. old", "count": 2 }, { "ch ...

javascriptreactjsmaterial-uirecharts

If the checkbox is selected, the textbox will receive the class "form-input validate required" upon Jquery validation

I am using Jquery Validation plugin to validate a form on my website. Below is the HTML form code: <form id="caller"> <label>Phone:</label> <input type="text" name="phone" id="phonen" class="form-input" value="" /> <di ...

javascriptjqueryhtmlformsvalidation

Moving object sideways in 100px intervals

I'm struggling to solve this issue. Currently, I have multiple div elements (each containing some content) that I need to drag and drop horizontally. However, I specifically want them to move in increments of 100px (meaning the left position should b ...

javascripthtmlcssvue.js

Is there a way to extract information from an external XML document and incorporate it into an HTML file?

I am attempting to extract information from an XML file that is not stored on my website's server. My goal is to utilize this data for various purposes, such as generating charts. One specific example involves using weather data from an XML file locat ...

javascriptxmlexternal

Incorporating a pre-existing component into a Vue.JS template through an onclick event: How can this

I'm trying to enhance my template by implementing a feature that allows me to add a component simply by clicking on a button. Let me give you a glimpse of what I have in mind: The component named Draggable.vue is the one I intend to incorporate upon c ...

javascripthtmlvue.js

What is the best method to activate a JavaScript function after 1 minute of user inactivity?

I need to set up a web page where a JavaScript function is activated after 1 minute of user inactivity. The page primarily features the <form> component. What's the best way to implement this type of function? ...

javascriptjquery

Discover the depth of a deeply nested array

I have a complex array structure that looks something like this: I am trying to determine the depth of this nested array, focusing on the element with the most deeply embedded children. let arr = [ { name: 'tiger', children: [{ ...

javascriptarraysrecursionnested

Setting a parent for CSS selectors in Material UI: A step-by-step guide

Currently, I am in the process of developing a Chrome Extension that incorporates Material UI. By using the inject method, the extension is able to apply all of the Material UI styles seamlessly. I have been contemplating the idea of adding a parent selec ...

cssgoogle-chrome-extensionmaterial-uijss

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

Struggling to Position Advertisement in CSS

I've been struggling to properly center a div using CSS. Adding text-align: center; doesn't seem to do the trick. The issue can be found in the top advert on this website: . Do you have any suggestions? Here's some sample code: HTML: &l ...

htmlcssalignment