Står helt fast på å fryse første kolonne og rad i en dynamisk tabell laget av LUA

[Mastiff]

Jeg har en tabell for å starte radiokanaler i huset som på mobiler må flyttes et godt stykke hvis man skal til en av kanalene litt lenger uti rekka, og den må langt ned for å komme til en av sonene lenger ute i rekka. På mobil i portrettmodus ser jeg egentlig bare av og på for forsterkene, og volum opp og ned, og det er foreløpig 10 radiokanaler til høyre for det. Det går an å zoome ut , men da blir skriften liten. Jeg kan også bare se halvparten av sonene samtidig (10-11 av 20), og så kommer jeg så langt til høyre at jeg ikke ser sonenavnet lenger. Jeg skulle gjerne klart å fryse første kolonne og rad. Her er et bilde av hvordan det ser ut på en pc-skjerm:

 

 

Og her er koden som lager tabellen:

// Build the table
function BuildTable()
{
//define the number of rows in the table here
var rows = 20;
rows = rows + 1;
//define the dynamic table name (must be unique if more than 1 table displayed on the page)
$('#forsterkertabell').append('<table></table>');
var table = $('#forsterkertabell').children();
var tr = $('<tr>');

//create the first row for titles, can change the widths as long as match widths of table below
$('<td>Sone</td>').appendTo(tr);
$('<td>Sonenr.</td>').appendTo(tr);
$('<td>Av/på</td>').appendTo(tr);
$('<td>Vol -</td>').appendTo(tr);
$('<td>Vol +</td>').appendTo(tr);
$('<td>P1</td>').appendTo(tr);
$('<td>P2</td>').appendTo(tr);
$('<td>P3</td>').appendTo(tr);
$('<td>P4</td>').appendTo(tr);
$('<td>MP3</td>').appendTo(tr);
$('<td>Alltid nyh.</td>').appendTo(tr);
$('<td>Jazz</td>').appendTo(tr);
$('<td>Sport</td>').appendTo(tr);
$('<td>P1+</td>').appendTo(tr);
$('<td>Av</td>').appendTo(tr);
$('<td>Sone</td>').appendTo(tr);
tr.appendTo(table);

//start a for next loop for each subsequent row
for(var r = 1; r < rows; r++)
{
var tr = $('<tr>');
var RowID = r - 1;
var RowID2 = r;


//as above, but with letters (does not update unless page is reloaded)
var myname_REF = '<center><Div><Span id=\"mynameID'+RowID+'\"></span></center>';
$('<td>'+myname_REF+'</td>').appendTo(tr);

//example of a dynamic string display, built from local variable name + ID + rowid (does not update unless page is reloaded)
var myid_REF = '<center><Div><Span id=\"myidID'+RowID+'\"></span></center>';
$('<td>'+myid_REF+'</td>').appendTo(tr);

//Slå av og på forsterkeren
var minforsterker_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettForsterker\", \"18\", \"0\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"ForsterkereButton'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"ForsterkereButton'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"ForsterkereButton'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minforsterker_REF+'</td>').appendTo(tr);

//Volum ned på forsterkeren
var minvolumned_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"Volumned\", \"18\", \"1\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minvolumnedButton'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minvolumnedButton'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minvolumnedButton'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minvolumned_REF+'</td>').appendTo(tr);

//Volum opp på forsterkeren
var minvolumopp_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"Volumopp\", \"18\", \"1\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minvolumoppButton'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minvolumoppButton'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minvolumoppButton'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minvolumopp_REF+'</td>').appendTo(tr);

//Sett radiokanal 1 This is a button which calls a function SendEventPayload. Note, all 4 payloads are free to use
var minradiokanal1_REF = '<center><a href=\"\" onclick=\'return SendEventPayload(\"SettRadiokanal\", \"18\", \"1\" ,\"\" ,\"'+RowID2+'\",\"FromWeb\");\' onmousedown=\'return SetImage(\"minradiokanal1Button'+RowID+'\", \"img/button_blue_down.jpg\");\' onmouseup=\'return SetImage(\"minradiokanal1Button'+RowID+'\", \"img/button_blue_up.jpg\");\'><img src=\"img/button_blue_up.jpg\" id=\"minradiokanal1Button'+RowID+'\" border=\"1\"></a></center>'
$('<td>'+minradiokanal1_REF+'</td>').appendTo(tr);

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

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

//Sett radiokanal 4
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);

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

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

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

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

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

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

//as above, but with letters (does not update unless page is reloaded)
var myname2_REF = '<center><Div><Span id=\"myname2ID'+RowID+'\"></span></center>';
$('<td>'+myname2_REF+'</td>').appendTo(tr);

tr.appendTo(table);
}

Det er Ajax query. Problemet er å finne ut hvor jeg skal sette inn kode for å fryse første kolonne (jeg bytter om navnet og sonenummeret for å få det til) og første rad. Har noen en god idé? Jeg fant denne:

 

http://kjell.haxx.se/tablelock/

 

Jeg mailet også han som har laget den, men han hadde ikke tid til å se på det. Siden viser hvordan man må legge opp tabellen, men når jeg prøver, blir den bare tom.