如何双击添加和删除div

Question

 $(".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> 

Right now If I double click on sd class it removes the whole row. What I want to add is that when I double click on se class it adds a row .

Answer 1

To remove .sd row:

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

To duplicate 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 you have a working solution.

 $(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

Use .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

• double click .sd -> delete row
• double click .se -> add new row

I also added the class .sd to the newly created row so you can delete it.

$(".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);
});

Just make sure to add an id to your table.

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

Answer 5

Is this what you were looking for?

HTML

<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:

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

So now, it add a row when I double click on a "sd" class.

Working demo: JSFiddle