Как на JQuery поменять определённый col style в colgroup?

Question

[andreystrelkov]

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

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

в таблице 4 колонки, исходя из содержания этих колонок последние 2 штуки нужно сделать буквально в 50px, а вторую по максимум от оставшегося свободного места

Вопрос в том, как можно с помощью jquery найти на странице DIV с определённым ID, внутри него найти 2ой, 3ий и 4ый col style и поменять у них значение в стиле, т.е. в 3ем и 4ом поставить 50px, а 2ой, получается 100%, или там как то по другому чтобы на всё оставшееся место сводобное

На скриншоте впринципе понятно наверное что имею ввиду



Большое спасибо за помощь!

Answer 1

[Ivan Demidov]

codepen.io/anon/pen/dYerjY

Comments

[andreystrelkov]

СПАСИБО!

[andreystrelkov]

Один вопрос ещё пожалуйста, слегка запутался в коде для понимаю понятие порядкового номера дописал до следующего

$('colgroup col', '#myid')
.slice(1,3)
.css({width: 50})
.first()
.css({background: 'Green'})
.second()
.css({background: 'red'})
.third()
.css({background: 'yellow'})

правильно ли я понимаю, что first,second, third это указание на номер из созданного массива с помощь slice-a, и сначала идёт номер, а потом его свойства, если да, то для чего .css({width: 50})

[Ivan Demidov]

Изначально у нас в коллекцию попадает 4 элемента col, далее с помощью slice (он принимает два аргумента start и [end], еnd является необязательным) мы выбираем из коллекции с 1 по последний (т.к в последствие могут появиться еще элементы) задаем из по 50пх и уже потом из выбранной коллекции выбираем первый с помощью метода first (штатно стоит у jQuery) и назначаем ему 100%. second и third - таких методов нету у jQuery

[andreystrelkov]

Ivan Demidov: извиняюсь за навязчивость, а как тогда будет ваш пример выглядеть, если допустим нужно первую колонку сделать красной, 2 синей 3 зелёной 4 чёрной. Хочу логику понять

[Ivan Demidov]

В данном случае необходимо поменять селектор с col на td (т.к. col необходим только для расчета ширины колонок но не более) и основываясь на моем примере переписать следующем образом

$('tr td', '#myid')
  .slice(1)
  .first() // or .eq(0)
  .css({color: 'red'})
  .end() // вернуться выбранной коллекции
  .eq(1)
  .css({color: 'green'})
  .end().end() // вернуться к первоначальному набору
  .first()
  .css({color: 'yellow'})

Answer 2

[Дмитрий Ковальский]

1)А повесить какой-то признак на colgroup нельзя?
2)Есть ли другие colgroup на странице и если нет, то планируются ли?

Вне зависимости от ответов - решение должно быть редкостно банальным

$("colgroupSelector col:eq(1(или 2,3,4))").css("width", someValue
)

Comments

[andreystrelkov]

1) к сожалению никак :( 2) а как можно чтобы искал в пределах определённого div блока?

[Дмитрий Ковальский]

andreystrelkov: $("divselector colgroup")