如何使用bootstrap和jQuery製作可編輯的表格？

這是我的引導表。我想僅使用jQuery將數據插入到表中。單擊某個特定的單元格時，應該打開一個文本框以輸入數據。我不想使用任何其他插件。如何使用bootstrap和jQuery製作可編輯的表格？

 <table class="table table-bordered"> 
     <thead class="mbhead"> 
      <tr class="mbrow"> 
      <th>A</th> 
      <th>B</th> 
      <th>C</th> 
      <th>D</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr>   
     </tbody> 
     </table>

help me.thanx。

來源

2013-03-01 Amrendra

您必須有這方面的任何數據庫？ – Manoj 2013-03-01 05:48:44

現在，我沒有考慮數據庫..只是使它可編輯只 – Amrendra 2013-03-01 05:49:55

這可能會有所幫助http://jsfiddle.net/JPVUk/1/ – sissonb 2013-03-01 06:03:56

你基本上想要添加一個事件給用戶點擊一個表格行。在jQuery中，您可以添加像這樣的事件

$("table.table tr td").bind("click", dataClick);

在dataClick函數中，您要使行可編輯。你可以這樣做。

function dataClick(e) { 
    console.log(e); 
    if (e.currentTarget.innerHTML != "") return; 
    if(e.currentTarget.contentEditable != null){ 
     $(e.currentTarget).attr("contentEditable",true); 
    } 
    else{ 
     $(e.currentTarget).append("<input type='text'>"); 
    }  
}

我這裏有一個樣本，http://jsfiddle.net/JPVUk/4/

希望這有助於

來源

2013-03-01 06:23:49 sissonb

我追加新行時不工作。 – Amrendra 2013-03-01 11:07:22

@Amrendra嘗試使用'live（）'而不是'bind（）'。像這樣，http://jsfiddle.net/JPVUk/5/ – sissonb 2013-03-01 18:47:59

live（）在jQuery 1.7中被棄用，並在1.9中被刪除。你可以把它放回jQuery遷移插件，但我不太確定這是一個好主意。 – 2013-06-07 00:59:59

如何使用bootstrap和jQuery製作可編輯的表格？

回答

相關問題