GetElementsByClassName не работает

Я закодировал php-страницу, которая аккуратно отображает информацию из базы данных mysql в таблицы. Я хотел бы скрыть пустые строки таблицы обработчиком события onLoad.

Вот пример таблицы с кодом, который скрывает <td>, когда у него нет содержимого. но я могу заставить его работать с разными идентификаторами:

        <script type="text/javascript">
        function hideTd(id){
            if(document.getElementById(id).textContent == ''){
              document.getElementById(id).style.display = 'none';
            }
          }
        </script>
        </head>
        <body onload="hideTd('1');hideTd('2');hideTd('3');">
        <table border="1">
          <tr>
            <td id="1">not empty</td>
          </tr>
          <tr>
            <td id="2"></td>
          </tr>
          <tr>
            <td id="3"></td>
          </tr>
        </table>
    </body>

то, что я хочу сделать, это использовать класс для <td> для достижения того же самого, но только ссылаясь на класс один раз, и не ссылаясь на каждый отдельный id, который я хочу удалить, что даже не будет работать для моего динамического содержимого, Я пробовал использовать этот код:

    <script type="text/javascript">
    function hideTd(){
        if(document.getElementsByClassName().textContent == ''){
          document.getElementsByClassName().style.display = 'none';
        }
      }
    </script>
    </head>
    <body onload="hideTd('1');">
    <table border="1">
      <tr>
        <td class="1">not empty</td>
      </tr>
      <tr>
        <td class="1"></td>
      </tr>
      <tr>
        <td class="1"></td>
      </tr>
    </table>
</body>

но это не сработает. его предполагается скрыть пустой <td>, который имеет указанный класс. как скрыть пустые <td> с помощью классов, а не идентификаторов?

Ответы

Ответ 1

Есть несколько проблем:

  • Имена классов (и идентификаторы) не могут начинаться с цифры.
  • Вы должны передать класс getElementsByClassName().
  • Вам нужно повторить набор результатов.

Пример (непроверенный):

<script type="text/javascript">
function hideTd(className){
    var elements = document.getElementsByClassName(className);
    for(var i = 0, length = elements.length; i < length; i++) {
       if( elements[i].textContent == ''){
          elements[i].style.display = 'none';
       } 
    }

  }
</script>
</head>
<body onload="hideTd('td');">
<table border="1">
  <tr>
    <td class="td">not empty</td>
  </tr>
  <tr>
    <td class="td"></td>
  </tr>
  <tr>
    <td class="td"></td>
  </tr>
</table>
</body>

Обратите внимание, что getElementsByClassName() недоступен до IE8 включая IE8.

Update:

В качестве альтернативы вы можете предоставить таблице идентификатор и использовать:

var elements = document.getElementById('tableID').getElementsByTagName('td');

чтобы получить все элементы td.

Чтобы скрыть родительскую строку, используйте свойство parentNode элемента:

elements[i].parentNode.style.display = "none";

Ответ 2

Если вы хотите сделать это с помощью ClassName, вы можете сделать:

<script type="text/javascript">
function hideTd(className){
    var elements;

    if (document.getElementsByClassName)
    {
        elements = document.getElementsByClassName(className);
    }
    else
    {
        var elArray = [];
        var tmp = document.getElementsByTagName(elements);  
        var regex = new RegExp("(^|\\s)" + className+ "(\\s|$)");
        for ( var i = 0; i < tmp.length; i++ ) {

            if ( regex.test(tmp[i].className) ) {
                elArray.push(tmp[i]);
            }
        }

        elements = elArray;
    }

    for(var i = 0, i < elements.length; i++) {
       if( elements[i].textContent == ''){
          elements[i].style.display = 'none';
       } 
    }

  }
</script>