contenteditable - JQuery将内容保存到网页（以及添加和删除） [英] contenteditable - JQuery save content just to webpage (as well as adding and removing)
问题描述
这是我目前的代码。
< div class =bs-docs-example>
< table class =table table-striped>
< thead>
< tr>
< th>
< th> IRC姓名< / b>
< / tr>
< / thead>
< tbody>
< tr>
< td> 1< / td>
< td> [Cr | m | nAl]< / td>
< td id =content2contenteditable =true>中医师< / td>
< td> Aeterna Top< / td>
< / tr>
< tr>
< td> 2< / td>
< td> bandido< / td>
< td> Bananni< / td>
< td> Aeterna Top< / td>
< / tr>
< tr>
< td> 3< / td>
< td> Funkystyle< / td>
< td> Funkystyle< / td>
< td> Aeterna Top< / td>
< / tr>
< / tbody>
< / table>
< / div>
< / div>
< / div>
< button id =save>保存更改< /按钮>
<！ - 开始脚本 - >
< script src =js / jquery.jstype =text / javascript>< / script>
< script>
var theContent = $（'＃content2'）; //设置内容
$ b $（'＃save'）。on（'click'，function（）{//存储点击按钮时localStorage中的新内容
var editedContent = theContent.html（）;
localStorage.newContent = editedContent;
}）;
if（localStorage.getItem（'newContent'））{//当newContent存在于ini localStorage时
theContent.html（localStorage.getItem（'newContent'））;
}
< / script>
现在，理想情况下，我希望它输出如下面的截图;
http://i.imgur.com/R4TYhRB.png
Ingame Name栏可编辑。
添加行/删除行，我也想实现，但我不太确定你是否可以用这样一个简单的HTML表来完成它。
我的第一个问题 -
如何让特定的行（即Ingame Name）成为唯一可编辑的行？我很可惜有Javascript / Jquery和我的研究不幸，只允许我改进一行。 （我知道我可以复制javascript / jquery，但肯定有更简单的方法吗？）
第二个问题 -
是否有可能为HTML表添加/删除行而无需添加某种数据库？
感谢您提供的任何指导 code> div 内部 td 并使其可编辑并分配固定的 width 和 height 转换为div。
.clEdit {
width：200px;
/ *尝试根据需要进行转换* /
overflow：hidden;
/ *尝试以更高的高度滚动* /
height：15px;
/ *尝试根据需要进行转换* /
}
有2个选项可以让溢出隐藏或滚动。您可以检查行为并选择其中一个。作为用户友好的体验，您可以将工具提示分配给悬停或单击的div，以便每当div内的值被溢出时，用户可以看到里面的当前值。
$（。clEdit）。hover（function（e）{
$（this ）.prop（title，$（this）.html（））;
}）;
是的，如果您知道这些值，您可以从没有DB的表中添加/删除行。 id 可以根据之前的id值计算。
从表格中添加/删除并不保证数据库将会更新需要处理。
在添加行时，您还需要为contenteditable绑定事件。
$（＃add）。click（function（）{
//添加行到表的逻辑
var trRow =< tr>< td>+ ++ idFirstCol +< / td>< td>+SecondColValue+< / td>< td>< div class ='clEdit'>+ThirdColValue+< / div>< / td>< td>+LastColValue+< / td>< / tr> ;
$（＃ConTable）。append（trRow）;
$（.clEdit）。hover（function（e）{
$（this） .prop（title，$（this）.html（））;
}）;
$（.clEdit）。prop（'contenteditable'，true）;
} ）;
您可以在这里参考 JSFiddle 。 http://jsfiddle.net/8mt6d7bz/
Lmk如果这回答你的问题
Upon thorough research I was able to allow one data value to be edited and updated within my table. However, when I attempt to alter where the contenteditable can be edited, It removes my formatting of the table (it actually removes the table format completely, rendering my idea pointless.
Here is my current code.
<div class="bs-docs-example">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>IRC Name</th>
<th>Ingame Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>[Cr|m|nAl]</td>
<td id="content2" contenteditable="true">Herbalist</td>
<td>Aeterna Top</td>
</tr>
<tr>
<td >2</td>
<td >bandido</td>
<td >Bananni</td>
<td >Aeterna Top</td>
</tr>
<tr>
<td>3</td>
<td>Funkystyle</td>
<td>Funkystyle</td>
<td>Aeterna Top</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<button id="save">Save Changes</button>
<!-- begin the script -->
<script src="js/jquery.js" type="text/javascript"></script>
<script>
var theContent = $('#content2');// set the content
$('#save').on('click', function () { // store the new content in localStorage when the button is clicked
var editedContent = theContent.html();
localStorage.newContent = editedContent;
});
if (localStorage.getItem('newContent')) { // apply the newContent when it is exist ini localStorage
theContent.html(localStorage.getItem('newContent'));
}
</script>
Now, ideally I would like it to output like this screenshot below; http://i.imgur.com/R4TYhRB.png With the column of "Ingame Name" editable. Add Row/Remove Row, I'm wanting to implement too, but I'm not too sure if you can do it with such a simple HTML table.
My First question- how would I make a particular row (i.e Ingame Name) be the only one editable? I'm terrible have Javascript/Jquery and my research unfortunately, only allows me to refine one row. (I know I could probably replicate the javascript/jquery, but surely there is an easier way?)
Second question-
Is it possible to actually add the ability for a HTML table to add/remove rows without having a database of some sort?
Thanks for any guidance in regards to this.
Rather than making td editable you could wrap div inside td and make it editable and assign fixed width and height to div.
.clEdit {
width: 200px;
/*Try chaging it as per need*/
overflow: hidden;
/* try scroll with more height */
height: 15px;
/*Try chaging it as per need*/
}
Now there are 2 options either allow overflow to be hidden or scroll. You could examine the behavior and select either one. As a user friendly experience you could assign tooltip to div on hover or click so that whenever values inside div are being overflown user could see what are the current values inside.
$(".clEdit").hover(function(e) {
$(this).prop("title", $(this).html());
});
Yes you could add/delete rows from table without DB if you know the values. id can be calculated from previous id value.
Adding/removing from table does not guarantee DB will be updated you need handle that.
On adding rows you need to bind event for contenteditable as well.
$("#add").click(function() {
//LOGIC TO ADD ROW TO TABLE
var trRow = "<tr><td>" + ++idFirstCol + "</td><td>" + "SecondColValue" + "</td><td><div class='clEdit'>" + "ThirdColValue" + "</div></td> <td> " + "LastColValue" + " </td></tr>";
$("#ConTable").append(trRow);
$(".clEdit").hover(function(e) {
$(this).prop("title", $(this).html());
});
$(".clEdit").prop('contenteditable', true);
});
You could refer to JSFiddle here. http://jsfiddle.net/8mt6d7bz/
Lmk if that answers your question
这篇关于contenteditable - JQuery将内容保存到网页（以及添加和删除）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![http://i.imgur.com/R4TYhRB.png](\"http://i.imgur.com/R4TYhRB.png\"){kind=link}
