Fatal编程技术网

Javascript InnerHTML更改旧变量

javascript

Javascript InnerHTML更改旧变量,javascript,html-table,refresh,innerhtml,Javascript,Html Table,Refresh,Innerhtml,我正在做一个在JS中创建表的函数。 我创建一个变量table\u row填充它，然后添加table\u layout.appendChild（table\u row）将其添加到表格布局元素中。 接下来，我通过innerHTML='清理表格行，但在清理时，我已经添加到元素表格布局的变量也会被清除 为什么会这样？ 是否应清除添加的元素？ 如何避免这种情况？ 请看 var列=[“col1”、“col2”、“col3”]； var行=5； 函数表（）{ var table_layout=docume

我正在做一个在JS中创建表的函数。 我创建一个变量
table\u row
填充它，然后添加
table\u layout.appendChild（table\u row）将其添加到
表格布局
元素中。
接下来，我通过
innerHTML='
清理
表格行，但在清理时，我已经添加到元素
表格布局
的变量也会被清除



为什么会这样？
是否应清除添加的元素？
如何避免这种情况？
请看



var列=[“col1”、“col2”、“col3”]；
var行=5；
函数表（）{
var table_layout=document.createElement（“表”）；
var table_row=document.createElement（“tr”）；
对于（var i=0；i

#qqq{
背景：红色；
}


表行
变量包含一个引用。您需要为每一行创建一个新元素


// 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 = "";



//创建DOM元素并将对它的引用保存在table\u row变量中
var table_row=document.createElement（“tr”）；
//通过table_row变量中的引用更新DOM元素
表_row.innerHTML+=“”+列[i]+“”；
//仍然引用DOM元素，因此您正在清除其内容
//表_row.innerHTML=“”；


你需要


// create a new DOM Element to use
table_row = document.createElement("tr");
// then update its contents
table_main_row.innerHTML += '<td></td>';



//创建要使用的新DOM元素
表_行=document.createElement（“tr”）；
//然后更新它的内容
表_main_row.innerHTML+=''；


。对于每个迭代


有关教程、参考资料及更多信息，请参阅。
表行
变量包含参考资料。您需要为每一行创建一个新元素


// 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 = "";



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



//创建DOM元素并将对它的引用保存在table\u row变量中
var table_row=document.createElement（“tr”）；
//通过table_row变量中的引用更新DOM元素
表_row.innerHTML+=“”+列[i]+“”；
//仍然引用DOM元素，因此您正在清除其内容
//表_row.innerHTML=“”；


你需要


// create a new DOM Element to use
table_row = document.createElement("tr");
// then update its contents
table_main_row.innerHTML += '<td></td>';



//创建要使用的新DOM元素
表_行=document.createElement（“tr”）；
//然后更新它的内容
表_main_row.innerHTML+=''；


。对于每个迭代

有关教程、参考资料及更多信息，请参阅。


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


var列=[“col1”、“col2”、“col3”]；
var行=5；
函数createNewRow（headerRow）
{
var newRowElem=null；
尝试
{
newRowElem=document.createElement（“tr”）；
对于（var i=0；i

var列=[“col1”、“col2”、“col3”]；
var行=5；
函数createNewRow（headerRow）
{
var newRowElem=null；
尝试
{
newRowElem=document.createElement（“tr”）；
对于（var i=0；i
我这样做了



var table_layout=document.createElement（'table'）；
table_layout.setAttribute（'id'，'main_table'）；
表_layout.setAttribute（'border'，'1'）；
var行=document.createElement（'tr'）；
row.setAttribute（'class'，'main_row'）；
对于（var i=0；i