Gå til innhold
🎄🎅❄️God Jul og Godt Nyttår fra alle oss i Diskusjon.no ×

Hvordan legger jeg ulike bakgrunnsbilder i kolonnene i en tabell?


Anbefalte innlegg

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.

Lenke til kommentar
Videoannonse
Annonse

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/

Lenke til kommentar

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! :rofl:

 

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 av Mastiff
Lenke til kommentar

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."

 

post-24308-0-47506900-1461656443_thumb.jpg

 

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

Endret av Mastiff
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...