如何雙擊添加和刪除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> 

現在，如果我雙擊sd類，它將刪除整行。 我要添加的是，當我雙擊se類時，它會添加一行。

Answer 1

要刪除.sd行：

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

要復制最后一個.se行：

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

在這里，您有一個可行的解決方案。

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

使用.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

• 雙擊.sd >刪除行
• 雙擊.se >添加新行

我還將類.sd添加到了新創建的行中，因此可以將其刪除。

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

只要確保將一個id添加到您的表即可。

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

Answer 5

這是您要找的東西嗎？

的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();});

因此，現在，當我雙擊“ sd”類時，它將添加一行。

工作演示： JSFiddle