如何仅使用引导程序和 jQuery 制作可编辑表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15151210/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make editable table using bootstrap and jQuery only?
提问by Amrendra
This is my bootstrap table.I want to insert data into table using jQuery only.On clicking a particular cell,a textbox should be open to enter data.I don't want to use any other plugin.
这是我的引导表。我只想使用 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.
帮帮我。谢谢。
回答by sissonb
You basically want to add an event to the user clicking on a table row. In jQuery you can add that event like this
您基本上希望向用户单击表格行添加一个事件。在 jQuery 中，您可以像这样添加该事件
$("table.table tr td").bind("click", dataClick);
In the dataClick function you wan to make the row editable. You can do so like this.
在 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'>");
}
}
I have a sample here, http://jsfiddle.net/JPVUk/4/
我这里有一个示例，http://jsfiddle.net/JPVUk/4/
Hope this helps
希望这可以帮助
