eine <tr> mit einer neuen ersetzen

cottton · 26. September 2013

js mag mich nicht, und andersrum auch

Ich hab eine Tabelle mit paar <tr>s - klar.
Auf bestimmten <tr>s gibts links. Onclick werden zusätzliche trs via ajax geladen.
Jetzt möchte ich die neuen trs unter oder über die momentane tr setzen
und die alte löschen oder ausblenden.

Mein Problem:
ich bekomme es nicht hin, dass ich den string mit den neuen trs in die Tabelle schreibe.

Wenn ich ein neues Element erstelle (createElement) und die neuen trs (xmlhttp.responseText) da rein schiebe, dann klappt es halbwegs.
Das div hat da nix zu suchen.

Kann man denn irgentwie per JS die bestimmte row (id vorhanden) ansrechen
in etwa:

JavaScript

current_el = document.getElementById(id);
new_el = xmlhttp.responseText;
replace(current_el, new_el);

?

edit:
soweit bin ich, aber beomme nur fehler -.-

JavaScript

function updateTable(new_tr,current_tr){
        var table = current_tr.parentNode;
        //table.replaceChild(new_tr,current_tr);  // => Error: WRONG_ARGUMENTS_ERR




        var temp = document.createElement('table'); // => Error: WRONG_ARGUMENTS_ERR
        temp.innerHTML = new_tr;
        var res = temp.childNodes;
        table.insertBefore(res,current_tr); // => Error: WRONG_ARGUMENTS_ERR
}

Alles anzeigen

lauras · 27. September 2013

Warum so umständlich mit replace?
http://stackoverflow.com/quest…ript-remove-element-by-id

cottton · 27. September 2013

Bei dem Link gehts um remove
Aber ich hab festgestellt, dass der Fehler beim "Ansgangsobjekt" lieg: kein DOM.
Ich bekomme per Ajax einen String. Und hab gestern noch gelesen, dass bei den functions insertBefore(),replaceChild(),removeChild ect ein oder mehrere DOM erwartet werden.

Also zurück zur Servereite und alles per json senden
Kennt evtl schon jemand eine Klasse o.ä. die ein Array o.ä. empfängt und daraus html code erzeugt?

btw: wer es mal braucht - da ich es ja nun alles abgegrast hab:

JavaScript

// insert DOM before:
parent_table.insertBefore(new_el,current_el);




// insert after: --credits - irgentjemand bei stackoverflow
var insertAfter = function(referenceNode,newNode){
    referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);
}




// remove 
parent_table.removeChild(current_el);




// copy style:
var copyStyle = function(el){ // credits: http://stackoverflow.com/questions/2715447/how-can-i-programmatically-copy-all-of-the-style-attributes-from-one-dom-element
    var completeStyle = "";
    if("getComputedStyle" in window){
        completeStyle = window.getComputedStyle(el,null).cssText;
    }else{
        var elStyle = el.currentStyle;
        for(var k in elStyle){
            completeStyle += k + ":" + elStyle[k] + ";";
        }
    }
    return completeStyle;
}

Alles anzeigen

lauras · 27. September 2013

Ja, geht es. Warum machst du es mit replace (was ja offensichtlich nicht so gut funktioniert), wenn du es auch mit insert+remove machen kannst?

cottton · 27. September 2013

removeChild functioniert, da es ja ein DOM ist (die tr war ja "schon da")
aber mit der neuen tr, die ja per Ajax als String rüber kommt bekomme ich nen Fehler beim versuch mit insertBefore() oder auch der function insertAfter().
Die beiden functions wollen ein DOM und schmeißen mir nen error "Error: WRONG_ARGUMENTS_ERR" mit nem String.

Hatte auch versuch den String zu parsen mit new DOM ... stringTo(weiß nicht mehr genau).
Aber das functioniert wohl nicht in jedem Browser ...

EDIT: gelöst.
Hab nun per ajax nur die reinen Daten ziehen lassen.
Per HTML das Grundgerüst erstellt und mit JS befüllen lassen ( document.createElement('tr') ect )
Damit ist es möglich einzellne tr im Table anzuhängen, zu ändern, replace oder löschen.

JavaScript

// beispiele (falls es mal jemand braucht):




// tr erstellen:
var tr = document.createElement('tr'); 
// dieser tr eine class geben:
tr.setAttribute("class",'klassen_name');
// oder eine id vergeben:
tr.setAttribute("id",'eine_id');
// - jetzt käme dann noch die <td>s und deren inhalt ...




// tr an table anhängen:
document.getElementById('table_id').appendChild(tr); // tr siehe oben "tr erstellen"
 // oder:
var table = tr.parentNode; // table "ausgewählt"
table..appendChild(tr); 




// tr an bestimmte stelle anhängen:
 // - tr erstellen, evtl class und id setzen, td erstellen, td inhalt verpassen und an tr anhängen
var current_row = document.getElementById('eine_bestimmte_tr_id');
var table = current_row.parentNode;
insertAfter(tr,current_row); // *insertAfter siehe unten
// oder insertBefore();




// oder aber auch replace
table.replaceChild(tr,current_row);







// * insertAfter:
function insertAfter(newElement,targetElement){ // credits: http://snipplr.com/view/2107/insertafter-function-for-the-dom/
    var parent = targetElement.parentNode;
    if(parent.lastchild == targetElement){
        parent.appendChild(newElement);
    }else{    
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

Alles anzeigen

und weil ichs so interessant und nützlich finde:
CSS und/oder JS files per Javascript nachladen:

JavaScript

function loadjscssfile(filename,filetype){ /*credits: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml#.UkgheEDVvIY*/
    if(filetype == "js"){
        var fileref = document.createElement("script");
        fileref.setAttribute("type","text/javascript");
        fileref.setAttribute("src",filename);
    }else if(filetype == "css"){
        var fileref = document.createElement("link");
        fileref.setAttribute("rel","stylesheet");
        fileref.setAttribute("type","text/css");
        fileref.setAttribute("href",filename);
    }
    (typeof fileref != "undefined")?document.getElementsByTagName("head")[0].appendChild(fileref):false;
}   
// create an array of files to include:
var includes = {
    "style":"css","ajax":"js","general":"js" /*, ect ect */
}
// load css/js files dynamically: 
for(var file in _G.includes){
    loadjscssfile("pfad/pfad/"+includes[file]+"/"+file+"."+includes[file],includes[file]);
}        
// wait till all css and js files are loaded:
document.onreadystatechange = function(){
    (document.readyState == "complete")?/* ab hier sind alle files geladen */ startIrgenteineFunctionHier() :false;
}
// wichtig ist, dass man die document.onreadystatechange function nutzt. 
// wenn nämlich nicht, dann würde JS in die function loadjscssfile() gehen, die files laden,
// dann aber einfach "weg rennen", wärend der browser noch am laden der files ist.
// was passiert ist, dass JS schon functions ect aufrufen will, welche in den files stecken die noch am laden sind =)

Alles anzeigen

eine <tr> mit einer neuen ersetzen

Jetzt mitmachen!

Teilen