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

如何双击添加和删除div

5 个答案: