Question

我有一张桌子。它有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>

这是我现在编写的代码。请帮助我

Answer 1

这应该对你有用

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;
};

Answer 2

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

编辑：

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\' name=\'copytext\' readonly=\'readonly\' value=\'' + td.innerHTML + '\'/>';
    td.innerHTML = bx;
};

Answer 3

我不确定这是最好的方法，但试试这个：

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

其中'tdID' - 是带文字的td的id。

这里是jsfiddle：http://jsfiddle.net/weeklyTea/L83CX/

Answer 4

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

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;
};

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

4 个答案: