$(".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 类时,它会添加一行。
最佳答案
要删除 .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>
关于javascript - 如何在双击时附加和删除div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52310747/