javascript 双击时将输入文本添加到 html table td
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9498222/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
add input text into html table td when double clicked
提问by user590586
I Have an html table with rows, in one of the cells i want to be able to insert an input text inside the cell whenever it is double clicked. and when this input is onblured i want to remove it and see it's value inside the td.
我有一个带有行的 html 表，在其中一个单元格中，我希望能够在双击时在单元格内插入输入文本。当这个输入被打开时，我想删除它并查看它在 td 中的值。
this is my code:
这是我的代码：
<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;
}
The problem is when i double click the input i get the text of the inuput inside of it.. how can i prevent from this to happen? how can i resolve this issue?
问题是当我双击输入时，我会在其中得到输入的文本……我该如何防止这种情况发生？我该如何解决这个问题？
UPDATE:
更新：
inside the input i see this text :
在输入中，我看到了这段文字：
<input type='text' id='input"+id +"' value='"+value+"' onblur='closeInput("+id+")'/>
Thank's In Advance.
提前致谢。
回答by arunes
Sorry for misunderstanding, this is the pure javascript version
抱歉误会，这是纯javascript版本
javascript code
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 code
html代码
<table>
<tr>
<td dir="ltr" id="test1" class="tLine" nowrap ondblclick="addInput(this)">sdadfew</td>
</tr>
</table>
jquery version still at http://jsfiddle.net/ZLmgZ/
jquery 版本仍在http://jsfiddle.net/ZLmgZ/
回答by Amit Soni
Please have a look at this link
请看看这个链接
I have added some code on your function.
我在你的函数上添加了一些代码。
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();
}
Let me know if its work for you.
让我知道它是否适合你。
