Цикл внутри функции для изменения строк таблицы цветов - PullRequest
Новая
       9

Цикл внутри функции для изменения строк таблицы цветов

0 голосов
/ 13 января 2010

У меня есть форма для построения запросов, встроенная в PHP. Результаты запроса возвращаются и помещаются в две разные таблицы одна над другой. (идентификаторы таблиц - это результаты и результаты2) Каждая возвращаемая запись создает две таблицы для отображения своих данных. (Скоро будет три)

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

<script type="text/javascript">
function alternate(id){
  if(document.getElementsByTagName){
    var table = document.getElementById(id);
    var rows = table.getElementsByTagName("tr");
    for(i = 0; i < rows.length; i++){
      if(i % 2 == 0){
       rows[i].className = "row-one";
       }else{
       rows[i].className = "row-two";
            }
          }
         }
        }
</script>

Тогда я использую нагрузку на тело следующим образом: 

<body onload="alternate('results'); alternate('results2');">

Проблема в том, что он окрашивает только первые два экземпляра этих таблиц, когда в зависимости от количества возвращаемых записей их может быть сотни.

Как я могу заставить эту функцию применяться к каждой таблице в документе с id = results и results2 и скоро стать результатами3?

Ответы [ 2 ]

3 голосов
/ 13 января 2010

Если вы действительно хотите сделать это с помощью JavaScript, я бы предложил следующий код:

Во-первых, у ваших таблиц должен быть класс «results» вместо идентификатора «results1», «results2» и т. Д. (Поскольку, как говорится в моем комментарии к вопросу, идентификаторы должны быть уникальными, а getElementById будет возвращать только один результат и применяется только к одному реальному элементу): 

<table class="results">...</table>

Далее используйте этот JavaScript: 

<script type="text/javascript">
function alternate(classNameMatch) {
    var tables = document.getElementsByTagName("TABLE");
    for (var i=0; i < tables.length; i++) {
        var table = tables[i];
        if (table.className.indexOf(classNameMatch) == -1)) continue;

        for (var j=0; j < table.rows.length; j++) { // "TABLE" elements have a "rows" collection built-in
            table.rows[j].className = j % 2 == 0 ? "row-one" : "row-two";
        }
    }
}
</script>

Затем вызовите alternate("results"); при загрузке страницы.

Но я действительно предлагаю сделать это на PHP. JavaScript будет очень неэффективным с большими наборами результатов. Он также не будет отображаться сразу, что сделает стиль страницы видимым после загрузки страницы.

Я бы также просто добавил класс к каждой строке, а затем по-умолчанию назначил бы стиль всем строкам, а другой - другому: 

<style type="text/css">
table.results tr { background-color:#f0f0f0; }
table.results tr.row2 { background-color:#f0f0ff; }
</style>
1 голос
/ 13 января 2010

Конечно, каждый вызов метода применяется только к одной таблице - вы не зацикливаетесь на нескольких таблицах, а устанавливаете переменную table в верхней части документа, а затем окрашиваете строки в , которые стол. Как уже отмечали другие, идентификаторы в любом случае должны быть уникальными в документе, поэтому getElementByID возвращает только одно значение.

Выполнение этого на стороне сервера также будет намного лучше, потому что это канонический документ, отправляемый всем, поэтому он не полагается на то, что у него включен JS, и не требует - незначительное количество времени обработки, пока страница чередуется.

Если вы должны сделать это на стороне клиента, лучшей реализацией было бы дать вашим таблицам определенный класс (вместо ID); слегка реорганизовать ваше решение, чтобы разделить ядро ​​вашей функциональности на метод, который разбивает единственную переданную таблицу; затем найдите все таблицы с классом "stripeme" (или чем-то еще) и зациклите этот результат, передав каждую таблицу в ваш метод чередования.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...