InnerHTML меняет старые переменные

1

Я выполняю функцию, которая создает таблицу в JS. Я создаю переменную table_row заполняя ее, а затем добавляю table_layout.appendChild(table_row); это элемент table_layout. Затем я table_row его table_row через innerHTML='', но при очистке также очищается переменная, которую я УЖЕ добавила в элемент table_layout.

Почему это происходит? Следует ли очистить добавленный элемент? Как этого можно избежать? Посмотрите на КОД.

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>
  • 1
    appendChild не создает копию элемента, который вы передаете ему, поэтому он будет видоизменять дочерний элемент, если вы впоследствии измените элемент. Почему вам нужно установить innerHTML на "" ?
  • 0
    У меня проблемы с пониманием проблемы. Вы добавляете элемент в таблицу, добавляете html к этому элементу, а затем очищаете только что добавленный html, что приводит к пустому выводу. Это кажется довольно простым
Показать ещё 3 комментария
Теги:
html-table
innerhtml
refresh
clear

3 ответа

0
Лучший ответ

Переменная 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 в MDN для учебных пособий, ссылок и т.д.

Поделиться
0

Я сделал это.

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 = '&nbsp';
        	}
		}


		return table_layout;
Поделиться
0 
<!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>
Поделиться
  • 0
    Я бы рекомендовал вызывать отдельную функцию для каждой созданной строки. Я включил образец такого в этом примере. Кроме того, я переместил ваш первоначальный вызов в блок скрипта непосредственно перед конечным элементом </ body>. Надеюсь это поможет.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню