Necesito borrar los datos en un HTML td onfocus, similar a cómo funciona en la entrada HTML, pero en una tabla editable que usa JQuery tabledit. La razón es que es una tabla CRUD y llena la tabla con datos de un Db. Si quiero editar uno de los td, no quiero tener que eliminar los datos existentes, sino que cuando hago clic en el td, el valor se establece en "" y luego puedo escribir los nuevos datos.
<td><?php echo $row['payment_company']; ?></td>Lo intenté de la siguiente manera, pero no establece el valor de los datos en vacío
<td onfocus="this.value=''"><?php echo $row['payment_company']; ?></td>Entonces, esto es lo que estoy tratando de hacer el equivalente a: -
<input type='text' id='name' value = 'Hello' onfocus = 'this.value = ""' /> Actualización: porque no funciona en mi código aquí, el HTML generado de las herramientas de desarrollo del navegador:
<td onclick="this.textContent='';" class="tabledit-view-mode"> <span class="tabledit-span">onclick textContent</span> <input class="tabledit-input form-control input-sm" type="text" name="payment_method" value="onclick textContent" style="display: none;" disabled="" > </td>Un td no tiene value ; en su lugar, podría usar innerHTML o textContent . Además, el evento de focus se activa si le das al elemento un tabindex . Alternativamente, podría usar un evento de click .
Ejemplo de trabajo:
<table> <td onfocus="this.innerHTML='';" tabindex="0">onfocus innerHTML / </td> <td onfocus="this.textContent='';" tabindex="0">onfocus textContent</td> <td onclick="this.innerHTML='';">onclick innerHTML / </td> <td onclick="this.textContent='';">onclick textContent / </td> </table>Para usar jQuery-Tabledit, debe seleccionar la entrada secundaria generada y vaciar su valor. Podrías hacer esto en línea:
<td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td>o con una llamada de función:
<td onfocus="emptyCell(this);" tabindex="0">function</td> function emptyCell(scope) { $(scope).find('input').val(''); }Ejemplo de trabajo:
$('#test-table').Tabledit({ editButton: false, hideIdentifier: true, columns: { identifier: [0, 'id'], editable: [[1, 'onfocus1'], [2, 'onfocus2'], [3, 'onclick1'], [4, 'onclick2']] } }); function emptyCell(scope) { $(scope).find('input').val(''); } .tabledit-remove-button { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script> <table id="test-table"> <thead> <tr> <th>#</th> <th>onfocus1</th> <th>onfocus2</th> <th>onclick1</th> <th>onclick2</th> </tr> </thead> <tbody> <tr> <td>row 1</td> <td onfocus="this.querySelector('input').value = '';" tabindex="0">inline</td> <td onfocus="emptyCell(this);" tabindex="0">function</td> <td onclick="this.querySelector('input').value = '';">inline</td> <td onclick="emptyCell(this);">function</td> </tr> </tbody> </table>Puedes hacerlo. Debería ayudar en tu html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <table> <tr> <td onclick="erase()">we</td> </tr> </table> <script src="script.js"></script> </body> </html>En tu script.js
function erase() { event.target.innerHTML = "" }