[js] dynamiczne tworzenie buttonów

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

[js] dynamiczne tworzenie buttonów

Post autor: Kiluk »

Mam javascript (od razu mówie, że nie mojego autorstwa), który odpowiedzialny jest za dynamiczne tworzenie buttonów.
Javasript ma taki kod:

Kod: Zaznacz cały

function createSubject()
{
    var szablontd1  = '<span id="sprb{ID}"><input type="radio" name="radio" value="{VALUE}" id="rb{ID}" onclick="rbClick(this)" /></span>';
    var szablontd2 = '<input type="checkbox" name="czek{ID}" id="cb{ID}" value="{VALUE}" class="hidden" /><button id="bt{ID}" class="topic font11" onclick="return btClick(this)">{VALUE}</button>';
    var endtr   = document.getElementById('aftersubtr');
    var parent  = endtr.parentNode;
    for(var i=0, len=Math.ceil(subjects.length/2); i<len; i++)
    {
        var tr       = document.createElement('tr');
        var td       = document.createElement('td');
        td.className = 'center';
        td.innerHTML = szablontd1.replace(/\{ID\}/g,i+1).replace(/\{VALUE\}/g,subjects[i]);
        tr.appendChild(td);
        var td       = document.createElement('td');
        td.className = 'center'
        td.innerHTML = szablontd2.replace(/\{ID\}/g,i+1).replace(/\{VALUE\}/g,subjects[i]);
        tr.appendChild(td);
        if(subjects[len+i]!==undefined)
        {
            var td       = document.createElement('td');
            td.className = 'center'
            td.innerHTML = szablontd1.replace(/\{ID\}/g,len+i+1).replace(/\{VALUE\}/g,subjects[len+i]);
            tr.appendChild(td);
            var td       = document.createElement('td');
            td.className = 'center'
            td.innerHTML = szablontd2.replace(/\{ID\}/g,len+i+1).replace(/\{VALUE\}/g,subjects[len+i]);
            tr.appendChild(td);
        }
        else
        {
            var td = document.createElement('td');
            td.innerHTML = ' ';
            tr.appendChild(td);
            var td = document.createElement('td');
            td.innerHTML = ' ';
            tr.appendChild(td);
        }
        parent.insertBefore(tr,endtr);
    };
};
Oczywiście w formularzu html mam funkcję wywołującą skrypt a wygląda ona tak:

Kod: Zaznacz cały

        var subjects = [
        'button1',
        'button2',
        'button3',
        'button4',
        'button5',
        'button6',
        'button7',
        'button8',
        'button9',
        'button10',
        'button11',
        'button12',
        'button13',
        'button14',
        'button15',
        'button16',
        'button17',
        'button18'];
Wszystko jest w porzadku tylko, że javascript generuje mi tabelę z 4 kolumnami.
w 1 i 3 kolumnie mam radiobuttony 2 i 4 kolumnie mam buttony
Dodatkowo jeśli mam 18 buttonów to równo rozkłada mi buttony w każdej kolumnie po 8 szt.

Iteraz własciwe pytanie, jak zmodyfikowac kod, abym uzyskał 3 kolumnę, czyli, żeby buttony rozkładały się po 6 buttonów w kazdej kolumnie.

Prosze o pomoc. Wymiękam przy tym kodzie javy.

Kiluk
fan_pascala
Nowy
Nowy
Posty: 59
Rejestracja: czw lip 12, 2007 7:29 pm
Lokalizacja: Niepołomice
Kontakt:

Re: [js] dynamiczne tworzenie buttonów

Post autor: fan_pascala »

Kod: Zaznacz cały

   
  var szablontd1  = '<span id="sprb{ID}"><input type="radio" name="radio" value="{VALUE}" id="rb{ID}" onclick="rbClick(this)" /></span>';
   var szablontd2 = '<input type="checkbox" name="czek{ID}" id="cb{ID}"     value="{VALUE}" class="hidden" /><button id="bt{ID}" class="topic font11" onclick="return btClick(this)">{VALUE}</button>';
    var endtr   = document.getElementById('aftersubtr');
    var parent  = endtr.parentNode;
    var kolumn = 3
    for(var i=0, len=Math.ceil(subjects.length/kolumn); i<len; i++)
    {
	    var tr  = document.createElement('tr'); 
		for (var n=0;n<kolumn;n++)
		{
		 if(subjects[i+len*n]!==undefined)
         {
            var td       = document.createElement('td');
            td.className = 'center'
            td.innerHTML = szablontd1.replace(/\{ID\}/g,i+len*n+1).replace(/\{VALUE\}/g,subjects[i+len*n]);
            tr.appendChild(td);
            var td       = document.createElement('td');
            td.className = 'center'
            td.innerHTML = szablontd2.replace(/\{ID\}/g,i+len*n+1).replace(/\{VALUE\}/g,subjects[i+len*n]);
            tr.appendChild(td);
          }
          else
          {
            var td = document.createElement('td');
            td.innerHTML = ' ';
            tr.appendChild(td);
            var td = document.createElement('td');
            td.innerHTML = ' ';
            tr.appendChild(td);
          }
          parent.insertBefore(tr,endtr);
		}
    };
Njważniejsze zmienne to wprowadzenie zmiennej kolumn,.
Można ją teraz ustawić na dowolną wartość.
Oraz pętelki iteracyjnej obliczającej etykiety dla n( = kolumn) przycisków, w rzędzie i.
Kiluk
Nowy
Nowy
Posty: 53
Rejestracja: wt lip 03, 2007 7:41 am

re

Post autor: Kiluk »

Kurcze działa. Wielkie dzieki.

Stwierdzam z przykrością, że duuuuuuuużo mi jeszcze brakuje................ do Waszego poziomu wiedzy.

Pozdrawiam
Kiluk
ODPOWIEDZ