Question

我有一个带有行的html表，在其中一个单元格中，我希望能够在单击双击时在单元格中插入输入文本。当这个输入被打开时，我想删除它并在td中看到它的值。

这是我的代码：

<td dir='ltr' id='test1' class='tLine' nowrap ondblclick='addInput(this);'>sdadfew</td>

        function addInput(xxx) {      
          var id = xxx.id;
          var value = document.getElementById(id).innerHTML;
          document.getElementById(id).innerHTML = "<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>";            
          document.getElementById("input"+id).focus();                
        }

        function closeInput(id) {      
            var value = document.getElementById('input'+id).value;                
            document.getElementById(id).innerHTML = value;                  
        }

问题是，当我双击输入时，我得到其中的输入文本.. 我怎么能防止这种情况发生？我该如何解决这个问题呢？

更新

在输入中我看到这个文字：

<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>

感谢提前。

Answer 1

很抱歉误解，这是纯粹的javascript版本

javascript代码

function closeInput(elm) {
    var td = elm.parentNode;
    var value = elm.value;
    td.removeChild(elm);
    td.innerHTML = value;
}

function addInput(elm) {
    if (elm.getElementsByTagName('input').length > 0) return;

    var value = elm.innerHTML;
    elm.innerHTML = '';

    var input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('value', value);
    input.setAttribute('onBlur', 'closeInput(this)');
    elm.appendChild(input);
    input.focus();
}

html代码

<table>
    <tr>
        <td dir="ltr" id="test1" class="tLine" nowrap ondblclick="addInput(this)">sdadfew</td>
    </tr>
</table>

jquery版本仍在http://jsfiddle.net/ZLmgZ/

Answer 2

请查看this link

我在你的功能上添加了一些代码。

function addInput(xxx) {   
    xxx.setAttribute("ondblclick","return false");
    var id = xxx.id;
    var value = document.getElementById(id).innerHTML;
    document.getElementById(id).innerHTML = "<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>";            
    document.getElementById("input"+id).focus();                
}

让我知道它是否适合你。

双击时将输入文本添加到html表td中

2 个答案: