如何使用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制作可编辑的表格？

回答

相关问题