Bir HTML tablo hücresini düzenleme

Question

Birkaç satır içeren bir tablom var ... Bir satır seçip değiştirmek ve değiştirmek için satırın tüm hücrelerini düzenleyebilmeyi istiyorum ...

Javascript'te nasıl bir hücreyi düzenlenebilir yapabilirim? Ve JQuery kullanmak daha iyi mi?

Answer 1

Her hücrenin içine metin kutuları ekleyebilir ve değerleri tablo hücresininki olacak şekilde ayarlayabilirsiniz. Bu

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

gibi

şey Ardından bir güncelleme butonuna yerleştirmek ve metin kutularının ve güncelleme değerleri getirebilir.

Answer 2

Burada sadece sizin için yukarı çalışmış bir quick concept var:

$(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>"); 
     }); 
    }); 
    }); 
}); 

- her bir elemanın

<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

Seti content-editable mülkiyet düzenlemek istediğiniz.
http://html5demos.com/contenteditable

Answer 4

Kendi kodunuzu yapmanız gerekmiyor, bu çok amaçlı bir jQuery eklentisi zaten var. jEditable'u deneyin, ihtiyacınız olan şeyi tam olarak yapabilir.

Onların demo sayfası bazı güzel örnekler vardır:

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