Как изменить innerHTML во всех строках?
Этот скрипт только меняет innerHTML в первой строке.
<table>
<tr><td id="X">0</td></tr>
<tr><td id="X">0</td></tr>
</table>
<script>
if (document.getElementById("X").innerHTML == 0)
{
document.getElementById('X').innerHTML = '1';
}
</script>
Прежде всего, вы не должны указывать один и тот же атрибут id в DOM. Плохая практика. вы можете назначить тот же "класс".
Но даже если это заданные элементы с вами, то использование следующего кода решит вашу проблему
var tdList = document.getElementsByTagName('td');
for(var i=0; i< tdList.length; i++){
if(tdList[i].innerHTML.trim()=='0' && tdList[i].getAttribute('id') == "X")
tdList[i].innerHTML = '1'
}
Вы должны использовать атрибут class
, а не id
. У вас должны быть уникальные идентификаторы ваших элементов на странице.
Так должно быть:
<table>
<tr>
<td class="X">0</td>
</tr>
<tr>
<td class="X">0</td>
</tr>
</table>
<script>
var els = document.getElementsByClassName("X");
for (var i = 0; i < els.length; i++) {
els[i].innerHTML = '1';
}
</script>
Решение <> <= =>
<table>
<tr><td id="X">9</td></tr>
<tr><td id="X">10</td></tr>
<tr><td id="X">11</td></tr>
</table>
<script>
var tdList = document.getElementsByTagName('td');
for(var i=0; i< tdList.length; i++){
if(parseInt(tdList[i].innerHTML.trim())<'10' && tdList[i].getAttribute('id') == "X")
tdList[i].innerHTML = 'Answer is here'
}
</script>
Не используйте идентификатор для множественного селектора. Пробуйте с помощью querySelectorAll querySelectorAll()
и forEach
для итерации элемента один за другим. Для более конкретных вы можете использовать имя класса
document.querySelectorAll('tr td').forEach(function(a){
a.innerHTML = a.innerHTML.trim() == '0'?'1': a.innerHTML;
})
<table>
<tr><td id="X" >0</td></tr>
<tr><td id="X" >0</td></tr>
</table>
Замените этот скрипт и проверьте,
<script>
var tableRow = document.getElementsByTagName('td');
for(var i=0; i< tableRow.length; i++){
//Your logic here
tableRow[i].innerHTML = 1;
}
</script>
Рабочий скрипт: https://jsfiddle.net/u4g2L8b6/
Вы не должны использовать id. id должен быть уникальным. Вместо этого используйте класс.
<table>
<tr><td class="X">0</td></tr>
<tr><td class="X">0</td></tr>
</table>
<script>
var tds = document.getElementsByClassName("X");
for(var i = 0; i < tds.length; i++)
{
tds[i].innerHTML = "1";
}
</script>
Идентификатор должен быть уникальным, используйте как это
var tds = document.querySelectorAll("#X td");
for (var prop in tds) {
if(tds[prop].innerHTML == "0"){
tds[prop].innerHTML = "1"
}
}
Before
<table border="1" width="100px">
<tr><td>0</td></tr>
<tr><td>0</td></tr>
</table>
After
<table id="X" border="1" width="100px">
<tr><td>0</td></tr>
<tr><td>0</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table>
<tr><td id="X">0</td></tr>
<tr><td id="X">0</td></tr>
</table>
<script>
get_item = document.querySelectorAll("#X");
for (var i in get_item) {
if(get_item[i].innerHTML == "0"){
get_item[i].innerHTML = "1"
}
}
</script>
id
для всех строк.id
должен быть уникальным во всем документе. Вместо этого используйте класс.