javascript - 如何在双击时附加和删除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>