[英]How to make editable table using bootstrap and jQuery only?
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. 帮帮我。谢谢。
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. 在dataClick函数中,您可以使行可编辑。 You can do so like this.
你可以这样做。
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 希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.