Добавление элемента в дом

Question

Добавление элемента в дом

1

var flag=0;
function appenditem()
{

var did=["100","101"];
var dname=["Barry","Allen"];
var dmark=["50","100"];
var tab=document.querySelectorAll(".subtable4");
var tab_length=document.querySelectorAll(".subtable4").length;

if(flag==0)
{
var row="<tr><td>"+did[0]+"</td><td>"+dmark[0]+"</td><td>"+dname[0]+"</td></tr>";
}

else if(flag==1)
{
var row="<tr><td>"+did[1]+"</td><td>"+dmark[1]+"</td><td>"+dname[1]+"</td></tr>";
}



for(var i=0;i<tab_length;i++)
    {

    tab[i].innerHTML=row;
    }

flag=1;
}

<table class="subtable4">
</table>               <!--Table 1-->

<table class="subtable4">
</table>               <!--Table 2-->

Поскольку я использовал innerHTML вместо appendChild, данные массива 0 перезаписываются данными массива 1 из-за использования innerHTML. Здесь я получаю элементы массива 0 и сохраняю их в отдельной строке и в массиве 1 элементов в отдельном массиве.

Badhusha 02 дек. 2017, в 10:29

Источник

0

В чем ошибка? Вы уверены, что домен загружается при запуске скрипта?
Ángela 02 дек. 2017, в 08:44
1

Зачем флаг ?! Вы просто хотите напечатать значения массива в ячейках по порядку? Например, jsfiddle.net/pk6wqg1r ?
sinisake 02 дек. 2017, в 09:05

Теги:

javascript

html-table

appendchild

2 ответа

Ещё вопросы

В чем ошибка? Вы уверены, что домен загружается при запуске скрипта?
Зачем флаг ?! Вы просто хотите напечатать значения массива в ячейках по порядку? Например, jsfiddle.net/pk6wqg1r ?

Mamun · Answer 1 · 2017-12-02T06-40-00.000Z

Используйте innerHTML вместо appendChild(). Поскольку querySelectorAll возвращает статический список. Любые изменения, внесенные в документ через этот список с помощью таких методов, как appendChild(), removeChild( т.д., appendChild(), removeChild( не отражаются.

function appenditem()
{
  var did="100";
  var dname="Barry";
  var dmark="50";
  var tab=document.querySelectorAll(".subtable4");
  var tab_length=document.querySelectorAll(".subtable4").length;
  var row="<tr><td>"+did+"</td><td>"+dmark+"</td><td>"+dname+"</td></tr>";

  for(var i=0;i<tab_length;i++)
  {
    tab[i].innerHTML=row;
  }
}

appenditem();

<table class="subtable4">
</table>               

<table class="subtable4">
</table>

Naren Murali · Answer 2 · 2017-12-02T05-49-00.000Z

Функция appendChild() будет принимать только HTML-элементы, а не строку html, вместо этого используйте innerHTML. Пожалуйста, обратитесь к нижеприведенному фрагменту

Ссылка: Node.appendChild()

function appenditem() {
  var did = "100";
  var dname = "Barry";
  var dmark = "50";
  var tab = document.querySelectorAll(".subtable4");
  var row = "<tr><td>" + did + "</td><td>" + dmark + "</td><td>" + dname + "</td></tr>";
  for (var i = 0; i < tab.length; i++) {
    tab[i].innerHTML = row;
  }
}
appenditem();

<table class="subtable4">
</table>
<!--Table 1-->

<table class="subtable4">
</table>
<!--Table 2-->