Изменить ширину ячеек одной таблицы, в зависимости от соответствующих ячеек в другой таблице

@Ryuuji · Регистрация: 12.10.2012

Студворк — интернет-сервис помощи студентам

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

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
document.onload=function ()
    {
        var i;
        var obj;
        var objf;
        for(i=0; i<25; i++)
        {
            obj = document.getElementById('td_' + i);
            objf = document.getElementById('tdf_' + i);
            objf.width = obj.offsetWidth;
        }
    }

@Notortep · 12.10.2012, 12:04

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

при увеличении ширины одной ячейки увеличивается ширина всех ячеек столбца
при увеличении высоты одной ячейки увеличивается высота всех ячеек строки

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

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

так что функцию вашу, без знания того - в какую сторону идёт изменение ширины (уменьшается ширина ячейки или увеличивается) - заценить трудно
и вообще - я бы с такой задачей не заморачивался
выделяете в первой таблице одну ячейку, а в другой из-за этого увеличивается ширина целого столбца
одна ячейка и целый столбец... где тут логика?

@Ryuuji · 12.10.2012, 12:16 **[ТС]**

выделяете в первой таблице одну ячейку, а в другой из-за этого увеличивается ширина целого столбца

собственно этого и добиваюсь

в какую сторону идёт изменение ширины

по большому счёту, все ячейки разной ширины. но, в общем, скорее идут на уменьшение.

всё это делается для задания одинаковых размеров столбцов в плавающей шапке таблицы, и самой таблицы.

@Notortep · 12.10.2012, 12:29

ну это не так делается

проще всего:

1 - склонировать таблицу
2 - удалить у клона циклом все строки, кроме первой (которая шапка)
3 - а у самой таблицы удалить самую первую строку (шапку)

4 - сравнить циклом попарно ширину ячеек клона и ячеек второй строки (но теперь уже, после удаления шапки - первой) таблицы
5 - той ячейке, которая меньше, добавить ширину
6 - сделать клон плавающим
всё!

код набросать?

@Ryuuji · 12.10.2012, 12:31 **[ТС]**

код набросать?

было бы замечательно

но там таблицы как простыни длиной, надеюсь тормозить не будет
и ещё шапка таблицы сложной структуры. в смысле с использованием colspan и rowspan

@Notortep · 12.10.2012, 12:46

Сообщение от Ryuuji

и ещё шапка таблицы сложной структуры. в смысле с использованием colspan и rowspan

colSpan - оно не страшно, а вот rowSpan...
надо тогда точно знать - какое количество строк в шапке оставлять и, соответственно, какое количество начальных строк из таблицы удалять
-----

да нет, тормоза вовсе не будет: клонирование - оно нетормозное
удаление строк (особо, если их много) - да, тормозит, и сильно
однако, написав "удалить все строки, кроме первой" - я просто не стал детализировать
из клонированной таблицы удалять следует все строки сразу -- clon.innerHTML = ''
а потом из основной таблицы клонируется только шапка и приживляется в клон таблицы
-----

в общем, рассказывайте - какой там у вас максимальный rowSpan в шапке?

@Ryuuji · 12.10.2012, 12:51 **[ТС]**

в общем, рассказывайте - какой там у вас максимальный rowSpan в шапке?

думаю не так страшно, как предполагалось. максимальный rowSpan =2

@Notortep · 12.10.2012, 12:53

Сообщение от Ryuuji

думаю не так страшно, как предполагалось. максимальный rowSpan =2

т.е. в шапке всего две строки?

@Ryuuji · 12.10.2012, 12:59 **[ТС]**

да, строки всего 2. столбцы по 1, и по 3. количество столбцов может меняться

@Notortep · 13.10.2012, 09:54

мда... задачка в общем виде оказалась нетривиальной
приходится в шапке "перескакивать" со строки на строку, учитывая все возможные rowSpan'ы и colSpan'ы
а если ещё добавить сюда возможные rowSpan'ы и colSpan'ы в первых строках тела таблицы, то вообще туши свет...

сделать можно, конечно, но довольно трудоёмкое это дело
-----

а не попробовать ли вам совсем иначе, без подбора ширины ячеек?
простым помещением клона таблицы поверх существующей

я тут набросал код
не знаю уж, как он поведёт себя с вашими "простынями", попробуйте:

HTML5
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html> <!-- без него тоже вроде работает -->
<html>
<head>
<style>
#tb0 {width: 100%}
#tb0 td {text-align: center; padding: 10px 12px}
#dv0 {width: 300px; height: 200px; overflow-y: scroll; border-bottom: 1px solid #000}
#dv0 {background-color: #fff} /* чтобы таблица, если прозрачная, не просвечивала */
</style>
<script>
onload = function ()
{
var DV  = document.getElementById ('dv0');
var TBL = document.getElementById ('tb0');
 
var DVclon = DV.cloneNode (1);
 
var r01H = TBL.rows [0].offsetHeight       // суммарная высота
         + TBL.rows [1].offsetHeight;      // двух строк шапки
 
if ('v' == "\v"
&& document.compatMode != 'BackCompat'
&& TBL.rows [0].innerHTML.toLowerCase ().  // в IE + doctype
indexOf ('rowspan') != - 1)                // если есть rowSpan
r01H = TBL.rows [0].offsetHeight;          // надо считать одну
 
var DclW = DV.clientWidth;                 // ширина без скроллбара
 
DV.style.position = 'relative';            // делаем relative,
DV.style.zIndex = 3;                       // чтобы работал z-index
 
var l = t = 0;
while (DV.offsetParent)
   l += DV.offsetLeft,
   t += DV.offsetTop,                      // определяем абсолютные
   DV = DV.offsetParent;                   // координаты DIV'а
 
with (DVclon.style)
   position = 'absolute',
   zIndex = 99,                             // поверх существующего
   top = t +'px',
   left = l + 'px',
   height = r01H + 'px',                   // высотой в шапку
   width = DclW + 'px',                    // минус ширина скроллбара
   overflow = 'hidden';                    // и убираем скроллбар
 
document.getElementById ('dv0').parentNode.appendChild (DVclon);
}
</script>
</head>
<body>
<p>some code
<p>some code
 
<div id="dv0"><table id="tb0" cellspacing="0" cellpadding="0" border="1">
<tr><td>00</td><td rowspan="2">01<br>11</td><td colspan="2">02 03</td></tr>
<tr><td>10</td>           <td>12</td><td>13</td></tr>
<tr><td colspan="2">20 21</td><td>22</td><td>23</td></tr>
<tr><td>30</td><td>31</td><td>32</td><td>33</td></tr>
<tr><td>40</td><td>41</td><td>42</td><td>43</td></tr>
<tr><td>50</td><td>51</td><td>52</td><td>53</td></tr>
<tr><td>60</td><td>61</td><td>62</td><td>63</td></tr>
<tr><td>70</td><td>71</td><td>72</td><td>73</td></tr>
<tr><td>80</td><td>81</td><td>82</td><td>83</td></tr>
<tr><td>90</td><td>91</td><td>92</td><td>93</td></tr>
</table>
 
</div>
 
</body>
</html>

клонирование - оно не тормозное
единственное, что может затормозить - это "перерисовка" таблицы внутри клона -
сначала она делается чуть уже, затем возвращается к исходной ширине
у меня в коде это строки ##43 и 44

но вообще-то эта перерисовка - она ещё в виртуале, клон ещё не приживлён -
тормозить как бы не должно

@Ryuuji · 15.10.2012, 09:49 **[ТС]**

выглядит печально.

Изменить ширину ячеек одной таблицы, в зависимости от соответствующих ячеек в другой таблице

@kalabuni · 15.10.2012, 10:04

выложенный выше код, как он есть, работает нормально

ваш скриншот - это ваша попытка обработать этим скриптом свою таблицу?

@Ryuuji · 15.10.2012, 10:17 **[ТС]**

ваш скриншот - это ваша попытка обработать этим скриптом свою таблицу?

именно. и она ещё на блок верхний наползла.

@kalabuni · 15.10.2012, 10:47

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

вы вообще какую видимую ширину для контейнера планировали?
не во всю ширину окна?

уберите в стилях ширину width: 300px для #dv0 и width: 100% для #tb0
и скрипт без изменений будет обрабатывать и широкую таблицу, даже со свободной (не фиксированной) шириной контейнера с id="dv0"

единственное - если у вас таблица шире окна браузера и появится горизонтальный скроллбар, то надо обрабатывать горизонтальный скролл

вместо последних двух строк скрипта выше (где appendChild и закрывающая фигурная скобка) напишите:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
DVclon.id = 'cln';
DVclon.firstChild.style.position = 'absolute';
DVclon.firstChild.style.backgroundColor = '#fff';
document.getElementById ('dv0').onscroll = fHorScroll;
 
document.getElementById ('dv0').parentNode.appendChild (DVclon);
}
 
function fHorScroll ()
{
document.getElementById ('cln').firstChild.style.left
= document.getElementById ('dv0').scrollLeft * -1 + 'px';
}

@Ryuuji · 15.10.2012, 16:21 **[ТС]**

Клон внедряется в тело страницы уже после родителя. и если я цепляю функцию "плавания" на ID dv0 ? то и плавает вся родительская таблица.
Можно ли как-то сменить ID клона?

Добавлено через 22 минуты
Пардон, ID увидел, но:
Клон внедряется в тело страницы уже после родителя. и если я цепляю функцию "плавания", то клонированная шапка в самом низу оказывается, а ф-я "плавания" подразумевает , что блок должен быть перед началом таблицы.
Использует jquery.min.js v1.3.2

JavaScript
1
2
3
4
5
6
7
8
9
    $(function() {
        var offset = $("#cln").offset();
        var topPadding = 15;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#cln").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("#cln").stop().animate({marginTop: 0});};});
    });

@kalabuni · 15.10.2012, 19:39

а куда плавать-то?

Не по теме:

создавали впечатление вменяемого человека...
потом выяснилось - jquery, да ещё "плавает"

@Ryuuji · 16.10.2012, 00:07 **[ТС]**

При прокрутке страницы шапка плывёт за видимой областью.
И я вполне нормален, в отличии от заказчика...

@kalabuni · 16.10.2012, 01:49

Сообщение от Ryuuji

При прокрутке страницы шапка плывёт за видимой областью.

последний кодовый фрагмент как раз это обеспечивает

и причём тут заказчик?

@wendstor · 16.10.2012, 02:35

ну а на div'ах таблицу сделать, а потом тянуть хоть одну, хоть выборочные...

@Ryuuji · 16.10.2012, 10:31 **[ТС]**

последний кодовый фрагмент как раз это обеспечивает

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

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Notortep Заблокирован
	12.10.2012, 12:04
	таблица - это такая штука, где ширину и высоту у одной ячейки менять никак не получится при увеличении ширины одной ячейки увеличивается ширина всех ячеек столбца при увеличении высоты одной ячейки увеличивается высота всех ячеек строки с другой стороны, уменьшение ширины и высоты ячейки может, во-первых, не привести к изменению ширины/высоты столбца/строки, потому что минимальная ширина/высота ячеек определяется шириной/высотой их содержимого; во-вторых, бывает, что у текущей ячейки тоже нельзя уменьшить высоту/ширину, потому что она уже минимальна... так что задача ваша, как видите, совсем нетривиальна однако... есть и "плюсы" - увеличивать ширину всех ячеек столбца не надо, достаточным будет изменить ширину одной, другие ячейки столбца сами "подтянутся" аналогично и с высотой - менять её нужно только у одной ячейки строки ----- так что функцию вашу, без знания того - в какую сторону идёт изменение ширины (уменьшается ширина ячейки или увеличивается) - заценить трудно и вообще - я бы с такой задачей не заморачивался выделяете в первой таблице одну ячейку, а в другой из-за этого увеличивается ширина целого столбца одна ячейка и целый столбец... где тут логика? 0

@Notortep Заблокирован
	12.10.2012, 12:29
	ну это не так делается проще всего: 1 - склонировать таблицу 2 - удалить у клона циклом все строки, кроме первой (которая шапка) 3 - а у самой таблицы удалить самую первую строку (шапку) 4 - сравнить циклом попарно ширину ячеек клона и ячеек второй строки (но теперь уже, после удаления шапки - первой) таблицы 5 - той ячейке, которая меньше, добавить ширину 6 - сделать клон плавающим всё! код набросать? 0

@Ryuuji 0 / 0 / 0 Регистрация: 12.10.2012 Сообщений: 11
	12.10.2012, 12:59 [ТС]
	да, строки всего 2. столбцы по 1, и по 3. количество столбцов может меняться 0

@Ryuuji 0 / 0 / 0 Регистрация: 12.10.2012 Сообщений: 11
	15.10.2012, 09:49 [ТС]
	выглядит печально. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	15.10.2012, 10:04
	выложенный выше код, как он есть, работает нормально ваш скриншот - это ваша попытка обработать этим скриптом свою таблицу? 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	15.10.2012, 19:39
	а куда плавать-то? Не по теме: создавали впечатление вменяемого человека... потом выяснилось - jquery, да ещё "плавает" 0

@Ryuuji 0 / 0 / 0 Регистрация: 12.10.2012 Сообщений: 11
	16.10.2012, 00:07 [ТС]
	При прокрутке страницы шапка плывёт за видимой областью. И я вполне нормален, в отличии от заказчика... 0

@wendstor 139 / 137 / 66 Регистрация: 15.05.2012 Сообщений: 518
	16.10.2012, 02:35
	ну а на div'ах таблицу сделать, а потом тянуть хоть одну, хоть выборочные... 0