Изменить innerHTML во всех строках <td>

1

Как изменить 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>
  • 0
    Прежде всего, вы не можете иметь одинаковые id для всех строк. id должен быть уникальным во всем документе. Вместо этого используйте класс.
  • 0
    идентификатор должен быть уникальным. Используйте класс для этой цели.
Показать ещё 2 комментария
Теги:
innerhtml

8 ответов

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

Прежде всего, вы не должны указывать один и тот же атрибут 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' 
}
Поделиться
  • 0
    Ты человек! Лучший рабочий скрипт! Спасибо!!!!!
  • 0
    там будет галочка с моим ответом, нажмите на нее, если вы нашли мое решение наиболее подходящим
2

Вы должны использовать атрибут 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>

Вот JsFiddle

Поделиться
0

Решение <> <= =>

<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>
Поделиться
0

Не используйте идентификатор для множественного селектора. Пробуйте с помощью 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>
Поделиться
0

Замените этот скрипт и проверьте,

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

Поделиться
0

Вы не должны использовать 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>
Поделиться
  • 0
    Работает, но вместо 1 мне нужно вставить изображение. Как?
  • 0
    @PlayerPhB Что мешает вам сделать это?
0

Идентификатор должен быть уникальным, используйте как это

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>
Поделиться
0 

<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>
Поделиться
  • 0
    Ну, это работает, но они не <или> или <= или => как заставить их работать?

Ещё вопросы

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