InnerHTML 更改旧变量
Posted
技术标签:
【中文标题】InnerHTML 更改旧变量【英文标题】：InnerHTML changes old variables 【发布时间】：2018-03-31 17:45:43 【问题描述】：我正在做一个在 JS 中创建表格的函数。
我创建了一个变量 table_row 填充它，然后将 table_layout.appendChild(table_row); 添加到 table_layout 元素中。
接下来，我通过innerhtml=''清理它table_row，但是在清理时，我ALREADY添加到元素的变量table_layout 也被清除了。
为什么会这样？ 是否应该清除添加的元素？ 如何避免这种情况？ 看看 CODE。
var columns = ["col1", "col2", "col3"];
var rows = 5;
function Table()
var table_layout = document.createElement("table");
var table_row = document.createElement("tr");
for (var i = 0; i < columns.length; i++)
// main row
table_row.innerHTML += "<th>" + columns[i] + "</th>";
table_layout.appendChild(table_row); //add in table element
// table_row.innerHTML = ""; //If you uncomment this line, then we get an empty output!
//refresh table_row html, that would generate a new line
//But when cleaning. Cleared in the previously added item in table_layout .... how??
// for (var j = 0; i < columns.length; j++)
// table_main_row.innerHTML += '<td></td>';
//
// for (var i = 0; i < rows; i++)
// table_layout.appendChild(table_row);
//
return table_layout;
var div = document.getElementById("qqq");
div.appendChild(Table());#qqq
background: red;
<div id="qqq"></div>【问题讨论】：
appendChild 不会复制您传递给它的元素，因此如果您之后对元素进行变异，它将使子元素发生变异。为什么需要将innerHTML 设置为""？
我无法理解这个问题。您正在向表格中添加一个元素，向该元素添加 html，然后清除您刚刚添加的 html，从而导致空白输出。这看起来很简单
你添加了一个TR，没有内容<td>content1</td><td>content2</td>，结果：the line can't be append.
我想清除 table_row.innerHTML = '' 以创建更多具有不同内容的行。该算法在下面被注释掉。
我想清除元素并添加另一个 HTML 代码。
【参考方案1】：
table_row 变量包含一个引用。您需要为每一行创建一个新元素。
// creates a DOM Element and saves a reference to it in the table_row variable
var table_row = document.createElement("tr");
// updates the DOM Element through the reference in the table_row variable
table_row.innerHTML += "<th>" + columns[i] + "</th>";
// still references the DOM Element, so you are clearing its content
// table_row.innerHTML = "";
您将需要 . . .
// create a new DOM Element to use
table_row = document.createElement("tr");
// then update its contents
table_main_row.innerHTML += '<td></td>';
。 . .每次迭代。
有关教程、参考资料等，请参阅 javascript on MDN。
【讨论】：
【参考方案2】：<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript">
var columns = ["col1", "col2", "col3"];
var rows = 5;
function createNewRow(headerRow)
var newRowElem = null;
try
newRowElem = document.createElement("tr");
for (var i = 0; i < columns.length; i++)
if(headerRow) newRowElem.innerHTML += "<th>" + columns[i] + "</th>";
else newRowElem.innerHTML += "<td>" + columns[i] + "</td>";
catch(e)
alert("createNewRow Error" + e.Message);
finally
return newRowElem;
function Table()
var table_layout = null;
try
table_layout = document.createElement("table");
// Create Header Row
table_layout.appendChild(createNewRow(true));
// Create Other Rows
for (var i = 0; i < rows; i++)
table_layout.appendChild(createNewRow(false));
catch(e)
alert("Table Error: " + e.Message);
finally
return table_layout;
</script>
<style>
#qqq
background: red;
</style>
</head>
<body>
<div id="qqq"></div>
<script type="text/javascript" language="javascript">
var div = document.getElementById("qqq");
div.appendChild(Table());
</script>
</body>
</html>
【讨论】：
我建议为创建的每一行调用一个单独的函数。我在这个例子中包含了一个这样的样本。另外，我将您的初始调用移至结束 【参考方案3】：我这样做了。
var table_layout = document.createElement('table');
table_layout.setAttribute('id', 'main_table');
table_layout.setAttribute('border', '1');
var row = document.createElement('tr');
row.setAttribute('class', 'main_row');
for (var i = 0; i < this.fields.length; i++) // строка с именами столбцов
var th = document.createElement('th');
th.setAttribute('class', 'cell_name');
th.innerHTML = this.fields[i];
row.appendChild(th);
table_layout.appendChild(row); //добавляем
row = document.createElement('tr'); // очищаем от старых элементов строку (переопределяем)
row.setAttribute('class', 'table_row');
var td = document.createElement('td');
td.setAttribute('class', 'table_cell');
// td.setAttribute('ondblclick', 'input_func()');
td.addEventListener('click', function ()
alert();
);
td.innerHTML='000';
for (var j = 0; j < this.fields.length; j++) // создаем строку с N-количеством ячеек
row.appendChild(td.cloneNode(true));
for (var i = 0; i < this.rows; i++) // Добавляем её есколько раз через клона
table_layout.appendChild(row.cloneNode(true));
然后用表的功能重新分配。
var table_layout = document.createElement('table');
table_layout.setAttribute('id', 'main_table');
table_layout.setAttribute('border', '1');
var row = table_layout.insertRow(0);
var cell;
for (var j = 0; j < this.fields.length; j++)
cell = row.insertCell(j);
cell.outerHTML = '<th>' + this.fields[j] + '</th>';
cell.className = 'cell_name';
for (var i = 0; i < this.rows; i++)
row = table_layout.insertRow(i + 1);
row.className = 'row_table';
for (var n = 0; n < this.fields.length; n++)
cell = row.insertCell(n);
// cell.innerHTML = '00';
cell.className = 'table_cell';
cell.innerHTML = ' ';
return table_layout;【讨论】：
以上是关于InnerHTML 更改旧变量的主要内容，如果未能解决你的问题，请参考以下文章
使用 js .innerHTML 更新 PHP 变量 [重复]