Ошибка JavaScript при попытке скрыть строки таблицы

Question

Я пытаюсь отобразить строки в зависимости от выбора пользователя. Предположим, что он хочет только 3 ряда, тогда четвертый и пятый ряд будут скрыты. Пожалуйста, найдите ниже часть html и javascript.

HTML

<table>
  <tr id="sRow1">
    <td>1a</td>
    <td>1b</td>
  </tr>
  <tr id="sRow2">
    <td>2a</td>
    <td>2b</td>
  </tr>
  <tr id="sRow3">
    <td>3a</td>
    <td>3b</td>
  </tr>
  <tr id="sRow4">
    <td>4a</td>
    <td>4b</td>
  </tr>
  <tr id="sRow5">
    <td>5a</td>
    <td>5b</td>
  </tr>
</table>

JavaScript

// b gets value from xml file        
    while (b <= 5)
    {
        var rowName = "sRow" + b;
        alert(rowName);
        try {
            document.getElementById(rowName).style.display = "none";
        }
        catch (err)
        {
            alert(err.description)
        }
        b++;
    }

Я получаю объект Требуется ошибка в document.getElementById (rowName) .style.display = "none"; Не могли бы вы помочь.

Answer 1

По моему опыту, вы получите противоречивые результаты в разных браузерах, пытаясь сделать строки таблицы невидимыми, изменив атрибуты стиля. Более безопасная вещь - фактически удалить и вставить строки из таблицы, используя методы insertRow () и deleteRow () dom для объекта таблицы. Это правильно поддерживается во всех основных браузерах, с которыми вы можете столкнуться.

Answer 2

Вам не хватает интересного бита (откуда взято b), поэтому я просто догадываюсь: иногда b на самом деле не число от 1 до 5 включительно. Может быть, это строка, которая не форматируется чисто в однозначное число 1-5, или, может быть, это что-то совсем другое ... Давайте сделаем ваш код немного безопаснее, на всякий случай, если я прав:

// b gets value from xml file

// ensure b is a number - will fail comparison if NaN
b = new Number(b);
while (b <= 5)
{
  var rowName = "sRow" + b;
  var row = document.getElementById(rowName);
  if ( row ) // verify element was found before trying to modify it!
    row.style.display = "none";
  b++;
}

Обратите внимание, что я удалил try {} catch - вам лучше просто проверить возвращаемое значение getElementById(), так как это не помешает отладке, если вы захотите использовать отладчик позже ...

Answer 3

Я думаю, что вам не хватает атрибута runat с идентификатором строки, так как вы упомянули идентификатор строки, но не упомянули атрибут runat, если вы не упомянули атрибут runat, то возникает эта ошибка.