在td中動態插入HTML標籤以覆蓋文本

我有一個table.It有2個td和5個tr。在一個td中，它有一個文本。我想用輸入標籤覆蓋那個單擊按鈕。我的領導告訴我只有表名和那個td id。而我不能在html內聯插入onclick事件..在td中動態插入HTML標籤以覆蓋文本

所以，我該如何控制該點擊？以及如何動態插入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>

這是我現在準備的代碼。請幫助我

來源

2014-07-16 Ivory

發表您的HTML或創建一個小提琴 –

你的封面文字是什麼意思，輸入的值應該是那個？ – Mritunjay

在td中有一個文本，但他希望在按鈕單擊時使用禁用輸入標籤來覆蓋該文本。 – Ivory

這應該爲你工作

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

來源

2014-07-16 04:42:51 Mritunjay

試試這個例子中，我在裏面做了一些更新：

編輯：

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

來源

2014-07-16 04:50:43 Arvind

@Ivory，請檢查這個[jsfiddle演示]（http://jsfiddle.net/9uLZ3/） – Arvind

答案是不同於我的問題 – Ivory

@Ivory，請告訴我我在這裏錯過了什麼？ – Arvind

我不知道這是最好的方法，但試試這個：

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

其中'tdID' - 是帶有文本的td的標識。

這裏的jsfiddle：http://jsfiddle.net/weeklyTea/L83CX/

來源

2014-07-16 04:55:14 weeklyTea

您需要使用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; 
};

來源

2014-07-16 05:05:58

在td中動態插入HTML標籤以覆蓋文本

回答

相關問題