Question

我不知道我做错了什么。我动态地向表插入行。这些行有一些单元格，在单元格中我有输入元素。接下来我通过浏览器更改输入值（只需键入文件:)）。当我通过id获取元素时，输入字段的this_table值是默认值。

＆＃13;

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(){
	alert(document.getElementById('testtab').innerHTML);
}

＆＃13;

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

＆＃13;

这是一个简单的例子

jsFiddle

点击btn
将输入文本更改为其他人
点击btn

当我执行这些步骤时，我有警报消息＆＃34; ......＆＃34; 输入值仍为1.为什么？

如何使用新输入值获取此表的innerHTML？

Answer 1

除非您手动设置，否则输入的value属性将永远不会更改。把它想象成＆＃34;默认＆＃34; value（主要用于form.reset）。如果希望HTML动态反映值，则必须添加onblur / onkeyup事件以更新值。

Answer 2

每次添加新的输入元素时，它都会获得与最后一个相同的ID。 ID应该是唯一的。此外，输入不是内容元素。它不应该有结束标记。

Answer 3

如果用户更改输入字段的值，则属性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>

Answer 4

在我完全看清楚这是什么之前，我看到cell1.className写了两次，而我看到cell2没有这样的东西......这就是我收到错误的原因吗？

Answer 5

在jsfiddle，如果您更改：

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

为：

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

您将看到输入的值与您输入的值相匹配。

Answer 6

该属性的主要作用是初始化DOM属性。因此，一旦DOM初始化完成，属性的工作就完成了。

通常，属性值可以更改，而属性值永远不能更改。

替换

document.getElementById('testtab').innerHTML;

使用

document.getElementById('testid').value;

javascript不会改变dom值

6 个答案: