Just nu i M3-nätverket
Gå till innehåll

"2-dimensionell" radiobutton


Robert

Rekommendera Poster

Hej,

 

I en radiobutton grupp får man automatisk kontroll på att det bara är ett alternativ som fylls i om de ingår i samma grupp genom "name"-attributet. Jag försöker få till en två dimensionell sådan (om man kan kalla det så) där jag vill få till en resultatlista där ett antal namn listas på y-axeln och en position på x-axeln. Jag skapar ett rutnät av radiobuttons där varje namn OCH position endast får användas en gång. Exempel:

 

 
      1 2 3 4 5
namn1 o x o o o 
namn2 o o o o x 
namn3 o o x o o 
namn4 x o o o o 
namn5 o o o x o 

 

Jag hoppas det går att förstå exemplet. :)

 

Detta borde kunna lösas med Javascript men jag är inte så slipad på det. Det kanske t o m redan är någon som löst detta. Är det någon som känner till det eller hur jag ska gå till väga?

 

Mvh

/Robert

 

[inlägget ändrat 2006-03-24 15:56:16 av rtr]

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Vad vill du skall hända om man försöker kryssa i ett otillåtet val? Att ingenting händer helt enkelt?

 

Länk till kommentar
Dela på andra webbplatser

Alla val är tillåtna, men HTML begränsar mig till att bara kunna kontrollera en rad eller en kolumn. Antingen låter man alla möjliga "positioner" för "namnX" ingå i en grupp, eller tvärtom att alla "namnX" är grupperade till en "position" i mitt exempel.

 

Med mitt exempel som grund där position1 - 5 är grupperade i en radiobutton grupp för varje "namnX". Ta "namn1" som exempel som har position2 markerad. Säg att man istället markerar position4 för "namn1", då skulle position4 markeras och position2 avmarkeras samtidigt skulle det ju finnas två personer, "namn1" och "namn5" som innehar position4 eftersom det är olika radiobutton grupper. I det läget vill jag att "namn5" inte längre ska ha position4 markerad.

 

Man skulle behöva ha markerade positioner lagrade, eller att man på något snillrikt sätt känner av att det får bara finnas ett kryss i samma rad som man markerar och i samma kolumn man markeras. För att åstadkomma det lär man väl ha en dold radiobutton som man får sätta "namn5" till.

 

Tacksam för alla förslag!

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Ok, här är det en långtråkig fredagkväll så jag ska se vad jag kan sätta ihop. Återkommer om en stund

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Ok, kolla om detta är vad du var ute efter. Nu kan det bara finnas ett "kryss" i varje rad och ett i varje kolumn (exemplet använder 2 rader om 3 kolumner, läs kommentarerna i början av javascriptet och anpassa variablerna efter din grids dimensioner).

 

[log]

<html><head>

<SCRIPT type="text/javascript">
// Dimensionera efter antal kolumner
var arrColumns=new Array(0,0,0);
// Antal rader
var RowCnt=2

function CheckGrid(oBt) {
nCol=GetColumnNo(oBt);
isSet=(arrColumns[nCol-1]==1);
arrColumns[nCol-1]=1;
if (isSet)
	ClearCheckedColumn(oBt,nCol);
}
// Hämta kolumnnr
function GetColumnNo(oBt) {
nNo=0;
while (oBt) {
	nNo+=(oBt.tagName=='INPUT')?1:0;
	oBt=oBt.previousSibling;
}
return nNo;
}
// Gå igenom alla rader och rensa satt kolumn
function ClearCheckedColumn(oNotThisButton,nCol) {
for (i=0;i<RowCnt;i++) {
	oBts=document.getElementsByName('row'+(i+1));
	o=oBts[nCol-1];
	if (o!=oNotThisButton)
		oBts[nCol-1].checked=false;
}
}

</SCRIPT></head><body >
<div>
<input onclick="CheckGrid(this);" type="radio" name="row1" id="row1">
<input onclick="CheckGrid(this);" type="radio" name="row1" id="row1">
<input onclick="CheckGrid(this);" type="radio" name="row1" id="row1">
</div>
<div>
<input onclick="CheckGrid(this);" type="radio" name="row2" id="row2">
<input onclick="CheckGrid(this);" type="radio" name="row2" id="row2">
<input onclick="CheckGrid(this);" type="radio" name="row2" id="row2">
</div>

</body></html>

[/log]

 

Här är koden i snyggare och indenterad formattering

http://01a562572a7aec22.paste.se/

 

 

[inlägget ändrat 2006-03-24 23:51:24 av Anjuna Moon]

Länk till kommentar
Dela på andra webbplatser

Tack Anjuna Moon,

 

Jag har tittat på ditt exempel och det är exakt vad jag är ute efter.

 

/Robert

 

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon,

 

Jag har testat att utöka matrisen till många flera rader och kolumner, och det fungerar utmärkt.

 

Men när jag tar detta och stoppar in det i en tabell där varje radiobutton placeras i en cell så spricker det. Är scriptet på något sätt beroende av <div>-taggarna eller "allergisk" mot <table>-taggarna? Jag har försökt tyda det men kommer inte så långt.

 

/Robert

 

Länk till kommentar
Dela på andra webbplatser

Jag insåg att detta har med DOM-object att göra och har nu satt mig in lite grann i hur det fungerar. Om jag förstått det rätt så fungerar inte

oBt.previousSibling

om jag inför <table>, <tr> och <td> istf endast <div>.

 

Så om jag omgärdar varje radiobutton med en <td> så borde det fungera bättre om istället för

oBt.previousSibling

kör

oBt.parentNode.firstChild

? Någon som vet?

 

Tack på förhand!

/Robert

 

 

[inlägget ändrat 2006-03-28 12:08:25 av rtr]

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Nä, precis. Mitt exempel var skräddarsytt efter att radioknapparna ligger i samma element (radvis). Om jag hinner ska jag kasta ett öga på varianten med TD kring varje knapp.

 

Länk till kommentar
Dela på andra webbplatser

  • 2 veckor senare...

Jag har försökt laborera med objekten men inte lyckats få till det när de ligger i en tabell. Jag har bytt ut 5:E raden i GetColumnNo(oBt)

oBt=oBt.previousSibling;

mot

oBt=oBt.parentNode.previousSibling.firstChild;

eftersom jag först måste ta mig upp från den aktuella radiobutton till den <td> som omgärdar den osv. Jag har också infört id="..." på varje <tr> och <td> för att kunna identifiera dem, vet inte om det är nödvändigt.

 

Men detta fungerar inte. Anjuna, har du något tips att ge mig?

 

Tack!

/Robert

 

 

 

Länk till kommentar
Dela på andra webbplatser

Anjuna Moon

Pröva att ändra funktionen till följande:

function GetColumnNo(oBt) {
nNo=0;
oTd=oBt.parentNode;
while (oTd) {
	nNo+=(oTd.tagName=='TD')?1:0;
	oTd=oTd.previousSibling;
}
return nNo;
}

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...