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>s для достижения того же самого, ссылаясь только на класс один раз, и не ссылаясь на каждый идентификатор, который я хочу удалить, что даже не будет работать для моего динамического контента. Я попытался использовать этот код:

    <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>s, которые имеют указанный класс. как скрыть пустоту <td>s используя классы, а не идентификаторы?

11
dynamic-data html-table javascript webforms

2 ответов

есть несколько вопросов:

  1. имена классов (и ID) являются не может начинаться с цифры.
  2. вы должны пройти класс getElementsByClassName().
  3. вы должны выполнить итерацию результирующего набора.

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

<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() не имеется вплоть до ИЕ8.

обновление:

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

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

для всех td элементы.

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

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

Если вы хотите сделать это по 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>
1