Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.63/41: Рейтинг темы: голосов - 41, средняя оценка - 4.63
 Аватар для Веди
18 / 13 / 1
Регистрация: 04.07.2012
Сообщений: 523

Работа с таблицами

08.04.2013, 01:38. Показов 8768. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
привет, друзья!
подключил файл с кодом:
JavaScript
1
2
3
4
5
t=document.getElementById('tablica');
k=1;
for(i=0;i<t.rows.length;i++)
 for(j=0;j<t.rows.length;i+=2,k++) 
   t.rows[i].cells[j].style.background-color=((k%2==0)?'#000000':'#FFFFFF')
к страничке с таблицей, но ничего не происходит, где ошибка?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
08.04.2013, 01:38
Ответы с готовыми решениями:

Работа с таблицами
Помогите сделать красивую таблицу. У меня есть код но почему то с моими кривыми руками ничего не работает. Нужно скомпоновать все кусочки...

Работа с таблицами
Доброго времени суток. Помогите с реализацией одной фичи. Суть: есть html таблицы, в колонках которых имеется время отправления...

Работа с таблицами
Ребят, подскажите, как можно организовать добавления данных в таблицу(HTML таблицу). Я так понимаю, создать форму добавления информации и...

10
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
08.04.2013, 08:52
Так ты же убиваешь переменную J и два раза меряешь количество рядов

хочешь получить шахматное поле? вот варианты
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
onload=function(){
var obj, c, i, l;
obj=document.getElementById("InStrip");
l=obj.rows.length;//сколько строк в таблице
while(l--){
i=obj.rows[l].cells.length;//сколько ячеек в строке
c=obj.rows[l].cells;//ссылка на все(массив) ячейки этой строки
while(i--){
if(i%2==0){c[i].className=l%2==0?"dark":"light";}
else{c[i].className=l%2==0?"light":"dark";}}};
 };
 
/*
 
onload=function(){
var obj, c, i, l, k, j;
obj=document.getElementById("InStrip");
l=obj.rows.length;//сколько строк в таблице
for(k=0; k!=l; k++){
i=obj.rows[k].cells.length;//сколько ячеек в строке
c=obj.rows[k].cells;//ссылка на все(массив) ячейки этой строки
for(j=0; j!=i; j++){
if(j%2==0){c[j].className=k%2==0?"dark":"light";}
else{c[j].className=k%2==0?"light":"dark";}}};
 };
*/
 
/*
//эта версия работает только при нечётном количестве ячеек в ряду!!!
onload=function(){
var c, l;
c=document.getElementById('InStrip').getElementsByTagName('td');
l=c.length; 
while(l--){c[l].className=l%2==0?"dark":"light";};
 };
 
*/
HTML5
1
2
3
4
5
6
7
8
9
10
<table border="1" cellpadding="0" cellspacing="0" id="InStrip">
<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8
</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16
</td></tr><tr><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24
</td></tr><tr><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>32
</td></tr><tr><td>33</td><td>34</td><td>35</td><td>36</td><td>37</td><td>38</td><td>39</td><td>40
</td></tr><tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td><td>46</td><td>47</td><td>48
</td></tr><tr><td>49</td><td>50</td><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td><td>56
</td></tr><tr><td>57</td><td>58</td><td>59</td><td>60</td><td>61</td><td>62</td><td>63</td><td>64
</td></tr></table>
CSS
1
2
3
4
5
#InStrip, #chess {margin:100px auto 0 auto;}
#InStrip td, #chess td {text-align:center; width:64px; height:64px;}
 
.dark {background:beige;}
.light {background:azure;}
0
 Аватар для Веди
18 / 13 / 1
Регистрация: 04.07.2012
Сообщений: 523
08.04.2013, 09:22  [ТС]
newJS, спасибо огромное!!! всё получилось!!!

вот это c[i].className - доступ к классу в .css соответствующей ячейки?
и есть ли какая то шайка для построчного прогона кода js?
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
08.04.2013, 09:37
Веди, А к чему мучить JS если этот эффект можно получить на чистом CSS ?

CSS
1
2
3
4
5
6
7
8
9
10
    table.chahmats td{
        width:20px;
        height:20px;
        border: none;
    }
    table.chahmats tr:nth-child(odd) td:nth-child(odd), 
    table.chahmats tr:nth-child(even) td:nth-child(even){
        background: #999;
        
    }
0
 Аватар для Веди
18 / 13 / 1
Регистрация: 04.07.2012
Сообщений: 523
08.04.2013, 10:16  [ТС]
может и не к чему, но во 1) я изучаю js, во 2) это один из билетов экзамена

хотя спасибо за вариант, буду использовать!!!
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
08.04.2013, 10:22
Веди, тогда мои притензии теряют силу =)
но перед преподом можешь <censored> знаниями
0
 Аватар для Веди
18 / 13 / 1
Регистрация: 04.07.2012
Сообщений: 523
08.04.2013, 13:06  [ТС]
и всё таки не понятно, почему:
1. нельзя сразу определить строки и столбцы, а уже после сделать цикл в цикле, по крайне мере в с++ я так делал;
2. цикл while(l--) начать не с количества строк, а с 0 до l, те. делать проверку таблицы сверху вниз и слева на направо, или же это специфика js?
1
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
08.04.2013, 15:25
Веди, почему нельзя? можно...
определить кол-во строк(а)
определить количество столбцо(б)

и цыкл внутри цикла...
JavaScript
1
2
3
4
5
6
for i=0;i<a;i++
    for y=0;y<b;y++
        if this.idnex % 2 == 0
           then
        else
           then
это я так логику написал тока.... а не код...

Добавлено через 34 секунды
по моему вполне круто...
0
Эксперт JSЭксперт HTML/CSS
2436 / 1115 / 312
Регистрация: 23.06.2011
Сообщений: 3,529
08.04.2013, 20:59
Цитата Сообщение от Веди Посмотреть сообщение
1. нельзя сразу определить строки и столбцы
будет лишний цикл, а так все по ходу делается

Цитата Сообщение от Веди Посмотреть сообщение
2. цикл while(l--) начать не с количества строк,
если не критично с какой стороны проходить таблицу, то такой цикл самый быстрый по скорости и требует только одну переменную.
мой опыт говорит что в подавляющем большинстве случаев можно использовать обратный цикл.

Цитата Сообщение от and_y87 Посмотреть сообщение
А к чему мучить JS если этот эффект можно получить на чистом CSS
при генерации таблицы
ну и ради старых ослов тоже

еще можно использовать TD и TH для получения подобных эффектов, тогда совсем просто
0
 Аватар для Веди
18 / 13 / 1
Регистрация: 04.07.2012
Сообщений: 523
09.04.2013, 00:29  [ТС]
на основе Вашего кода сварганил то, что нужно по заданию - выделение главной и побочной диагонали:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
    var obj, c, i, l;
    obj=document.getElementById("tablica-0");
    l=obj.rows.length;//сколько строк в таблице
    s=l;
    while(l--){
        i=obj.rows[l].cells.length;//сколько ячеек в строке
        c=obj.rows[l].cells;//ссылка на все(массив) ячейки этой строки
        while(i--){
            if(i==l || i+l==s-1)    c[i].className="dark";
        }
    }
вроде всё работает, но смущает
1. промежуточная переменная s, для сохранения длины?
2. да и я думал что нужно будет s+1, ан нет, вычитать, в чём тут фокус?
3. можно как-то обойтись без этой промежуточной, или это - необходимое зло?

Добавлено через 6 минут
пи.си. да, на счёт 1. и 2. догадался сам, вставил в код obj.rows.length-1, не знаю лучше ли это?
0
Просто любитель
 Аватар для GuardCat
626 / 464 / 120
Регистрация: 20.01.2011
Сообщений: 865
Записей в блоге: 2
11.04.2013, 20:59
Я бы «шахматную доску» сделал так:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
  Функция makeChessBoard принимает таблицу и 
  присваивает элементам td в шахматном порядке
  класс «darkSide»/
*/
function makeChessBoard(table) {
  var x, y;
  for (y = 0; y < table.rows.length; y++) {
    for (x = 0; x < table.rows[0].cells.length; x++) {
      if ( (x + y) % 2 ) { // Красим только когда сумма номеров строки и столбца нечётная
        table.rows[y].cells[x].className = "darkSide"
      }
    }
  }
}
Вот тут живой пример.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
11.04.2013, 20:59
Помогаю со студенческими работами здесь

Работа с таблицами
Всем добрый день) Заранее очень благодарен что вы посетили мою тему, спасибо за внимание Друзья, с ajax и js у меня совсем плохо....

Работа с таблицами
помогите реализовать эти задания в икселе

Работа с таблицами
Добрый вечер всем.Хотел спросить ребята почему так получается:&quot;Я создал 3 таблицы,связал и чуть заполнил данными&quot; 1 таблица...

Работа с таблицами
Где то видел тему, но никак найти не могу. Как на скрипте пробежать по таблице на форме, при этом вытаскивая свойства ячеек(текст,...

Работа с таблицами
Здравствуйте! На MYSQL есть база с одинаковыми по структуре таблицами но последние столбцы различны названиями но тип тот же. как сделать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru