Несколько DIV добавить и выбрать с помощью JavaScript

Question

Несколько DIV добавить и выбрать с помощью JavaScript

0

Я создал несколько блоков div (под планированием), используя javascript здесь

for (i = 0; i < 168; i++) {
    var iDiv = document.createElement('div');
    iDiv.id = 'inc';
    document.getElementById('appointmentchart').appendChild(iDiv);
}

Теперь мне нужно еще 2 вещи, которые нужно сделать с помощью JavaScript.

При щелчке внутри любого div внутри планирования назначьте class="yellow" на 3 последовательных div вертикали (теперь div расположены горизонтально).

Нужно ли расположить div вертикально для этого? Если да, то как?
Пойдите в Practicien с левой стороны, выберите Chirurgie → DUPONT Marc а затем выберите дату 10-Mar-2014. Вы увидите назначения, видимые на Multiple планирования div диаграмме. Некоторые из них выходят из контейнера.

Как переместить переполняющий раздел в следующий div?

Можно ли добиться вышеупомянутого использования JavaScript?

Sparkz 12 март 2014, в 21:09

Источник

2

Вы повторяете идентификатор цикла for, измените его на что-то вроде iDiv.id= 'inc'+i
T J 12 март 2014, в 20:12
0

определить next div . div вправо? кажется, что длина для 2 div переполняется, и только 1 div находится справа от переполнения div внизу слева ..
T J 12 март 2014, в 21:31

Теги:

javascript

jquery

html

css

2 ответа

0

ответ на ваш вопрос 1):

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

var clickedDiv=//point this at the div you clicked on
//select the grid squares
var divs=document.getElementById('appointmentchart').getElementsByTagName('div');
//how many divs across your grid is
var cols=14; 

 for(var i=0;i<divs.length;i++){
  //find the clicked divs index
  if(clickedDiv=divs[i]){
    //make next three yellow
    for(var y=1;y<4;y++){
          var sqaure=cols*y;
          if(i+square<divs.length){
             divs[i+square].className='yellow';
          }
     }
    break;
 }
}

user2782001 12 март 2014, в 19:01

Ещё вопросы

Вы повторяете идентификатор цикла for, измените его на что-то вроде iDiv.id= 'inc'+i
определить next div . div вправо? кажется, что длина для 2 div переполняется, и только 1 div находится справа от переполнения div внизу слева ..

T J · Accepted Answer · 2014-03-12T17-24-00.000Z

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

for (i = 0; i < 168; i++) {
var iDiv = document.createElement('div');
iDiv.id = 'inc'+i; //different id
iDiv.addEventListener('click', clickFunction);// assign click handler
document.getElementById('appointmentchart').appendChild(iDiv);
}

предполагая, что в каждой строке всегда будет 14 столбцов, которые вы можете сделать

function clickFunction(){
 var num= parseInt(this.id.substring(3));
 for(var i=1;i<=3;i++){
  document.getElementById('inc'+num).className+= 'yellow'
  num+=14;
 }
}

Обновление: FIDDLE

я получаю следующую ошибку: Uncaught TypeError: Невозможно вызвать метод 'substring' из неопределенного
@Sparkz измените clickFunction() на clickFunction чтобы избежать ошибки. Проверьте эту скрипку jsfiddle.net/tilwinjoy/Gayr4 , она работает нормально