javascript不會改變dom值

-1

我不知道我做錯了什麼。我動態插入行到表。這些行有一些單元格，單元格中有輸入元素。接下來我通過瀏覽器更改輸入值（只需鍵入:)）。當我通過this_table的id獲取元素時，輸入字段的值是默認值。javascript不會改變dom值

var testbtn=document.getElementById('test'); 
 
testbtn.onclick = function(){ 
 
var tab=document.getElementById('testtab'); 
 
var row = tab.insertRow(1); 
 
var cell1 = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 
    cell1.className='th_lp'; 
 
    cell1.innerHTML='<input id="testid" value="1"></input>'; 
 
    cell1.className='th_lp'; 
 
    cell2.innerHTML='bb'; 
 
} 
 
var testbtn2=document.getElementById('test2'); 
 
test2.onclick=function(){ 
 
\t alert(document.getElementById('testtab').innerHTML); 
 
}

<table id="testtab" border=1> 
 
    <tr> 
 
    <th>th1</th><th>th2</th> 
 
    </tr> 
 
</table> 
 
<button id="test"> 
 
TEST 
 
</button> 
 
<br> 
 
<button id="test2"> 
 
TEST2 
 
</button>

下面是簡單的例子

jsFiddle

點擊BTN
改變輸入文本的一些其他
點擊BTN

我做這些步驟的時候，我有警報消息「......」輸入值仍然是1.爲什麼？

我怎樣才能得到這個表的innerHTML與新的輸入值？

來源

2016-02-19 Tomasz Kujawa

爲什麼不讓'jsfiddle.net/ah8pv3ff/2 /'可點擊？你有沒有看到一個警告，你不僅應該鏈接到'jsfiddle'，還包括代碼和你的問題？ –

如果用戶更改輸入字段的值，則屬性value會更改，但不會更改屬性。 innerHTML確實顯示屬性value的內容，但不顯示屬性value。您需要手動同步調用innerHTML

你可以做這樣的事情之前的屬性：

var testbtn = document.getElementById('test'); 
 
testbtn.onclick = function() { 
 
    var tab = document.getElementById('testtab'); 
 
    var row = tab.insertRow(1); 
 
    var cell1 = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 
    cell1.className = 'th_lp'; 
 
    cell1.innerHTML = '<input id="testid" value="1">'; 
 
    cell1.className = 'th_lp'; 
 
    cell2.innerHTML = 'bb'; 
 
} 
 
var testbtn2 = document.getElementById('test2'); 
 
test2.onclick = function() { 
 
    
 
    //search for all input elements 
 
    var inputElements = document.getElementsByTagName('input'); 
 
    
 
    for(var i=0; i < inputElements.length ; i++) { 
 
    //set the attribute value of the input element to the content of the property value 
 
    inputElements[i].setAttribute('value',inputElements[i].value); 
 
    } 
 
    
 
    alert(document.getElementById('testtab').innerHTML); 
 
}

<table id="testtab" border=1> 
 
    <tr> 
 
    <th>th1</th> 
 
    <th>th2</th> 
 
    </tr> 
 
</table> 
 
<button id="test"> 
 
    TEST 
 
</button> 
 
<br> 
 
<button id="test2"> 
 
    TEST2 
 
</button>

來源

2016-02-19 20:41:10

@ScottMarcus多數民衆贊成真的，我沒有審查所有的代碼。 –

謝謝，工作很好;） –

除非手動設置，否則輸入的值屬性將永遠不會更改。把它看作「默認」值（主要用於form.reset）。如果您希望HTML動態地反映該值，您將不得不添加一個onblur/onkeyup事件來更新該值。

來源

2016-02-19 20:36:44

每次添加新的輸入元素時，它都會得到與最後一個相同的id。 ID應該是唯一的。另外，輸入不是內容元素。它不應該有結束標記。

來源

2016-02-19 20:37:04

是的你wrigth，但這是一個簡單的例子，在最後我不使用id的我只使用calsses;） –

之前，我完全看這是怎麼回事，我看到小區1 .className等等TWICE，雖然我沒有看到cell2這樣的東西......那是爲什麼我得到一個錯誤？

來源

2016-02-19 20:42:43

是的，我複製並粘貼，但在我的完整代碼中我有64個單元格，並且在那裏我沒有TWICE任何單元格。 –

在你jsfiddle，如果你改變：

alert(document.getElementById('testtab').innerHTML);

到：

alert(document.getElementById('testid').value);

，你會看到輸入的值相匹配你輸入的內容。

來源

2016-02-19 20:45:07 terrymorse

是的。我知道，但我需要整頁的html代碼，而不僅僅是這一個輸入。 –

@TomaszKujawa爲什麼你需要html代碼？你的目標是什麼？ – terrymorse

javascript不會改變dom值

回答

相關問題