Yocker
  1. Yocker
  3. jQuery / javascript sostituiscono il tipo di tag
Intereting Posts
Safari Javascript Date () NaN Problema (aaaa-MM-gg HH: mm: ss) come ottenere file di programma x86 variabile env? Come assegnare un Git SHA1 a un file senza Git? Come misurare il tempo interno del kernel in NVIDIA CUDA? Trova il prefisso comune delle stringhe Come si associano più parametri di query ai campi di un bean sulla richiesta GET Jersey? Come funziona l’intestazione Access-Control-Allow-Origin? Posso ottenere l’immagine dall’elemento canvas e usarla nel tag img src? Collegamento di una libreria condivisa con un’altra lib condivisa in linux Associazione a blocchi-diagonale di matrici Come posso impedire a Entity Framework di provare a salvare / inserire oggetti figlio? Genera una lista di tutte le possibili permutazioni di una stringa Riproduzione audio utilizzando AVAudioPlayer iOS 7 Qual è l’impatto di Thread.Sleep (1) in C #? jQuery Validate: abilita la convalida per i campi nascosti

jQuery / javascript sostituiscono il tipo di tag

C’è un modo semplice per scorrere tutti i tag td e cambiarli in th? (eccetera).

Il mio attuale approccio sarebbe quello di avvolgerli con il th e quindi rimuovere il td, ma poi perdo altre proprietà ecc.

Completamente non testato, ma dando un vortice: 

 $("td").each(function(index) { var thisTD = this; var newElement = $(""); $.each(this.attributes, function(index) { $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value); }); $(this).after(newElement).remove(); });

Sto guardando e guardandolo, e non riesco a pensare a una ragione per cui non funzionerebbe!

1) loop attraverso ogni elemento td
2) crea un nuovo elemento th
3) per ciascuno di questi td, loop su ciascuno dei suoi attributi
4) aggiungi quell’attributo e il valore al nuovo elemento th
5) una volta che tutti gli attributi sono a posto, aggiungi l’elemento al DOM subito dopo il td e rimuovi il td

Modifica: funziona bene: http://jsbin.com/uqofu3/edit

jQuery.replaceTagName

Il seguente è un plugin jQuery per sostituire il nome del tag degli elementi DOM.

fonte 

 (function($) { $.fn.replaceTagName = function(replaceWith) { var tags = [], i = this.length; while (i--) { var newElement = document.createElement(replaceWith), thisi = this[i], thisia = thisi.attributes; for (var a = thisia.length - 1; a >= 0; a--) { var attrib = thisia[a]; newElement.setAttribute(attrib.name, attrib.value); }; newElement.innerHTML = thisi.innerHTML; $(thisi).after(newElement).remove(); tags[i] = newElement; } return $(tags); }; })(window.jQuery);

Fonte minificata 

 (function(e){e.fn.replaceTagName=function(t){var n=[],r=this.length;while(r--){var i=document.createElement(t),s=this[r],o=s.attributes;for(var u=o.length-1;u>=0;u--){var a=o[u];i.setAttribute(a.name,a.value)}i.innerHTML=s.innerHTML;e(s).after(i).remove();n[r]=i}return e(n)}})(window.jQuery);

uso

Includi la sorgente minificata in alto nel tuo javascript dopo jQuery.

Quindi puoi usare il plugin in questo modo: 

 $('div').replaceTagName('span'); // replace all divs with spans

O nel tuo caso questo: 

 $('td').replaceTagName('th');

I selettori jQuery funzionano come previsto 

 $('.replace_us').replaceTagName('span'); // replace all elements with "replace_us" class with spans $('#replace_me').replaceTagName('div'); // replace the element with the id "replace_me"

Altre risorse

jsFiddle con i test di Qunit 

 $("td").each(function() { var tmp = $('
').append($(this).clone(true)).html().replace(/td/i,'th'); $(this).after(tmp).remove(); });

o puro DOM 

 function replaceElm(oldTagName, newTagName, targetElm) { var target = targetElm || window.document; var allFound = target.getElementsByTagName(oldTagName); for (var i=0; i

DOM è sempre più veloce: http://jsperf.com/replace-tag-names

Questo potrebbe funzionare, ma non l’ho testato estesamente: 

 var tds = document.getElementsByTagName("td"); while(tds[0]){ var t = document.createElement("th"); var a = tds[0].attributes; for(var i=0;i

Spero che aiuti in qualche modo.

Leggera aggiunta alla risposta @GlenCrawford, per preservare anche il testo interno con la linea: 

 newElement.text($(value).text());

Adesso tutti insieme: 

 $("td").each(function(index) { var thisTD = this; var newElement = $(""); newElement.text($(value).text()); $.each(this.attributes, function(index) { $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value); }); $(this).after(newElement).remove(); });

Bene, questa domanda è piuttosto vecchia, ma ciò potrebbe comunque essere d’aiuto: l’unico plug-in di jQuery funziona come previsto (non è ansible riutilizzare l’object restituito nell’altro, per aggiungere attributi ad esempio): 

 jQuery.fn.extend({ replaceTagName: function(replaceWith) { var tags=[]; this.each(function(i,oldTag) { var $oldTag=$(oldTag); var $newTag=$($("
").append($oldTag.clone(true)).html().replace(new RegExp("^<"+$oldTag.prop("tagName"),"i"),"<"+replaceWith)); $oldTag.after($newTag).remove(); tags.push($newTag.get(0)); }); return $(tags); } });

Oltre al basic $("td").replaceTagName("th"); puoi anche effettuare chiamate a catena come $("td").replaceTagName("th").attr("title","test");

Versione minificata: 

 jQuery.fn.extend({replaceTagName:function(a){var b=[];this.each(function(d,c){var e=$(c);var f=$($("
").append(e.clone(true)).html().replace(new RegExp("^<"+e.prop("tagName"),"i"),"<"+a));e.after(f).remove();b.push(f.get(0))});return $(b)}});

Questo è un po ‘più pulito della risposta di @ GlenCrawford e copia inoltre i figli dell’elemento sostituito. 

 $('td').each(function(){ var newElem = $('', {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); }); 
 document.body.innerHTML=document.body.innerHTML.replace(/(\)|(\)/gi,function(x){return x.replace("td","th");})