Javascript 在td中动态插入HTML标记以覆盖文本

我有一个表格。它有2个td和5个tr。在一个td中，它有一个文本。当我点击按钮时，我想用输入标记覆盖它。 我的领导只告诉我表名和td id。 我不能在html内联中插入onclick事件

那么，我如何控制点击？如何动态插入HTML td标记以覆盖文本

<script type="text/javascript">

function editTd() 
{
    var rows = document.getElementById('control');

    var input = document.createElement('input');
    input.type = "text";
    input.name="copytext";

    rows.appendChild(input);
}

window.onload = function(){
    document.getElementsByName("submitConfirm").onclick = editTd;
};
</script>

函数editTd（）
{
var rows=document.getElementById（'control'）；
var input=document.createElement（'input'）；
input.type=“text”；
input.name=“copytext”；
行。追加子项（输入）；
}
window.onload=函数（）{
document.getElementsByName（“submitConfirm”）.onclick=editTd；
};

---

这就是我现在准备的代码。请帮我这个应该对你有用

function editTd() {
    var rows = document.getElementById('tbl1').rows; //get all rows of that table
    for (var i = 0; i < rows.length; i++) {   
        var row = rows[i];   
        for (var j = 0; j < row.cells.length; j++) {  // for evary row get each cell
            var input = document.createElement('input'); //create a input text
            input.type='text';
            input.value= row.cells[j].textContent;
            input.disabled = true; //disabled input
            row.cells[j].innerHTML = '';   // clear all cell's data
            row.cells[j].appendChild(input); // append input tag to cell
        };
    };
}

window.onload = function(){
    document.getElementsByName("submitConfirm")[0].onclick = editTd;
};

函数editTd（）{
var rows=document.getElementById（'tbl1'）.rows；//获取该表的所有行
对于（var i=0；i

试试这个例子，我在其中做了一些更新：

编辑：

document.getElementById（“submitConfirm”）.onclick=function（e）{
e=e | | window.event；
var btn=e.src元素| | e.target；
btn.disabled=true；
var td=document.getElementById（'control'）；
var bx=''；
td.innerHTML=bx；
};

我不确定这是否是最好的方法，但请尝试以下方法：

document.getElementById('tdID').onclick = function(e){
    if(e.target.nodeName == 'TD'){
        console.log('dfdfdf');
        this.innerHTML = '<input type="text" value="' + this.innerText + '"/>'
    }
}

document.getElementById（'tdID'）。onclick=function（e）{
如果（e.target.nodeName=='TD'）{
console.log（'dfdfdf'）；
this.innerHTML=“”
}
}

其中“tdID”-是带有文本的td的id

---

这是JSFIDLE:

请看一下。。。这对我有用

document.getElementById("submitConfirm").onclick = function (e) {
    e = e || window.event;
    var btn = e.srcElement || e.target;
    btn.disabled = true;
    var td = document.getElementById('control');
    var bx = '<input type=\'text\' id="txtbx" value=\'' + td.innerHTML + '\'/>';
    td.innerHTML = bx;
    document.getElementById('txtbx').disabled=true;
};

document.getElementById（“submitConfirm”）.onclick=function（e）{
e=e | | window.event；
var btn=e.src元素| | e.target；
btn.disabled=true；
var td=document.getElementById（'control'）；
var bx=''；
td.innerHTML=bx；
document.getElementById（'txtbx'）。disabled=true；
};

发布你的html或创建一个Fiddle你说的封面文本是什么意思，输入的值应该是什么？td中有一个文本，但他想在单击按钮时用disable input标记覆盖该文本。意思是你想要这样的内容

@象牙，你的意思是td中的文本将被input[type=text]替换吗值=td.text？这个答案与我的答案不同question@Ivory，请告诉我这里缺少什么？您需要对值进行HTML编码以防止XSS攻击
document.getElementById("submitConfirm").onclick = function (e) {
    e = e || window.event;
    var btn = e.srcElement || e.target;
    btn.disabled = true;
    var td = document.getElementById('control');
    var bx = '<input type=\'text\' id="txtbx" value=\'' + td.innerHTML + '\'/>';
    td.innerHTML = bx;
    document.getElementById('txtbx').disabled=true;
};