wqf*_*eng 89 html html-table editor cell
我想让html表的一些单元格可编辑,只需双击一个单元格,输入一些文本,然后可以将更改发送到服务器.我不想使用像dojo数据网格这样的工具包.因为它提供了一些其他功能.您能否提供一些代码片段或有关如何实现它的建议？
Bre*_*mir 108
您可以对相关单元格,行或表使用contenteditable属性.
更新了IE8兼容性
<table>
<tr><td><div contenteditable>I'm editable</div></td><td><div contenteditable>I'm also editable</div></td></tr>
<tr><td>I'm not editable</td></tr>
</table>
请注意,如果您使表格可编辑,至少在Mozilla中,您可以删除行等.
您还需要检查目标受众的浏览器是否支持此属性.
至于侦听更改(以便您可以发送到服务器),请参阅可信的更改事件
var*_*han 48
HTML5支持contenteditable,
<table border="3">
<thead>
<tr>Heading 1</tr>
<tr>Heading 2</tr>
</thead>
<tbody>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
<tr>
<td contenteditable='true'></td>
<td contenteditable='true'></td>
</tr>
</tbody>
</table>
该属性必须采用以下值之一:
true或空字符串,表示该元素必须是可编辑的;
false,表示该元素不能编辑.
如果未设置此属性,则其默认值将从其父元素继承.
此属性是枚举属性而不是布尔属性.这意味着必须明确使用其中一个值true,false或空字符串,并且不允许使用简写...
// wrong not allowed
<label contenteditable>Example Label</label>
// correct usage
<label contenteditable="true">Example Label</label>.
Bha*_*ani 16
我有三种方法,您可以在这里使用<input>或<textarea>根据您的要求.
1.使用输入<td>.
<input>在所有<td>s中使用元素,
<tr><td><input type="text"></td>....</tr>
此外,您可能希望将输入的大小调整为其大小td.当然,
input { width:100%; height:100%; }
您还可以在未编辑时更改输入框边框的颜色.
2.使用contenteditable='true'属性.(HTML5)
但是,如果要使用contenteditable='true',可能还需要将适当的值保存到数据库中.你可以用ajax实现这一点.
您可以将keyhandlers keyup,keydown,keypress等来的<td>.此外,当用户连续输入时,对这些事件使用一些delay()是很好的,ajax事件不会在每个按键用户按下时触发.例如,
$('table td').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(saveData, 500); // delay after user types
$(this).data('timer', wait);
});
function saveData() {
// ... ajax ...
}
3. 单击时附加<input>到<td>.
单击td时添加输入元素,<td>根据值调整其td值.当输入模糊时,用输入值改变`td'的值.这一切都用javascript.
小智 13
这是一个可运行的示例。
$(function(){
$("td").click(function(event){
if($(this).children("input").length > 0)
return false;
var tdObj = $(this);
var preText = tdObj.html();
var inputObj = $("<input type='text' />");
tdObj.html("");
inputObj.width(tdObj.width())
.height(tdObj.height())
.css({border:"0px",fontSize:"17px"})
.val(preText)
.appendTo(tdObj)
.trigger("focus")
.trigger("select");
inputObj.keyup(function(event){
if(13 == event.which) { // press ENTER-key
var text = $(this).val();
tdObj.html(text);
}
else if(27 == event.which) { // press ESC-key
tdObj.html(preText);
}
});
inputObj.click(function(){
return false;
});
});
});<html>
<head>
<!-- jQuery source -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<table align="center">
<tr> <td>id</td> <td>name</td> </tr>
<tr> <td>001</td> <td>dog</td> </tr>
<tr> <td>002</td> <td>cat</td> </tr>
<tr> <td>003</td> <td>pig</td> </tr>
</table>
</body>
</html>只需在单元格单击时动态插入<input>元素即可<td>。只有简单的 HTML 和 Javascript。不需要contentEditable,,jqueryHTML5
https://Jsfiddle.net/gsivanov/38tLqobw/2/
我将此用于可编辑字段
<table class="table table-bordered table-responsive-md table-striped text-center">
<thead>
<tr>
<th class="text-center">Citation</th>
<th class="text-center">Security</th>
<th class="text-center">Implementation</th>
<th class="text-center">Description</th>
<th class="text-center">Solution</th>
<th class="text-center">Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pt-3-half" contenteditable="false">Aurelia Vega</td>
<td class="pt-3-half" contenteditable="false">30</td>
<td class="pt-3-half" contenteditable="false">Deepends</td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="spain" class="border-none"></td>
<td class="pt-3-half" contenteditable="true"><input type="text" name="add1" value="marid" class="border-none"></td>
<td>
<span class="table-remove"><button type="button"
class="btn btn-danger btn-rounded btn-sm my-0">Remove</button></span>
</td>
</tr>
</tbody>
</table>