双击任何单元格将被删除

Question

我想在函数内的嵌套循环中添加这个函数功能：

$("td").dblclick(function(){
             $(this).html(text(" "));
         });

循环：

for(var i = 0; i <nr ;i++)
   {
       table_body += '<tr>';
        for(var j = 0; j < nc; j++)
        {
                table_body += '<td class = "cell" ondrop="drop(event)" ondragover="allowDrop(event)">';
                table_body += '&nbsp&nbsp&nbsp';
                table_body += '</td>';
        }
        table_body += '</tr>';
   }

原因：当我双击 table 中的任何单元格时，内容将被删除

Answer 1

使用起来会容易得多event delegation。将侦听器附加到 table，以便它可以在事件从单元格“冒泡”到 DOM 时捕获事件。

$('table').on('dblclick', 'td', handleClick);

function handleClick() {
  $(this).text('');
}

table { border-collapse: collapse; border: 1px solid #565656; }
td { border: 1px solid #ababab; padding: 0.2em; }
td:hover { cursor: pointer; background-color: #ffff00; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr><td>Bob from accounting</td><td>45</td></tr>
    <tr><td>Stacey</td><td>92</td></tr>
    <tr><td>Steve</td><td>19</td></tr>
  </tbody>
</table>

双击任何单元格将被删除

double click on any cell will be removed

javascript

jquery