Question

我尝试使用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并显示span中的文本。如果我尝试在Textarea中的某个文本位置用鼠标设置光标，则光标始终显示在字符串的开头。如何将光标放在Textarea的文本的任何部分？ 2.如果我点击我桌子上的另一个跨度或任何窗口的地方，那么旧的Textarea应该关闭。如何在Textarea外面点击鼠标？

Answer 1

问题在于您将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;
});

请注意，append位于作为表格单元格的span的父级

使用Textarea标签的可编辑表格单元格

1 个答案: