I want to add this function inside the nested loop inside the function function :

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

loop :

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>';
   }

the reason : when i double click on any cell in the table the content will be removed

CodePudding user response：

It would be much easier to use event delegation. Attach the listener to the table so it can capture events as they "bubble" up the DOM from the cells.

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