Editar una celda de tabla HTML

Question

Tengo una tabla con algunas filas ... Quiero poder seleccionar una fila y hacer clic en modificar y podré editar todas las celdas de esa fila ...

¿Cómo puedo hacer que una celda se pueda editar en Javascript? ¿Y es mejor usar Jquery?

Answer 1

Puede insertar cuadros de texto dentro de cada celda y configurar los valores para que sean los de la celda de la tabla.

Algo como esto

$(function(){ 
     $("#tbl1 tr").click (function(){ 
      if (!$(this).hasClass('clicked')) 
      { 
       $(this).children('td').each (function() { 
        var cellValue = $(this).text(); 
        $(this).text('').append ("<input type='text' value='" + cellValue + "' />"); 
       }); 

       $(this).addClass('clicked'); 
      } 
     }); 
    }); 
<table id="tbl1"> 
      <tr> 
       <td>1</td> 
       <td>4</td> 
       <td>3</td> 
      </tr> 
      <tr> 
       <td>4</td> 
       <td>5</td> 
       <td>6</td> 
      </tr> 
     </table> 

para que pueda realizar un botón de actualización y obtener los valores de los cuadros de texto y actualización.

Answer 2

Aquí hay una quick concept sólo trabaje para usted:

$(function(){ 
    $("button[name='doModify']").click(function(){ 
    // disable out modify button 
    $(this).attr("disabled","disabled"); 
    // enable our save button 
    $("button[name='save']").removeAttr("disabled"); 
    // cycle through each row having marked for modification 
    $(":checkbox[name='modify']:checked").each(function(){ 
     $(this).closest("tr").find("td:gt(0)").each(function(){ 
     // convert each cell into an editable region 
     $(this).wrapInner("<textarea name='"+$(this).attr("rel")+"'></textarea>"); 
     }); 
    }); 
    }); 
}); 

-

<table border="1" cellspacing="1" cellpadding="5"> 
    <tbody> 
    <tr> 
     <td><input type="checkbox" name="modify" /></td> 
     <td rel="username[]">jon.doe</td> 
     <td rel="information[]">This is my bio.</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="modify" /></td> 
     <td rel="username[]">jonathan.sampson</td> 
     <td rel="information[]">This is my bio.</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" name="modify" /></td> 
     <td rel="username[]">yellow.05</td> 
     <td rel="information[]">This is my bio.</td> 
    </tr> 
    <tr> 
     <td colspan="3" align="right"> 
     <button name="doModify">Modify</button> 
     <button name="save" disabled="disabled">Save</button> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Answer 3

Conjunto content-editable propiedad de cada elemento que desea editar.
http://html5demos.com/contenteditable

Answer 4

No hay necesidad de hacer su propio código, ya existe un plugin para jQuery para este propósito. Pruebe jEditable, puede hacer exactamente lo que necesita.

Su página de demostración tiene algunos buenos ejemplos:

http://www.appelsiini.net/projects/jeditable/default.html