我试图使用jQuery创建可编辑表格。见下面的代码
的HTML
<tr>
<td>1</td>
<td>11.11.2017</td>
<td><span class="editable-cell">11-00</span></td>
<td><span class="editable-cell">Проведение контрольных процедур</span></td>
<td><span class="editable-cell">Выкзд МВК в рамках задачи 56987</span></td>
<td><span class="editable-cell">17 км</span></td>
<td>53,31</td>
</tr>
当用户单击表格单元格时，textarea标签出现在此单元格中，并允许他编辑文本
jQuery的
$('.editable-cell').mousedown(function(event){
var oldValue = "";
var newValue = "";
oldValue = $(this).text();
$(this).text("");
$(this).append('<textarea id="edit-area" rows="5" cols="50">');
$(this).append('</textarea>');
$("#edit-area").val(oldValue);
$("#edit-area").focus();
return false;
});
我对此感到困惑，需要帮助。1.单击单元格时，出现textarea并显示跨度的文本。如果我尝试通过鼠标在Textarea中文本的某个位置设置光标，则光标始终显示在字符串的开头。如何将光标放在Textarea中文本的任何部分？2.如果我单击表格中的另一个跨度或窗口的任何位置，则应关闭旧的Textarea。我如何在Textarea外部捕捉鼠标单击？
问题在于您要将文本区域附加到跨度而不是表格单元格。您可能想要这样：
$('.editable-cell').mousedown(function(event){
var span = $(this);
var oldValue = span.text();
var ta = $('<textarea class="edit-area" rows="5" cols="50"></textarea>');
ta.text(oldValue);
span.parent().append(ta);
span.remove();
return false;
});
请注意，追加位于跨度的父级（即表单元格）上
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句