Hvordan legger jeg ulike bakgrunnsbilder i kolonnene i en tabell?

[Mastiff]

Går det an å sette bakgrunnsbilde for hver celle i en kolonne på en eller annen måte gjennomn css? Jeg har et oppsett for å velge nettradiostasjoner i huset, og da kan jeg bruke kanallogoene som bakgrunnsbilde og la selve knappen som trykkes på være gjennomsiktig. Problemet er scrolling, for særlig på en mobil kommer jeg langt utenfor overskriftene for kolonnene, men med en kanallogo bak kan jeg se se at "det er p1, det er P4" osv. Jeg har prøvd meg litt med td background="img/p2.png" og background-image: url("img/p2.png") i CSS, men det er visst ikke så lett.

[Matsemann]

Det letteste er nok at du i de forskjellige kallene som generer dine kolonner putter riktig bilde. Altså at når du kaller

var minradiokanal4_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"4\" ,\"\" ,
\"'+RowID2+'\",\"FromWeb\");\' 
onmousedown=\'return SetImage(\"minradiokanal4Button'+RowID+'\", \"img/button_blue_down.jpg\");\' 
onmouseup=\'return SetImage(\"minradiokanal4Button'+RowID+'\", \"img/button_blue_up.jpg\");\'>
<img src=\"img/button_blue_up.jpg\" id=\"minradiokanal4Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal4_REF+'</td>').appendTo(tr);

Så bytter du ut <img src="... med et bilde som faktisk matcher radiokanal 4.

Forøvrig kan onmousedown og onmouseup delene løses bedre med css. ( a:hover img { border: 2px solid red }), feks: https://jsfiddle.net/5z7nzb53/3/

 

Uansett, du kan også løse det å sette riktig bakgrunn med css, om du fjerner selve <img delen av koden over.

Da må du i så fall bruke pseudo-selectoren nth:child, som velger det n-te elementet som skal styles.

Se css-en i toppen her https://jsfiddle.net/5z7nzb53/4/

[Mastiff]

Takk, men det er nok dessverre ikke derfra de knappene kommer. Det er bare trykknappene (altså mousedown/up). Valget mellom gjennomsiktige og grønne knapper styres lenger nede:

//function to recieve the data as a well formed JSON object from CheckGIRDER function and to parse it into variables to display on the web page
function checkDATA(data,GirderVariable,LocalVariable,DataType,SetButton) {
try {
jsonOBJ = jQuery.parseJSON(data);
//alert(data);
var DataString = (jsonOBJ[GirderVariable]);
//if datatype is array:
if (DataType == 'array')
{
//alert('type is array');
var Stringlength = DataString.length;
var arraymax = Stringlength + 1;
for (var a = 0; a < arraymax; a++)
    {
    $("#" + LocalVariable + "ID" + a).text(DataString[a]);
    if (SetButton == 'true')
    {
        //alert(DataString[a]);
        if (DataString[a]=='true' || DataString[a]==1 || DataString[a]=='1') SetImage(LocalVariable + "Button" + a, "img/button_green_up.jpg");
        if (DataString[a]=='false' || DataString[a]==0 || DataString[a]=='0') SetImage(LocalVariable + "Button" + a, "img/button_lyd_av.gif");
    }
    }
}

Så det er de to nederste tekstlinjene som styrer hvilket bilde som blir vist, og ikke koden for hver kolonne. De blå knappene i selve linjen er egentlig bare når man trykker på knappene. Jeg vet ikke om det er mulig å legge inn en ekstra if for hver kolonne, men jeg har en anelse om at hvis jeg prøver på det, blir det bare rot!

 

Men hvis det går med den andre versjonen, er det jo flott. Jeg ser at du har satt farge på kolonnene, men det jeg egentlig var ute etter, var å sette et bilde i hver celle i en kolonne. Går det an på tilsvarende måte?

 

Jeg skal se på den mousedown/up greia, det ville være fint å rydde litt i koden.

Endret 25. april 2016 av Mastiff

[Emancipate]

https://jsfiddle.net/oydjLr1v/2/

[Mastiff]

Takk! Det skal jeg se på i morgen, om jeg kan legge det inn i koden min! Forhåpentligvis kan det plasseres inn i den dynamiske genereringen på en eller annen måte, og i så fall er jeg så å si i mål med hele greia.

[Emancipate]

Legg dog merke til at bakgrunnsbildet "forskyves" når det ikke er akkurat størrelsen på en celle.

[Mastiff]

Det funket dessverre ikke, den ødela tabellen. Antakeligvis fordi tabellen er laget i en LUA-funksjon, og ikke på vanlig måte. Men ved et rent tilfelle snublet jeg endelig over den riktige løsningen selv!

#forsterkertabell tbody td:nth-child(6) {
background-image: url("img/p1.png");
background-repeat: no-repeat;
background-position: center;
width: 43px;
}

#forsterkertabell tbody td:nth-child(7) {
background-image: url("img/p2.png");
background-repeat: no-repeat;
background-position: center;
width: 43px;
}

Så dermed har vi bevist nok et gammelt ordtak: "En blind høne kan også finne korn."

 

 

Må bare få passe logoer til resten av kanalene, så er denne greia omtrent ferdig!

Endret 26. april 2016 av Mastiff