Input erstellen funktioniert nicht - auf Android.

[Sven Rautenberg]

Moin!

Ich habe eine Tabelle mit einer unbekannten Anzahl Spalten. Die Zeilen dieser Tabelle sollen editierbar sein, heisst bei einem (doppel)klick darauf sollen inputs eingefügt werden.

Schlechte Idee.

Punkt 1: Auf Touch-Geräten kann man prinzipbedingt nicht klicken. Die Geräte sind aber so freundlich, die typischen Bedien-Interaktionen, die man vom Desktop mit Mausbedienung kennt, bestmöglich auf Touch-Bedienaktionen zu mappen. Deshalb funktioniert es, wenn man mit dem Finger auf einen Link tippt: Der Link wird geöffnet.

Punkt 2: "Doppelklick" funktioniert schon mal gar nicht. Wenn ich auf meinen Android-Phone zweimal auf den Screen tippe, aktiviere ich den Zoom. Diese Aktion dürfte die Website im Browser gar nicht mitbekommen.

Halten wir also fest: Touch-Bedienung erfordert andere Technik, also sollte man auch andere Begriffe verwenden. Viele Touch-Bedienaktionen werden direkt vom OS und vom Browser als Javascript-Event gemeldet, und es kommt nur noch darauf an, den passenden Eventhandler zu triggern.

In diesem Zusammenhang würde ich außerdem empfehlen, ein existierendes Javascript-Framework mit der Arbeit zu beauftragen. jQuery ist verbreitet und ein guter Ansatz, um sich diverse Cross-Browser-Probleme vom Hals zu schaffen, jQuery Mobile erweitert das dann mit spezialisierten Mobile-Dingen, vor allem UI und Touch-Events.

So weit so gut. Ich habe es sowohl mit innerHTML als auch mit createElement & AppendChild versucht und beides funktioniert am PC (Firefox / Chrome) wunderbar. Wenn ich aber von meinem Android Tablet auf die Seite zugreife (Firefox Mobile / Chrome) bleibt das Script bei der Erstellung des inputs hängen.

Manche Browser mögen es nicht, wenn man in Teilen einer Tabelle herumfummelt. Ich würde vermuten, jQuery weiß das und abstrahiert es, sprich: Die Einzeloperation wird ersetzt durch ein Lesen, Verändern und Neuschreiben der gesamten Tabelle.

var activeID = 0;
var lastID;
var activeRow = 0;
var lastRow;

var getColumn = new Array();

function select(id,no,cell) {
activeID = id;
lastID = id;
activeRow = no;
lastRow = no;

var rowID = "tr" + id;
var getRowContent = document.getElementById(rowID);
var getCells = getRowContent.getElementsByTagName("td");

document.getElementById(rowID).setAttribute("class","editDataTR");

var column = 1;
while (getRowContent.getElementsByTagName("td")[column]) {
getColumn[column] = getRowContent.getElementsByTagName("td")[column].innerHTML;
var name_id = columnNames[column] + id;
getRowContent.getElementsByTagName("td")[column].innerHTML = "<input type="text" name="" + name_id + "" id="" + name_id + "" value="" + getColumn[column] + "" class="txtEdit" />";
column++;
}

document.getElementById(cell + id).focus();

}

>   
> Bin noch eher neu bei Javascript, deshalb bin ich nicht sicher ob sich in der Funktion noch Fehler befinden. Aber eigentlich funktioniert das Script auf dem PC ja tadellos, auch Firebug meldet mir keine Fehler. Allerdings ist die Tabletunterstützung der Website essentiell.  
  
jQuery nimmt dir viele der Aufgaben auf sehr einfache Weise ab, die du derzeit mühsam individuell codierst. Vielleicht solltest du mal einen Blick riskieren.  
  
  
 - Sven Rautenberg