Невозможно обновить HTML-таблицу с помощью JavaScript с помощью innerHTML

Я начинаю работать в JavaScript и хочу напечатать некоторый текст из моей таблицы, используя .innerHTML, но он не работает. Вот код:Невозможно обновить HTML-таблицу с помощью JavaScript с помощью innerHTML

<table style="width:100%"> 
    <tr> 
     <td id="tr">&nbsp;</td> 
     <td id="tr1">&nbsp;</td> 
     <td id="tr2">&nbsp;</td> 
    </tr> 
    <tr> 
     <td id="tr3">&nbsp;</td> 
     <td id="tr4">&nbsp;</td> 
     <td id="tr5">&nbsp;</td> 
    </tr> 
    <tr> 
     <td id="tr6">&nbsp;</td> 
     <td id="tr7">&nbsp;</td> 
     <td id="tr8">&nbsp;</td> 
    </tr> 
</table> 

<script> 
document.getElementById("tr").innerHTML = "some text"; 
document.getElementById("tr2").innerHTML = "some text1"; 
document.getElementById("tr2").innerHTML = "some text2"; 
document.getElementById("tr3").innerHTML = "some text3"; 
document.getElementById("tr4").innerHTML = "some text4"; 
document.getElementById("tr5").innerHTML = "some text5"; 
document.getElementById("tr7").innerHTML = "some text6"; 
document.getElementById("tr8").innerHTML = "some text7"; 
document.getElementById("tr9").innerHTML = "some text8"; 
</script>

источник

2016-03-19 tom3883

Вы выборки 'tr2' дважды, пропуская' 'tr1' и tr6' , d нет идентификатора элемента 'tr9'. Помимо этого, я не вижу никаких проблем. Что означает «не работает» * означает? –

Кажется, что он отлично работает в [этой скрипке] (https://jsfiddle.net/v15updn1/1/) при устранении проблемы, упомянутой выше. – GillesC

Какой браузер вы используете, за исключением того, что вы пропустили 'tr1',' tr6', и у вас есть несуществующий 'tr9', вы также можете попробовать конвертировать'

В этой демонстрации используется цикл for для итерации по NodeList <td> и назначить каждую строку <td>.

Read:

querySelectorAll()

Loops and Iteration

NodeList

// Create an array of strings. 
 
// Each string represents what will be in each cell 
 
var content = ['row 1 col 1', 'row 1 col 2', 'row 1 col 3', 'row 2 col 1', 'row 2 col 2', 'row 2 col 3', 'row 3 col 1', 'row 3 col 2', 'row 3 col 3']; 
 

 
// Create a NodeList of every <td> with querySelectorAll() 
 
var cells = document.querySelectorAll('td'); 
 

 
//Iterate through the Nodelist (cells[]) and assign a string from the array (content[]) 
 
for (var i = 0; i < cells.length; i++) { 
 
    cells[i].innerHTML = content[i]; 
 
}

table { 
 
    border: 3px solid grey; 
 
    table-layout: fixed; 
 
    margin: 40px auto; 
 
} 
 
td { 
 
    border: 3px inset black; 
 
    outline: 2px outset grey; 
 
    height: 30px; 
 
    width: 30px; 
 
    color: blue; 
 
    padding: 5px; 
 
}

<table style="width:100%"> 
 
    <tr> 
 
    <td id="tr0">&nbsp;</td> 
 
    <td id="tr1">&nbsp;</td> 
 
    <td id="tr2">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="tr3">&nbsp;</td> 
 
    <td id="tr4">&nbsp;</td> 
 
    <td id="tr5">&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td id="tr6">&nbsp;</td> 
 
    <td id="tr7">&nbsp;</td> 
 
    <td id="tr8">&nbsp;</td> 
 
    </tr> 
 
</table>

источник

2016-03-20 00:25:28 zer00ne

Привет, большое спасибо за ваш ответ. У меня есть еще один вопрос, поэтому у меня есть несколько условий, я должен поставить массив, цикл и переменную в каждое из моих условий? – tom3883

@ tom3883 Мне нужно было бы увидеть эти условия и то, что от них ожидается, и т. Д., Чтобы дать вам разумный ответ. Но * вообще * лучше всего иметь условия внутри цикла, поэтому условия будут применяться к каждой итерации (полный цикл) переменных, выражений. и т. д. – zer00ne

Хорошо, спасибо, так что лучше поставить петлю на все условия и поставить массив в условия? – tom3883

Смежные вопросы